0x01 需求
在移动端H5页面中，当用户点击某个按钮后播放一个动画特效。
0x02 方案选择
1.尝试使用js+css控制播放GIF图
![效果图]()
效果图
gif虽然展示效果很好，且图片大小也在可以接受的范围内。但是GIF边缘的半透明阴影在非白色背景下有非常明显的锯齿。
2.把gif图转换成mp4，调用全屏video播放
![]()
当我看到渲染后的视频白色底。。。。emmm，打消了这个想法。
3.bodymovin&lottie.js
关于lottie.js，这是airbnb提供的一个web平台特效播放插件。
使用者可以通过在AE中安装bodymovin插件导出制作的特效，之后在网页中通过lottie.js播放特效。
具体文档可以前往：github 官方文档
下面是一个简单的lottie.js Demo：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
html, body {
background-color: #000;
width: 100%;
height:100%;
margin: 0;
overflow: hidden;
}
#bm {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="bm"></div>
<script src="lottie.min.js" type="text/javascript"></script>
<script>
var elem = document.getElementById('bm')
var gif = lottie.loadAnimation({
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
path: 'data.json'
});
gif.addEventListener('finish', function () {
console.log('finish')
})
</script>
</body>
</html>
|
有些时候我们播放完的特效需要用户手动关闭，lottie.js也支持绑定事件到对应特效图片的dom。
操作方法为：
- 在AE中修改对应交互按钮的图层名称，如：#btn
- 在lottie的complete（播放完成）事件里对#btn的点击做监听,如下：
1
2
3
4
5
| gif.addEventListener('complete', () => {
document.getElementById('btn').addEventListener('click', function () {
console.log('关闭')
})
});
|
效果图
