Lottie 动画工具使用 教程

lottie 是设计师AE工具导出json 格式   前端直接可用。

Lottie 使用教程资料

1. 腾讯前端教程

http://test.imweb.io/topic/5b23a850d4c96b9b1b4c4efe

this.animation = lottie.loadAnimation({

            //单创 H5商城 php 混合开发 案例

             container: document.getElementById('container'), // the dom element

                renderer: 'svg',

                // loop: true,

                autoplay: true,

                loop(){return false},

                path: _global.url.front+'/assets/img/luckyDraw/clickbox/data.json' // 'http://static.t.idanchuang.com/assets/img/valentine-campaign-lp.json'

              })

渲染过程为 <svg></svg>    在过程中修改元素方案

<foreignObject x="200" y="200" width="600" height="440"></foreignObject>

在标签中添加dom元素  即可

小技巧  ：设计师可以在设计图层时  a.给指定元素添加id表示 方便操作，b.多添加一层 直接找到替换 dom元素。

cdn  如使用 svg模式 最好只加载 对于js   对应cdnjs地址

https://cdnjs.com/libraries/bodymovin

json 转换js  方式

 this.animation = lottie.loadAnimation({

                container: document.getElementById('container'), // the dom element

                // renderer: 'svg',

                // loop: true,

                autoplay: true,

                loop:true,

                animationData:animation,//js 导出的变量名

            //assetsPath:指定图片地址

                assetsPath:_global.url.front+'/assets/img/luckyDraw/images/'

                // data-animation-path="animation/"

                // path: _global.url.front+'/assets/img/luckyDraw/data.json' // 'http://static.t.idanchuang.com/assets/img/valentine-campaign-lp.json'

              })