鲁达 介绍
vue-kinesis 是一组Vue组件，可以为 Vue.js 应用程序创建交互式动画。
Github地址
如何安装使用
使用你习惯使用的包管理工具安装它
- Vue3安装使用
npm install --save vue-kinesis@nextimport { createApp } from "vue"; import App from ".;; import VueKinesis from "vue-kinesis"; const app = createApp(App); a(VueKinesis); a("#app"); - Vue2
npm install --save vue-kinesisimport 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>为了使效果起作用 <kinesis-element> 应该是 <kinesis-container> 的child
当然你还可以在浏览器中使用
<script src="vue.js"></script> <script src="vue-kine;></script>Props
- kinesis-container
active | Boolean | true | 启用或禁用交互 |
duration | Number | 1000 | 以毫秒为单位的动画速度 |
easing | String | "cubic-bezier, 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 | 动作会重复多少次 |
<kinesis-container> <kinesis-element tag="img" :src="spider" :strength="-10" type="rotate" transformOrigin="50% 300%" axis="x" type="depth" /> <kinesis-element tag="img" :src="ladybug" :strength="10" type="rotate" transformOrigin="50% 300%" axis="x" type="depth" /> <kinesis-element tag="img" :src="fennec" :strength="10" type="depth" transformOrigin="50% 300%" type="depth" /> </kinesis-container>备注
动画的效果可以参照官方文档给出的示例