移动端特效播放方案:bodymovin&lottie.js
in 前端 with 0 comment

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

in 前端 with 0 comment

0x01 需求

在移动端H5页面中,当用户点击某个按钮后播放一个动画特效。

0x02 方案选择

1.尝试使用js+css控制播放GIF图

效果图

gif虽然展示效果很好,且图片大小也在可以接受的范围内。但是GIF边缘的半透明阴影在非白色背景下有非常明显的锯齿。

2.把gif图转换成mp4,调用全屏video播放

1.png

当我看到渲染后的视频白色底。。。。emmm,打消了这个想法。

3.bodymovin&lottie.js

关于lottie.js,这是airbnb提供的一个web平台特效播放插件。

使用者可以通过在AE中安装bodymovin插件导出制作的特效,之后在网页中通过lottie.js播放特效。

具体文档可以前往:github 官方文档

下面是一个简单的lottie.js Demo:

<!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的点击做监听,如下:
    gif.addEventListener('complete', () => {
        document.getElementById('btn').addEventListener('click', function () {
            console.log('关闭')
        })
    });
Comments are closed.