Docs

Animations

Role

Animations are available on views. They are defined by using animations keyword and addPropertyAnimation function. Then startAnimation method is used to start them.

With animations, the property won’t be updated. It will keep its original value but will be animate using animation’s values.

Expected Use

Declaration

You can define animation using function:

animations: {
    appear: function() {
        const contentAnim = this.content.addPropertyAnimation("x", {
            delay: 0,
            duration: 250,
            from: 0,
            to: 100,
            easing: $Easing.easeInOutQuad
        });
        contentAnim.start();
        return [contentAnim];
    }
}

Or with declarations :

animations: {
    appear: {
        "content.x": {
            delay: 0,
            duration: 250,
            from: 0,
            to: 100,
            easing: $Easing.easeInOutQuad
        }
    }
}

By using functions, you will have access to this and will be able to mutualize values. Otherwise, you can’t.

Then you can launch your animation when needed :

methods: {
    doSomething: function() {
        this.startAnimation("appear");
    }
}

Properties

Animations have multiple properties you can define :

  • delay : delay before animation starts (in milliseconds)
  • duration : duration of the animation (in milliseconds)
  • easing : easing function, a math function to describe speed of the animation. Use the ones described in statics of Easing.
  • from : starting value
  • to: ending value
  • loopForEver : true if animation should loop forever (at the end, restart from the beginning)
  • property : name of the property to animate
  • destroyOnFinish : animation is destroyed (by the renderer) as soon as it is finished

Advanced use

Screen changing animations

You can define animations in your screen, so they can be run when entering or leaving the screen.

export default $AppScreen.declare("FipContentScreen", {
    children: /** @lends FipContentScreen.prototype */ {
        contentInfo: {
            class: $FipContentInfoView
        }
    },
    animations: {
        exitToLeft: function () {
            const contentAnim = this.contentInfo.addPropertyAnimation("x", {
                delay: 0,
                duration: 250,
                from: 100,
                to: -(this.theme.width + 100)
            });

            contentAnim.start();
            return [
                contentAnim
            ];
        }
    }
});
export default $AppScreen.declare("VodScreen", {
    children: /** @lends VodScreen.prototype */ {
        vodRail: {class: $VodRailListView}
    },

    animations: {
        enterFromRight: function () {
            const railAnim = this.vodRail.addPropertyAnimation("x", {
                delay: 0,
                duration: 250,
                from: this.theme.width,
                to: 50
            });

            return [
                railAnim.start()
            ];
        }
    }
});

When you want to display VodScreen from FipScreen, you can define

  • enterFromRight animation to be applied on show of VodScreen and
  • exitToLeft animation to be applied on hide of FipScreen.
const options = {
  animations: {
    show: "enterFromRight",
    hide: "exitToLeft"
  }
};
return this.route("vod", options);

Animation chaining (start one after another)

Starting an animation execute a promise in the background. An extension point has been added, so you can chain animations like the following example :

animations: {
  appear: function() {
    const leftToRight = this.content.addPropertyAnimation("x", {
      duration: 250,
      from: 0,
      to: 100,
    });
    const rightToLeft = this.content.addPropertyAnimation("x", {
      duration: 250,
      from: 100,
      to: 0,
    });

    const anim = leftToRight.start()
      .then(() => rightToLeft.start());

    return [anim];
  }
}
Edit this page on GitHub
Prev
Variations between renderers
Next
Focus