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