Vue中使用kinesis轻松创建复杂的交互式动画

介绍

vue-kinesis 是一组Vue组件，可以为 Vue.js 应用程序创建交互式动画。

Github地址

https://github.com/Aminerman/vue-kinesis

如何安装使用

使用你习惯使用的包管理工具安装它

Vue3安装使用

npm install --save vue-kinesis@next

import { createApp } from "vue";
import App from "./App.vue";
import VueKinesis from "vue-kinesis";

const app = createApp(App);
app.use(VueKinesis);

app.mount("#app");

Vue2

npm install --save vue-kinesis

import 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)

这是使用组件的最基本方式

    
              Here, you can put
              
                whatever
              
              
                content!

为了使效果起作用应该是的child

当然你还可以在浏览器中使用

Props

kinesis-container

active	Boolean	true	启用或禁用交互
duration	Number	1000	以毫秒为单位的动画速度
easing	String	"cubic-bezier(0.23, 1, 0.32, 1)"	视差动画的缓和
tag	String	p	接受任何有效的 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	"p"	接受任何有效的 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	"p"	接受任何有效的 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	动作会重复多少次