Tabris.js Methods: animate

animate is a method on the Widget base class. Since all widgets extend this class, all widgets can be animated.

In the snippet https://playground.tabris.com/#animate.js we call the animate method on a TextView inside the playAnimation function:

async function playAnimation() {
 $(Button).only().enabled = false;
 await $(TextView).only().animate({
   opacity: 0.25,
   transform: {
     rotation: 0.75 * Math.PI,
   }
 }, {
   repeat: 1,
   reverse: true,
   easing: 'ease-out'
 });
 $(Button).only().enabled = true;
}

async function playAnimation() {

$(Button).only().enabled = false;

await $(TextView).only().animate({

opacity: 0.25,

transform: {

rotation: 0.75 * Math.PI,

}

}, {

repeat: 1,

reverse: true,

easing: 'ease-out'

});

$(Button).only().enabled = true;

}

animate returns a promise. So we can use the async await syntax to pause execution of the next line of code until the animation is complete and the promise resolves.

animate takes two parameters. The first is an object with two optional properties, opacity and transform. The values of these determine what will be animated.

let properties = {
   opacity: 0.25,
   transform: {
     rotation: 0.75 * Math.PI,
     scaleX: 2.0,
     scaleY: 2.0,
     translationX: 100,
     translationY: 200
   }
 }

let properties = {

opacity: 0.25,

transform: {

rotation: 0.75 * Math.PI,

scaleX: 2.0,

scaleY: 2.0,

translationX: 100,

translationY: 200

}

An opacity value of 0.25 means that the TextView will animate from its initial opacity to opacity 0.25 at the end of the animation.

The transform values set in the transformation object allow us to animate the following widget properties: scaleX, scaleY, translationX, translationY, translationZ, and rotation.

rotation is in radians, so setting rotation to Math.PI will cause the widget to rotate 180degrees clockwise during its animation. scale is a float relative to a default scale of 1, and translation is in dip and defaults to 0.

The second parameter the animate method accepts is an object that specifies the animation options. The values of these determine how the widget will animate to its final property values.

let options = {
   delay: 0,
   duration: 1000,
   repeat: 1,
   reverse: true,
   easing: 'ease-out'
 }

let options = {

delay: 0,

duration: 1000,

repeat: 1,

reverse: true,

easing: 'ease-out'

}

Configurable options are documented here. Notable out of these is reverse. If set to true, if the animation plays more than once it will play backward (from the passed transform and opacity values back to what they originally were). An animation plays more than once if repeat is set to a positive integer, and can be set to ‘infinite’ to keep the animation playing on indefinitely…

Other animation examples can be found in the Tabris playground:

https://playground.tabris.com/#animate-people.js