Vue - vue-kinesis 移动动画组件

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=