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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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.
1 2 3 4 5 6 7 8 9 10 |
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.
1 2 3 4 5 6 7 |
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
https://playground.tabris.com/#animate-tray.js
Feedback is welcome!
Want to join the discussion?Feel free to contribute!