Vue - 关于vue-kinesis 移动动画组件

vue-kinesis可以根据鼠标移动或滚动条来控制元素动画的动画效果；除此之外，vue-kinesis 还可以设置音频文件，根据音频频率来控制动画的跳动效果。

一、安装vue-kinesis

Vue2版本：

1.安装
npm install --save vue-kinesis

2.默认导入
import Vue from 'vue'
import VueKinesis from 'vue-kinesis'

Vue.use(VueKinesis)

Vue3版本：

1.安装
npm install --save vue-kinesis@next

2.默认导入
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-element
        class="img_2"
      tag="img"
      :src="a3"
      :strength="-12"
      type="rotate"
      transformOrigin="50% 300%"
      axis="x"
    />
    <kinesis-element
        class="img_2"
      tag="img"
      :src="a2"
      :strength="12"
      type="rotate"
      transformOrigin="50% 300%"
      axis="x"
    />
    <kinesis-element

      tag="img"
      :src="a4"
      :strength="25"
      type="rotate"
      transformOrigin="50% 300%"
      axis="x"
    />
    <kinesis-element
   
      tag="img"
      :src="a5"
      :strength="-25"
      type="rotate"
      transformOrigin="50% 300%"
      axis="x"
    />
    <kinesis-element
      class="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