土特产直营网站建设代码,学做缝纫的网站,合肥婚恋网站建设,定制网站建设公司电话Vue - 关于vue-kinesis 移动动画组件
vue-kinesis可以根据鼠标移动或滚动条来控制元素动画的动画效果#xff1b;除此之外#xff0c;vue-kinesis 还可以设置音频文件#xff0c;根据音频频率来控制动画的跳动效果。
一、安装vue-kinesis
Vue2版本#xff1a;
1.安装
…Vue - 关于vue-kinesis 移动动画组件
vue-kinesis可以根据鼠标移动或滚动条来控制元素动画的动画效果除此之外vue-kinesis 还可以设置音频文件根据音频频率来控制动画的跳动效果。
一、安装vue-kinesis
Vue2版本
1.安装
npm install --save vue-kinesis2.默认导入
import Vue from vue
import VueKinesis from vue-kinesisVue.use(VueKinesis)Vue3版本
1.安装
npm install --save vue-kinesisnext2.默认导入
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
templatekinesis-containerkinesis-element :strength10 我会偏移 /kinesis-elementkinesis-element :strength20 我比它更偏移 /kinesis-element/kinesis-container
/templatescript setup
import { KinesisContainer, KinesisElement } from vue-kinesis;
/script关于图片简单演示Vue3
templatekinesis-container classimage-containerkinesis-elementclassimg_2tagimg:srca3:strength-12typerotatetransformOrigin50% 300%axisx/kinesis-elementclassimg_2tagimg:srca2:strength12typerotatetransformOrigin50% 300%axisx/kinesis-elementtagimg:srca4:strength25typerotatetransformOrigin50% 300%axisx/kinesis-elementtagimg:srca5:strength-25typerotatetransformOrigin50% 300%axisx/kinesis-elementclassimg_depthtagimg:srca1:strength10typedepthtransformOrigin50% 300%//kinesis-container
/templatescript 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;/scriptstyle 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
templatekinesis-container :audioaudioFile :playAudioisPlayingkinesis-audio :audioIndex50 :strength50 typescalekinesis-element :strength10 typedepthdiv classcircle clicktogglePlaying{{ isPlaying ? Stop : Play }}/div/kinesis-element/kinesis-audio/kinesis-container
/templatescript 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;
}
/scriptstyle 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
PropTypeDefault ValueDescriptionactiveBooleantrue启用或禁用交互durationNumber1000视差动画的速度毫秒easingString“cubic-bezier(0.23, 1, 0.32, 1)”简化视差动画tagtagdiv接受任何有效的html标签eventString“move”容器将作出反应的事件。可能的值是 “move” 和 “scroll”perspectiveNumber1000适用于“depth”视差类型audioString指向音频文件的路径playAudioBoolean启动/停止附加的音频文件
kinesis-element
PropTypeDefault ValueDescriptionstrengthNumber10运动效果的强度typeString“translate”动画类型translate - rotate - scale - scaleX - scaleY - depth - depth_invtagString“div”接受任何有效的html标签transformOriginString“center”类似于CSS的transform-origin属性具体查看originXNumber50运动相对于容器的原点位于X轴上。50是容器的中心0是左侧100是右侧。originYNumber50运动相对于容器的原点位于Y轴上。50是容器的中心0是顶侧100是底侧。axisStringnull将移动限制在一个轴上。可能的值“x”-“y”maxXNumbernull限制X轴上的最大移动范围maxYNumbernull限制Y轴上的最大移动范围minXNumbernull限制X轴上的最小移动范围minYNumbernull限制Y轴上的最小移动范围cycleNumber0动作重复次数
kinesis-audio
PropTypeDefault ValueDescriptionaudioIndexNumber50在0到127的整数值范围内对哪个频率做出反应。strengthNumber10运动效果的强度typeString“translate”动画类型translate - rotate - scale - scaleX - scaleY - depth - depth_invtagString“div”接受任何有效的html标签transformOriginNumber“center”类似于CSS的transform-origin属性具体查看originXNumber50运动相对于容器的原点位于X轴上。50是容器的中心0是左侧100是右侧。originYNumber50运动相对于容器的原点位于Y轴上。50是容器的中心0是顶侧100是底侧。axisStringnull将移动限制在一个轴上。可能的值“x”-“y”maxXNumbernull限制X轴上的最大移动范围maxYNumbernull限制Y轴上的最大移动范围minXNumbernull限制X轴上的最小移动范围minYNumbernull限制Y轴上的最小移动范围cycleNumber0动作重复次数
如前所述除了鼠标移动move触发事件对于滚动条scroll触发事件也是可以的使用typetransformOrigin参数能搭配出各种动画效果。
官网链接: vue-kinesis官网 github地址: vue-kinesis - github
