vue-kinesis | 一款基于vuejs的炫酷交互式动画组件


源码介绍

简要教程

vue kinesis是一款基于vuejs的炫酷交互式动画组件。通过该交互式动画组件,你可以制作出非常炫酷的微交互动画、视差效果动画、嵌套动画等效果。

使用方法

安装

使用vue3.x版本:

npm install --save vue-kinesis@next
    

使用vue2.x版本:

npm install --save vue-kinesis
    
使用

使用vue3.x版本:

// main.js      
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.x版本:

// main.js
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)   
    
kinesis container的Props
  • active: 一个布尔值,表示是否启用交互。默认值为:true。
  • duration: 一个数字,表示视差动画的速度(以毫秒为单位)。默认值为:1000。
  • easing: 一个字符串,表示视差动画的缓动效果。默认值为:"cubic-bezier(0.23, 1, 0.32, 1)"
  • tag: 一个字符串,指定组件使用的 HTML 标签。默认值为:div。
  • event: 一个字符串,表示容器将对哪个事件做出反应。可能的值是"move""scroll"。默认值为:"move"
  • perspective: 一个数字,适用于“depth”视差类型。默认值为:1000。
  • audio: 一个字符串,指向一个音频文件的路径。
  • playAudio: 一个布尔值,表示是否启动或停止附加的音频文件。
kinesis element的Props
  • strength: 一个数字,表示运动效果的强度。默认值为:10。
  • type: 一个字符串,表示运动效果的类型。可能的值包括“translate”、“rotate”、“scale”、“scaleX”、“scaleY”、“depth”和“depth_inv”。默认值为:"translate"
  • tag: 一个字符串,指定组件使用的 HTML 标签。默认值为:"div"。
  • transformOrigin: 一个字符串,类似于 CSS 的 transform-origin 属性。默认值为:"center"。
  • originX: 一个数字,表示运动的原点在 X 轴上相对于容器的位置。50 表示容器的中心,0 表示左侧,100 表示右侧。默认值为:50.
  • originY: 一个数字,表示运动的原点在 Y 轴上相对于容器的位置。50 表示容器的中心,0 表示顶部,100 表示底部。默认值为:50.
  • axis: 一个字符串,限制运动只在一个轴上移动。可能的值为“x”和“y”。默认值为:null
  • maxX: 一个数字,限制 X 轴上的最大运动范围。默认值为:null
  • maxY: 一个数字,限制 Y 轴上的最大运动范围。默认值为:null
  • minX: 一个数字,限制 X 轴上的最小运动范围。默认值为:null
  • minY: 一个数字,限制 Y 轴上的最小运动范围。默认值为:null
  • cycle: 一个数字,表示运动将重复多少次。默认值为:0。
kinesis audio的Props
  • audioIndex: 一个数字,表示响应的频率范围,取值范围为 0 到 127 的整数值。默认值为:50。
  • strength: 一个数字,表示运动效果的强度。默认值为:10。
  • type: 一个字符串,表示运动效果的类型。可能的值包括“translate”、“rotate”、“scale”、“scaleX”、“scaleY”、“depth”和“depth_inv”。默认值为:"translate"
  • tag: 一个字符串,指定组件使用的 HTML 标签。默认值为:"div"
  • transformOrigin: 一个字符串,类似于 CSS 的 transform-origin 属性。默认值为:"center"
  • originX: 一个数字,表示运动的原点在 X 轴上相对于容器的位置。50 表示容器的中心,0 表示左侧,100 表示右侧。默认值为:50。
  • originY: 一个数字,表示运动的原点在 Y 轴上相对于容器的位置。50 表示容器的中心,0 表示顶部,100 表示底部。默认值为:50。
  • axis: 一个字符串,指定运动的约束轴。可能的值包括“x”和“y”。默认值为:null
  • maxX: 一个数字,表示在 X 轴上运动的最大范围。默认值为:null
  • maxY: 一个数字,表示在 Y 轴上运动的最大范围。默认值为:null
  • minX: 一个数字,表示在 X 轴上运动的最小范围。默认值为:null
  • minY: 一个数字,表示在 Y 轴上运动的最小范围。默认值为:null
  • cycle: 一个数字,表示运动将重复多少次。默认值为 0,表示不重复。

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



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部