共计 1360 个字符，预计需要花费 4 分钟才能阅读完成。
背景
weex 官方提供了 animation 模块可以用来在组件上执行动画，但是它的功能有限还容易造成卡顿。所以 WeexBox 从一开始就支持了 BindingX，丰富的 API 和流畅的性能可以支撑复杂的动画。可是这样就满足了吗？致力于解放开发的 WeexBox，怎么忍心看着你们写大坨大坨的动画代码呢，如果可以不写代码，那就太好了~
Lottie
Lottie 是 Airbnb 开源的动画库。它通过 AE 做成动画导出 JSON 文件，然后前端使用 Lottie 直接加载 JSON 文件生成动画，不需要前端进行复杂的绘制等操作。而且它还具有占用内存少，加载流畅等特点。N 多现成可用的优秀动画在这里
WeexBox 中使用 Lottie
因为太简单，我就直接贴代码了。
<template>
<div class=”wrap”>
<wb-lottie class=”happyBirthday” :sourceJson=sourceJson :loop=loop ref=”lottie”></wb-lottie>
<text class=”title”> 播放动画 </text>
<div class=”button” @click=”play”>
<text class=”button-text”> 播放 </text>
</div>
<div class=”empty”></div>
<text class=”title”> 暂停动画 </text>
<div class=”button” @click=”pause”>
<text class=”button-text”> 暂停 </text>
</div>
<div class=”empty”></div>
<text class=”title”> 停止动画 </text>
<div class=”button” @click=”stop”>
<text class=”button-text”> 停止 </text>
</div>
<div class=”empty”></div>
</div>
</template>
<script>
// 这个就是设计师给你的 json 文件
const happyBirthday = require(‘./happyBirthday.json’)
export default {
components: {
},
data() {
return {
sourceJson: happyBirthday,
loop: false,
}
},
created() {
},
methods: {
// 播放动画
play() {
this.$refs.lottie.play((result) => {
console.log(JSON.stringify(result))
})
},
// 暂停动画
pause() {
this.$refs.lottie.pause()
},
// 停止动画
stop() {
this.$refs.lottie.stop()
},
},
}
</script>
<style lang=”scss” scoped>
@import ‘../../style/global’;
.happyBirthday {
width: 750px;
height: 750px;
}
</style>
以上只演示了部分功能，详细文档在此
总结
我们终于找到了能让设计师、产品都对动画满意的方法，那就是设计师设计好了直接导出动画啊哈哈，妈妈再也不用担心我加班写动画了！
