Bodymovin自己提供了作为Player的js库——bodymovin.js; Android原生,通过Airbnb的开源项目“lottie-android”实现; iOS原生,通过Airbnb的开源项目...把Bodymovin的GitHub项目目录下的“\build\player\bodymovin.js”和刚刚生成的json文件复制到网页根目录,新建一个html文件,代码如下: Bodymovin Demo <script src="<em>bodymovin.js</em>...html"、"canvas"和"svg"三种 container:document.getElementById('animation') }); //bodymovin.js
" > <!
... }] },{ ... }] } 看到scale\translate\rotate属性,是不是感觉和css的动画就很像了~ bodymovin.js...data[i].it); } else if (items[i].ty == 'tm') { // } } 二次开发 那么,基于上面的分析: bodymovin.js...bodymovin.js的减包实践 基本思路 bodymovin同时支持canvas、h5、svg的方式渲染data.json。
第二步 在需要使用lottie的页面中,在其index.html中引入bodymovin.js。示例如下: {% block preloadScript%} <script src="../.....lottie库使用 lottie-web的npm版本是lottie-web,其对应的cdn外链版则是<em>bodymovin.js</em> 即使是gzip压缩后的lottie-web轻量版的js文件,大小仍然有
path: 'data.json' // the path to the animation json }); 外链js lottie-web的npm版本是lottie-web,其对应的cdn外链版则是bodymovin.js
领取专属 10元无门槛券
手把手带您无忧上云