WeexBox 1.2.0 新增 Lottie 动画，妈妈再也不用担心我加班写动画了！

背景weex官方提供了animation模块可以用来在组件上执行动画，但是它的功能有限还容易造成卡顿。所以WeexBox从一开始就支持了BindingX，丰富的API和流畅的性能可以支撑复杂的动画。可是这样就满足了吗？致力于解放开发的WeexBox，怎么忍心看着你们写大坨大坨的动画代码呢，如果可以不写代码，那就太好了~LottieLottie是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>以上只演示了部分功能，详细文档在此总结我们终于找到了能让设计师、产品都对动画满意的方法，那就是设计师设计好了直接导出动画啊哈哈，妈妈再也不用担心我加班写动画了！