更新:2021-12-11
本文简单介绍了一下动画的引入,有关动画的深入交互近期会更新(^U^)ノ~YO
CSS3 帧动画
CSS 发展到了今天,它的强大几乎不是我们可以想像到的。合理的使用Animation
可以实现很多神奇效果。配合设计师的导出图,前端使用序列帧即可实现动画效果。
帧动画的缺点和局限性比较明显,导出图文件大,且在不同屏幕分辨率下可能会失真。
JS
通过JS方法控制DOM
,从而实现动画效果
GIF
关于这个不想多废话了!!!
canvas/svg
首先说明这篇文章不是在叙述
canvas/svg
的用法,所以并不过多赘述。
js + canvas/svg
应该是目前前端实现复杂动效的最优方案了,但要注意canvas
和svg
二者之间区别,根据不同使用场景选取最优的实现方案。
Lottie 重点来了o( ̄▽ ̄)ブ
Lottie一个适用于Web,Android,iOS,React Native和Windows 的移动库,它可以使用
Bodymovin
解析以json
格式导出的Adobe After Effects动画,并在移动设备上进行本地渲染!
安装
关于lottie的用法,在网上可以查到很多,今天我们要说的是vue + lottie-web
npm install lottie-web
ps:如果是vue-cli3.x 或 4.x 可以直接通过 vue ui 通过搜索安装
(以下是个人认为比较优雅的使用方案)
<template>
<div class="box">
<div id="lottie_box"></div>
<button @click="startFun">播放</button>
<button @click="suspendFun">暂停</button>
</div>
</template>
<script>
import lottie from 'lottie-web';
export default {
name:'Lottie',
data(){
return{
lottie:{},
}
},
methods:{
suspendFun:function(){
this.lottie.pause();
},
startFun:function(){
this.lottie.play()
}
},
mounted(){
this.lottie = lottie.loadAnimation({
container: document.getElementById('lottie_box'),
renderer: 'svg',
loop: true,
path: 'https://labs.nearpod.com/bodymovin/demo/markus/halloween/markus.json'
})
}
}
</script>
<style>
.box{
width: 100%;
height: 100%;
}
#bm{
width: 100%;
height:100%;
margin: 0px auto;
}
</style>
基本用法
const animation = lottie.loadAnimation({
container: document.getElementById('box'),
renderer: 'svg', // 渲染方式:svg:支持交互、不会失帧、canvas、html:支持3D,支持交互
loop: true, // 循环播放,默认:true
autoplay: true, // 自动播放 ,默认true
path: '' // json 路径
})
常用方法
animation.play()
:播放,从当前帧开始播放animation.stop()
:停止,并回到第0帧animation.pause()
:暂停,并保持当前帧-
animation.goToAndStop(value, isFrame)
:跳到某个时刻/帧并停止isFrame
(可省略,默认false
:毫秒;true
:帧
)指明value
的单位是毫秒还是帧 -
animation.goToAndPlay(value, isFrame)
:跳到某个时刻/帧并播放animation.goToAndStop(30, true) // 跳转到第30帧并停止 animation.goToAndPlay(300) // 跳转到第300毫秒并播放
-
animation.playSegments(arr, forceFlag)
:以帧为单位,播放指定片段arr
可以包含两个数字或者两个数字组成的数组,forceFlag
表示是否立即强制播放该片段animation.playSegments([10,20], false) // 播放完之前的片段,播放10-20帧 animation.playSegments([[0,5],[10,18]], true) // 直接播放0-5帧和10-18帧
animation.setSpeed(speed)
:设置播放速度,speed
为1表示正常速度animation.setDirection(direction)
: 设置播放方向,1表示正向播放,-1表示反向播放-
animation.destroy()
: 删除该动画,移除相应的元素标签等。在
unmount
的时候,需要调用该方法
常用钩子
-
data_ready
:动画数据加载完毕animation.addEventListener('data_ready', () => { console.log('(*^_^*)'); });
config_ready
:完成初始配置后data_failed
:当无法加载动画的一部分时loaded_images
:当所有图像加载成功或错误时DOMLoaded
:将元素添加到DOM
时