Vue中使用kinesis轻松创建复杂的交互式动画

Vedu • 2021-06-13 15:48 • 资源分享 • 阅读 3258

介绍

vue-kinesis 是一组Vue组件，可以为 Vue.js 应用程序创建交互式动画。

Github地址

https://github.com/Aminerman/vue-kinesis

如何安装使用

使用你习惯使用的包管理工具安装它

Vue3安装使用

npm install --save vue-kinesis@next

import { createApp } from "vue";
import App from "./App.vue";
import VueKinesis from "vue-kinesis";

const app = createApp(App);
app.use(VueKinesis);

app.mount("#app");

Vue2

npm install --save vue-kinesis

import Vue from \'vue\'
import VueKinesis from \'vue-kinesis\'

Vue.use(VueKinesis)

使用特定组件：

import Vue from \'vue\'
import { KinesisContainer, KinesisElement } from \'vue-kinesis\'

Vue.component(\'kinesis-container\', KinesisContainer)
Vue.component(\'kinesis-element\', KinesisElement)

这是使用组件的最基本方式

    <kinesis-container>
              Here, you can put
              <kinesis-element :strength="10">
                whatever
              kinesis-element>
              <kinesis-element :strength="20">
                content!
              kinesis-element>
          kinesis-container>

为了使效果起作用应该是的child

当然你还可以在浏览器中使用

<script src="vue.js">script>
<script src="vue-kinesis.min.js">script>

Props

kinesis-container

active	Boolean	true	启用或禁用交互
duration	Number	1000	以毫秒为单位的动画速度
easing	String	“cubic-bezier(0.23, 1, 0.32, 1)”	视差动画的缓和
tag	String	div	接受任何有效的 html 标签
event	String	“move”	容器将对其作出反应的事件. 可能 “move” 或者”scroll”
perspective	Number	1000	对“depth”动画类型有效
audio	String		音频文件的路径
playAudio	Boolean		开始/停止附加的音频文件

kinesis-element

strength	Number	10	运动效果的强度
type	String	“translate”	类型（translate – rotate – scale – scaleX – scaleY – depth – depth_inv）
tag	String	“div”	接受任何有效的 html 标签
transformOrigin	String	“center”	类似于 CSS transform-origin 属性
originX	Number	50	在 X 轴上相对于容器的运动原点。 50 是容器的中心，0 是左侧，100 是右侧。
originY	Number	50	相对于容器的运动原点，在 Y 轴上。 50 是容器的中心，0 是顶部，100 是底部。
axis	String	null	将运动限制在一个轴上。可能的值：“x” – “y”
maxX	Number	null	限制 X 轴上移动的最大范围
maxY	Number	null	限制 Y 轴上的最大移动范围
minX	Number	null	限制 X 轴上移动的最小范围
minY	Number	null	限制 Y 轴上移动的最小范围
cycle	Number	0	动作会重复多少次

kinesis-audio

audioIndex	Number	50	在从 0 到 127 的整数值范围内对哪个频率做出反应。
strength	Number	10	运动效果的强度
type	String	“translate”	类型（translate – rotate – scale – scaleX – scaleY – depth – depth_inv）
tag	String	“div”	接受任何有效的 html 标签
transformOrigin	String	“center”	类似于 CSS transform-origin 属性
originX	Number	50	在 X 轴上相对于容器的运动原点。 50 是容器的中心，0 是左侧，100 是右侧。
originY	Number	50	相对于容器的运动原点，在 Y 轴上。 50 是容器的中心，0 是顶部，100 是底部。
axis	String	null	将运动限制在一个轴上。可能的值：“x” – “y”
maxX	Number	null	限制 X 轴上移动的最大范围
maxY	Number	null	限制 Y 轴上的最大移动范围
minX	Number	null	限制 X 轴上移动的最小范围
minY	Number	null	限制 Y 轴上移动的最小范围
cycle	Number	0	动作会重复多少次

     
              "img"
                  :src="spider"
                  :strength="-10"
                  type="rotate"
                  transformOrigin="50% 300%"
                  axis="x"
                  type="depth" />
            "img"
                  :src="ladybug"
                  :strength="10"
                  type="rotate"
                  transformOrigin="50% 300%"
                  axis="x"
                  type="depth" />
            "img"
                  :src="fennec"
                  :strength="10"
                  type="depth"
                  transformOrigin="50% 300%"
                  type="depth" />

备注

动画的效果可以参照官方文档给出的示例

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/23607.html

Vue中使用kinesis轻松创建复杂的交互式动画

介绍

Github地址

如何安装使用

Props

备注

相关推荐

发表评论