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>

以上只演示了部份功用，细致文档在此

总结

我们终究找到了能让设想师、产物都对动画惬意的要领，那就是设想师设想好了直接导出动画啊哈哈，妈妈再也不必忧郁我加班写动画了！