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

WeexBox官方QQ群号:943913583

背景

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>

以上只演示了部分功能，详细文档在此

总结

我们终于找到了能让设计师、产品都对动画满意的方法，那就是设计师设计好了直接导出动画啊哈哈，妈妈再也不用担心我加班写动画了！