WeexBox 1.2.0 added Lottie animation. Mom doesn't have to worry about me working overtime anymore!


weex officially provides animation The module can be used to perform animation on components, but its limited function is also easy to cause stuck. So wexbox has supported it from the beginning BindingX , rich API and smooth performance can support complex animation. But is that enough?
WeexBox, dedicated to liberation and development, how can you bear to watch you write big big big big animation code? If you can not write code, that would be great~


Lottie Is the Airbnb open source animation library. It uses AE to make animation and export JSON file, and then the front-end uses Lottie to directly load JSON file to generate animation, without complex drawing operations on the front-end. It also has the characteristics of less memory and smooth loading. Many excellent animations available out of the box Here

Using Lottie in WeexBox

Because it's so simple, I just post the code.

  <div class="wrap">
    <wb-lottie class="happyBirthday" :sourceJson=sourceJson :loop=loop ref="lottie"></wb-lottie>
    <text class="title">Play animation</text>
    <div class="button" @click="play">
      <text class="button-text">play</text>
    <div class="empty"></div>

    <text class="title">Pause animation</text>
    <div class="button" @click="pause">
      <text class="button-text">suspend</text>
    <div class="empty"></div>

    <text class="title">Stop Animation</text>
    <div class="button" @click="stop">
      <text class="button-text">Stop it</text>
    <div class="empty"></div>

// This is the json file that the designer gave you
const happyBirthday = require('./happyBirthday.json')

export default {
  components: {
  data() {
    return {
      sourceJson: happyBirthday,
      loop: false,
  created() {

  methods: {
    // Play animation
    play() {
      this.$refs.lottie.play((result) => {
    // Pause animation
    pause() {
    // Stop Animation
    stop() {

<style lang="scss" scoped>
@import '../../style/global';
.happyBirthday {
  width: 750px;
  height: 750px;

The above only demonstrates some functions and detailed documents Here


We have finally found a way to make designers and products satisfied with animation. That is to say, when the designers have designed the animation, they can export it directly. Haha, mom doesn't have to worry about me working overtime to write the animation anymore!

Tags: Javascript JSON less

Posted on Mon, 02 Dec 2019 20:00:33 -0500 by walshd