包工头：小张啊，我们页面里那几个gif也太low了，你能不能追求远大点。
ui妹子：软件推荐可以用lottie实现。
我：这玩意我耍过，交给我了。
牛逼已经吹出去了，开干，
遇到问题有，
- github相关文档demo不足
- 只找到了微信原生开发相关的技术文档
- uniapp插件市场的lottie文章也水得很，无法解决我手头的问题
东拼拼西凑凑，灵活使用搜索大法，耗时约4小时终于完成
先放demo方便大家学习(copy)
<view class="container">
<view style="text-align: center;">
<canvas id="lottie_demo" type="2d" style="display: inline-block; width: 300px; height: 300px;" />
<button @tap="init" style="width: 300px;">初始化</button>
<button @tap="play" style="width: 300px;">播放</button>
<button @tap="pause" style="width: 300px;">暂停</button>
</view>
</view><script>
import lottie from 'lottie-miniprogram';
let ani = null; // 必须放在外面，uni里不要挂在this上,否则会触发循环引用的报错
export default {
data() {
return {
inited: false
};
},
methods: {
init() {
if (this.inited) {
return;
}
this.createSelectorQuery()
.select('#lottie_demo')
.node(res => {
console.log(res); // 节点对应的 Canvas 实例。
const canvas = res.node;
const context = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 300;
lottie.setup(canvas);
ani = lottie.loadAnimation({
loop: true,
autoplay: true,
animationData: require('../../static/animation/data.js'),
rendererSettings: {
context
}
});
this.inited = true;
})
.exec();
},
play() {
ani.play();
},
pause() {
ani.pause();
}
}
};
</script>坑点总结
- uniapp里无法通过引入script标签加载cdn资源的形式使用lottie，那是lottie-web里用的
- createSelectorQuery的页面用uni/wx，组件用this，用错会导致明明节点挂了id，但是node函数里res为null
- loadAnimation里animationData无法加载json，只能用js，如果ui给你的是json，你需要在文件代码的头处加入“module.exports=”，如果json文件里有奇怪的js代码不妨删了试试看如果不报错就没关系。
- ui妹子给我json和images文件夹这咋整？
- json按第三点替换成js
- 把json文件中这种有u，有p，有e的对象做调整
{"id":"image_0","w":1113,"h":1162,"u":"images/","p":"img_0.png","e":0}把u加到p前面并用require函数包裹，把u改成空，把e改为1
{"id":"image_0","w":1113,"h":1162,"u":"","p":require("./images/img_0.png"),"e":1}
启动，运行到微信小程序，这不就跑起来了么。
启动，运行到字节跳动小程序，这不也跑起来了么，虽然报了点小错，但是又不是不能用不是（掏出菜刀放到产品面前）
