logo 有点东西

移动端特效播放方案：bodymovin&lottie.js

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, // the dom element that will contain the animation
        renderer: 'svg',
        loop: false,
        autoplay: true,
        path: 'data.json' // the path to the animation json
    });
    gif.addEventListener('finish', function () {
        console.log('finish')
    })
</script>
</body>
</html>

有些时候我们播放完的特效需要用户手动关闭，lottie.js也支持绑定事件到对应特效图片的dom。

操作方法为：

  1. 在AE中修改对应交互按钮的图层名称，如：#btn
  2. 在lottie的complete（播放完成）事件里对#btn的点击做监听,如下：
1
2
3
4
5
gif.addEventListener('complete', () => {
    document.getElementById('btn').addEventListener('click', function () {
        console.log('关闭')
    })
});

移动端特效播放方案：bodymovin&lottie.js

作者：有点东西

链接： https://www.youdiandongxi.com/article/bodymovin.html

协议：本文采用 CC BY-NC-SA 4.0 隐私协议，转载请注明出处！

上一篇：《chrome保存网页为PDF》 下一篇：《hyperf踩坑笔记》

其他推荐内容

通过JS包获取APP版本信息
  • 2024/01/21
    • 编程

通过JS包获取APP版本信息

innerHtml无法运行js的解决方案
  • 2016/09/28
    • 编程

innerHtml无法运行js的解决方案

php strpos遇到的问题
  • 2018/01/02
    • 编程

php strpos遇到的问题

评论区