把AE动画转换成HTML5/Android/iOS原生动画

地址:https://www.jianshu.com/p/0ed53cf891ad

github访问:https://github.com/airbnb/lottie-web

设计师在AE中做好动画,导出image,json;

接下来我们新建一个网页来播放这段动画。把Bodymovin的GitHub项目目录下的“\build\player\bodymovin.js”和刚刚生成的json文件复制到网页根目录,新建一个html文件,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bodymovin Demo</title>
    <script src="bodymovin.js"></script>
</head>
<body>
    <div id="animation"></div>
    <script>
        bodymovin.loadAnimation({
            path:'data.json',   //json文件路径
            loop:true,
            autoplay:true,
            renderer:'canvas',  //渲染方式,有"html"、"canvas"和"svg"三种
            container:document.getElementById('animation')
        });
        //bodymovin.js的完整api文档见GitHub项目首页(https://github.com/bodymovin/bodymovin)
    </script>
</body>
</html>
  1. 打开这个页面,就会发现动画成功跑起来了,是不是很黑科技?

  2. 如果想让json版动画跑在Android/iOS设备上,在GitHub上搜索“lottie”,然后选择自己感兴趣的平台吧。

猜你喜欢

转载自blog.csdn.net/qq_29268061/article/details/85229323