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>

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

总结

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