前端实现炫酷动效_前端动效实现--lottie - web
前端常用动效实现方式
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
// 安装 lottie-web
npm install lottie-web
ps：如果是vue-cli3.x 或 4.x 可以直接通过 vue ui 通过搜索安装
(以下是个人认为比较优雅的使用方案)
播放
暂停
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'
})
}
}
.box{
width: 100%;
height: 100%;
}
#bm{
width: 100%;
height:100%;
margin: 0px auto;
}
Lottie-web 基本用法
const animation = lottie.loadAnimation({
container: document.getElementById('box'),
renderer: 'svg',// 渲染方式:svg、canvas
loop: true, //循环播放，默认：false
autoplay: true, //自动播放 ，默认true
path: ' ' // json 路径
})
Lottie-web 常用方法
animation.play(); // 播放，从当前帧开始播放
animation.stop(); // 停止，并回到第0帧
animation.pause(); // 暂停，并保持当前帧
animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止isFrame(默认false)指示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的时候，需要调用该方法
Lottie-web 常用的事件
data_ready：动画数据加载完毕
animation.addEventListener('data_ready', () => { console.log('animation data has loaded'); });
config_ready：完成初始配置后
data_failed：当无法加载动画的一部分时
loaded_images：当所有图像加载成功或错误时
DOMLoaded：将元素添加到DOM时