Vue - 关于vue-kinesis 移动动画组件
Vue - 关于vue-kinesis 移动动画组件
vue-kinesis可以根据鼠标移动或滚动条来控制元素动画的动画效果；除此之外，vue-kinesis 还可以设置音频文件，根据音频频率来控制动画的跳动效果。
一、安装vue-kinesis
Vue2版本：
1.安装
npm install --save vue-kinesis2.默认导入
import Vue from 'vue'
import VueKinesis from 'vue-kinesis'Vue.use(VueKinesis)
Vue3版本：
1.安装
npm install --save vue-kinesis@next2.默认导入
import { createApp } from "vue";
import App from "./App.vue";
import VueKinesis from "vue-kinesis";const app = createApp(App);
app.use(VueKinesis);app.mount("#app");
二、如何使用
vue-kinesis包括三个组件，每个组件都有自己的属性来控制交互流程：
Kinesis-container — 用于禁用或启用交互的包装器组件。 此外，为了附加触发动画的事件，支持移动（鼠标交互）和滚动。 但是，移动设备不支持 move 事件
Kinesis-element — 要应用动画的元素的包装组件，以及指定动画类型或来源
Kinesis-audio — 此组件用于指定在将音频源添加到 kinesis 容器时要响应的音频频率
关于文字简单演示（Vue3）：
<template><kinesis-container><kinesis-element :strength="10"> 我会偏移！ </kinesis-element><kinesis-element :strength="20"> 我比它更偏移！ </kinesis-element></kinesis-container>
</template><script setup>
import { KinesisContainer, KinesisElement } from "vue-kinesis";
</script>
关于图片简单演示（Vue3）：
<template><kinesis-container class="image-container"><kinesis-elementclass="img_2"tag="img":src="a3":strength="-12"type="rotate"transformOrigin="50% 300%"axis="x"/><kinesis-elementclass="img_2"tag="img":src="a2":strength="12"type="rotate"transformOrigin="50% 300%"axis="x"/><kinesis-elementtag="img":src="a4":strength="25"type="rotate"transformOrigin="50% 300%"axis="x"/><kinesis-elementtag="img":src="a5":strength="-25"type="rotate"transformOrigin="50% 300%"axis="x"/><kinesis-elementclass="img_depth"tag="img":src="a1":strength="10"type="depth"transformOrigin="50% 300%"/></kinesis-container>
</template><script setup>
import { KinesisContainer, KinesisElement } from "vue-kinesis";var a1 = new URL("./assets/1.jpg", import.meta.url).href;
var a2 = new URL("./assets/2.jpg", import.meta.url).href;
var a3 = new URL("./assets/3.jpg", import.meta.url).href;
var a4 = new URL("./assets/4.jpg", import.meta.url).href;
var a5 = new URL("./assets/5.jpg", import.meta.url).href;</script><style scoped>
.image-container {position: relative;width: 100px;margin: auto;text-align: center;
}
img {position: absolute;left: 0;top: 0;height: 100px;border-radius: 10px;
}
.img_depth{position: relative;z-index: 3;
}
.img_1{z-index: 1;
}
.img_2{z-index: 2;
}
</style>
关于音频简单演示（Vue3）：
<template><kinesis-container :audio="audioFile" :playAudio="isPlaying"><kinesis-audio :audioIndex="50" :strength="50" type="scale"><kinesis-element :strength="10" type="depth"><div class="circle" @click="togglePlaying">{{ isPlaying ? "Stop" : "Play" }}</div></kinesis-element></kinesis-audio></kinesis-container>
</template><script setup>
import { KinesisContainer, KinesisElement, KinesisAudio } from "vue-kinesis";
import { ref } from "vue";var audioFile = new URL("./assets/audo.mp3", import.meta.url).href;
const isPlaying = ref(false);function togglePlaying() {isPlaying.value = !isPlaying.value;
}
</script><style scoped>
.circle {width: 100px;height: 100px;border-radius: 10px;background: red;display: flex;justify-content: center;align-items: center;color: white;box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
}
</style>
三、组件参数Props
kinesis-container
| Prop | Type | Default Value | Description |
|---|---|---|---|
| active | Boolean | true | 启用或禁用交互 |
| duration | Number | 1000 | 视差动画的速度（毫秒） |
| easing | String | “cubic-bezier(0.23, 1, 0.32, 1)” | 简化视差动画 |
| tag | tag | div | 接受任何有效的html标签 |
| event | String | “move” | 容器将作出反应的事件。可能的值是 “move” 和 “scroll” |
| perspective | Number | 1000 | 适用于“depth”视差类型 |
| audio | String | 指向音频文件的路径 | |
| playAudio | Boolean | 启动/停止附加的音频文件 |
kinesis-element
| Prop | Type | Default Value | Description |
|---|---|---|---|
| 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
| Prop | Type | Default Value | Description |
|---|---|---|---|
| audioIndex | Number | 50 | 在0到127的整数值范围内，对哪个频率做出反应。 |
| strength | Number | 10 | 运动效果的强度 |
| type | String | “translate” | 动画类型：translate - rotate - scale - scaleX - scaleY - depth - depth_inv |
| tag | String | “div” | 接受任何有效的html标签 |
| transformOrigin | Number | “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 | 动作重复次数 |
如前所述，除了鼠标移动"move"触发事件，对于滚动条"scroll"触发事件也是可以的，使用type+transformOrigin参数，能搭配出各种动画效果。
官网链接: vue-kinesis官网
github地址: vue-kinesis - github