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>

以上只演示了部分功能，詳細文檔在此

總結

咱們終於找到了能讓設計師、產品都對動畫滿意的方法，那就是設計師設計好了直接導出動畫啊哈哈，媽媽不再用擔憂我加班寫動畫了！