vue-kinesis | 一款基于vuejs的炫酷交互式动画组件

vue kinesis是一款基于vuejs的炫酷交互式动画组件。通过该交互式动画组件，你可以制作出非常炫酷的微交互动画、视差效果动画、嵌套动画等效果。

使用方法

安装

使用vue3.x版本：

npm install --save vue-kinesis@next
    

使用vue2.x版本：

npm install --save vue-kinesis
    

使用

使用vue3.x版本：

// main.js      
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.x版本：

// main.js
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的Props

• active: 一个布尔值，表示是否启用交互。默认值为：true。
• duration: 一个数字，表示视差动画的速度（以毫秒为单位）。默认值为：1000。
• easing: 一个字符串，表示视差动画的缓动效果。默认值为："cubic-bezier(0.23, 1, 0.32, 1)"
• tag: 一个字符串，指定组件使用的 HTML 标签。默认值为：div。
• event: 一个字符串，表示容器将对哪个事件做出反应。可能的值是"move"和"scroll"。默认值为："move"
• perspective: 一个数字，适用于“depth”视差类型。默认值为：1000。
• audio: 一个字符串，指向一个音频文件的路径。
• playAudio: 一个布尔值，表示是否启动或停止附加的音频文件。

kinesis element的Props

• strength: 一个数字，表示运动效果的强度。默认值为：10。
• type: 一个字符串，表示运动效果的类型。可能的值包括“translate”、“rotate”、“scale”、“scaleX”、“scaleY”、“depth”和“depth_inv”。默认值为："translate"
• tag: 一个字符串，指定组件使用的 HTML 标签。默认值为："div"。
• transformOrigin: 一个字符串，类似于 CSS 的 transform-origin 属性。默认值为："center"。
• originX: 一个数字，表示运动的原点在 X 轴上相对于容器的位置。50 表示容器的中心，0 表示左侧，100 表示右侧。默认值为：50.
• originY: 一个数字，表示运动的原点在 Y 轴上相对于容器的位置。50 表示容器的中心，0 表示顶部，100 表示底部。默认值为：50.
• axis: 一个字符串，限制运动只在一个轴上移动。可能的值为“x”和“y”。默认值为：null。
• maxX: 一个数字，限制 X 轴上的最大运动范围。默认值为：null。
• maxY: 一个数字，限制 Y 轴上的最大运动范围。默认值为：null。
• minX: 一个数字，限制 X 轴上的最小运动范围。默认值为：null。
• minY: 一个数字，限制 Y 轴上的最小运动范围。默认值为：null。
• cycle: 一个数字，表示运动将重复多少次。默认值为：0。

kinesis audio的Props

• audioIndex: 一个数字，表示响应的频率范围，取值范围为 0 到 127 的整数值。默认值为：50。
• strength: 一个数字，表示运动效果的强度。默认值为：10。
• type: 一个字符串，表示运动效果的类型。可能的值包括“translate”、“rotate”、“scale”、“scaleX”、“scaleY”、“depth”和“depth_inv”。默认值为："translate"
• tag: 一个字符串，指定组件使用的 HTML 标签。默认值为："div"
• transformOrigin: 一个字符串，类似于 CSS 的 transform-origin 属性。默认值为："center"
• originX: 一个数字，表示运动的原点在 X 轴上相对于容器的位置。50 表示容器的中心，0 表示左侧，100 表示右侧。默认值为：50。
• originY: 一个数字，表示运动的原点在 Y 轴上相对于容器的位置。50 表示容器的中心，0 表示顶部，100 表示底部。默认值为：50。
• axis: 一个字符串，指定运动的约束轴。可能的值包括“x”和“y”。默认值为：null
• maxX: 一个数字，表示在 X 轴上运动的最大范围。默认值为：null
• maxY: 一个数字，表示在 Y 轴上运动的最大范围。默认值为：null
• minX: 一个数字，表示在 X 轴上运动的最小范围。默认值为：null
• minY: 一个数字，表示在 Y 轴上运动的最小范围。默认值为：null
• cycle: 一个数字，表示运动将重复多少次。默认值为 0，表示不重复。

github网址：https://github.com/Aminerman/vue-kinesis