Animations and Visual Feedback Using the Vapor Framework

A strength of jQuery is its simple support for animations - a great way of interacting with, and reacting to a user.

The Vapor Android framework follows suit with built-in, easy-to-use visual effects.

Types of Animation

  • Fade
    A typical transition across the alpha transparency of your View.
  • Pulse
    Makes use of sequential fades to create a pulsing effect on any View.
  • Slide
    Moves the View in either the x or y plane along a straight trajectory.
  • Flip
    Rotates the View around either the x, y or z axis through the view.
  • Bounce
    Utilises Slides to create the effect of a view bouncing. Each iteration features a full bounce followed by a shallower second bounce.

Animation Options

Setting the parameters for any animation is remarkably easy in your Android app, just pass them inside a VaporBundle.

    $.TimePicker(R.id.timePicker).bounce(
        $.Bundle()
            .put("direction", "up")
            .put("distance", 20F)
            .put("repeat", 4)
            .put("animListener", new $anim(){...});

        // note the conveniently overloaded 'put(...)' method!
    );
You do not actually have to supply any options at all to an animation, and can rely on the framework to fill in any missing parameters with defaults.

Each animation supports different parameters, and you can view the supported options for a particular one either by viewing the class' String constants statically during development, or by consulting the documentation. Alternatively you can input the String value yourself, it's just the animation property name in camel case.

What's really cool is that the animation engine will only examine the VaporBundle for properties that it understands.

App developers can therefore store these settings in a bigger bundle if they wish, and needn't create a fresh bundle just for passing animation options.

Custom Animations

If you would like to use the Vapor Animation Framework to set up your own animations, extend the Anim class to take advantage of the following features:

Custom Options

Use the .prop(String,T) function to retrieve custom properties your animation will support from the VaporBundle of options passed to it.

The first parameter to .prop(String,T) is the String key for a property, such as "duration".

The second argument to .prop(String,T) should be a default value (T) that will be returned if the user fails to supply a value, or supplies a value of the wrong type.

This means you needn't worry about null pointers or bad data being passed to your animation!

The $ facade also provides a $.prop(VaporBundle,String,T) method. It requires the VaporBundle as an additional parameter.

Implementing run()

You need to implement the .run() method in your custom animation.

This method will be called to trigger the animation, and it is highly recommended you supply an Animator object to the super.run(Animator) method.

The benefit being that this will set up the repeater, duration, animation listener, and will start your animation for you.

All you need to do in your .run() implementation is pass your custom Animator - that will contain all the movements that comprise your animation - to super.run().