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'
})
