Tabris.js Examples - Animations

Moritz Post
April 14, 2015 | 3 min Read

Creating an engaging mobile app is a challenging task. There are several best practice approaches to increase user delight and one of them is the use of animations. Animations can guide the user through the app, provide visual clues or simply give reassuring feedback. In this installment of the Tabris.js examples blog post series we will learn how to create widget animations with Tabris.js and how to react to animation events.

See the Animation example in action on your phone. Download the Developer App:

[

Animations in Tabris.js

The starting point for widget animations is a call to the animate(..) function of a widget. The function takes two parameters: an object describing the properties to animate and a second object describing the animation options like duration or start delay. Note that the animate call automatically schedules the animation to be executed. A simple animation is shown in the following snippet:

widget.animate({opacity: 0.5}, {duration: 1000});

In this basic example we change the opacity of the widget to 0.5 over a duration of one second. Please mind that the animated change really alters the widget property and not only its visual appearance. Besides the opacity, Tabris.js is also able to animate the transform property of a widget, thereby allowing to translate, scale or rotate a widget in an animated fashion. In the following Tabris.js code example we see how those properties are modified over time.

widget.animate({
    opacity: 0.25,
    transform: {
      rotation: 0.75 * Math.PI,
      scaleX: 2.0,
      scaleY: 2.0,
      translationX: 100,
      translationY: 200
    }
  }, {
    delay: 0,
    duration: 1000,
    repeat: 1,
    reverse: true,
    easing: "ease-out"
  }
);

The snippet above also shows how additional animation options are applied. The delay allows you to postpone the animation start, repeat makes the animation happen multiple times, reverse makes the animation reverse when repeated and easing defines the interpolator function to give the animation a natural feeling.

Animation Events

Now that we can animate several widget properties, we should also be able to get notified about animation events, most notably animationstart and animationend. It is interesting to note that the call to animate(..) returns the widget itself, so you can easily chain a call to register a listener to animation events. Building upon the simple example above, the following snippet shows how to listen to an animation end event:

widget.animate(
  {opacity: 0.5}, {duration: 1000}
).on("animationend", function() {
    console.log("animated ended");
});

Wrap Up

Animations are a powerful tool. When used responsibly they can elevate a good app to a great app. In this blog post we learned how to animate Tabris.js widget properties via the animate(..) function and how to listen for animation events.

Here’s the list of “Tabris.js Examples” posts we’ve published so far:

  1. Tabris.js Examples – Hello World!
  2. Tabris.js Examples – User Input
  3. Tabris.js Examples – Local Storage
  4. Tabris.js Examples – Images
  5. Tabris.js Examples – Parallax Scrolling
  6. Tabris.js Examples – Animations
  7. Tabris.js Examples – Drawing on the Canvas
  8. Tabris.js Examples – Network Access

Stay in the loop! Follow @tabrisjs on Twitter.

Moritz Post