Animations

At present, there are many similar applications available on the market. Usually there is only a small difference between them that makes the application more user friendly and more attractive. The difference between ordinary and professional applications could be animations. Animation gives application more professional look and user enjoys every click, which gives him new better experience.

Show screenshots (1)

Moscrif animations are managed by Animator class. Animator class is a framework class, written in our script language. Except the Animator class this sample uses only native classes to demonstrate how can be native classes combined with framework.

Animator class constructor has one parameter - Json object used to set animator’s properties.

var animator = new Animator({
        transition : Animator.Transition.easeVeryBunce, // type of transition
        duration : duration,                            // length of animation in miliseconds
    });

Animator object calls callback function in regular intervals, we can call it animation step. Callback function has only one parameter, animation state. Animation state determines what phase is the animation in. Depending on transition type, animation state can increase faster at the start and at the end or it can increase at the start and then decrease at the end. Animation state value starts at 0 and ends at 1. Using certain types of transition can cause that animation state value is more than 1 during the animation. In callback function, programmer should change properties of animated object according to required animation effect e.g.: change alpha channel, top or left coordinate etc.

Try to set transition property to:

Animator.Transition.easeVeryBunce

And callback function to:

animator.addSubject(function(state) { // state starts from 1.0 to 0.0 image.top = dst.top + Math.floor(state * delta);
win.invalidate(); // force repaint })

Where _objectTop is top coordinate of animated object, and _objectHeight is its height. This commands creates nice animation, where animated object falls down from the top of the screen and bounces twice at the bottom. This effect is achieved because throw duration of animation state variable reaches value 1 three times. Value of the animation state is calculated with complicated algorithms, what causes realistic appearance of animation.

Animation starts by calling play() function. Animation can be also played from the end by reverse() function.

Behaviour of the animator object can be adjusted with properties. Properties are set as JSON object in the constructor of Animator class.

var animator = new Animator({
transition : Animator.Transition.easeVeryBunce, // type of transition
duration : duration, // length of animation in milliseconds
});

Or later by:

animator.duration = duration;

As the name suggests, durations property is used to change the duration of animation. Value is in milliseconds.

More interesting property is transition. This property affects the speed of animation during its play. Graphs below show dependencies on animation state, transition type and animation time.

Interval property is used to set interval between two calls of call-back function. By default, it is one millisecond. This interval is short enough to achieve smooth animation. Setting longer interval can create some unusual animations.

Animator object has other two call-back functions as well.

onComplete - is called, when animation ends
onStep - is called within animation interval

OnComplete is a place to release all the resources allocated for animation and onStep is good for calling Invalidate function, if you use more than one call-back added with addSubject function.

To demostrate how animator class works in practise, we will show you how to create nice animated menu.

Animator class is defined in lib://core/animation/animator.ms file.

We have to include it.
include "lib://core/animation/animator.ms" // animator class

Next function animates menu items from the bottom to the desired place. Before the start of the animation, the object (menu items) is moved to its initial (hidden) state. During the animation, the position of the object is updated. Note that the distance between the object's initial state and the desired place should be reduced, so reverse() method is used instead of play() method. Play() changes from 0.0 to 1.0 but reverese() method uses range from 1.0 to 0.0.

Drawing function draws all bitmaps:

win.onDraw = function(sender, canvas)          // draw backround and menu's images
{
    canvas.drawBitmap(background, 0, 0);
    for (var m in menu)
        if (m.visible)
            canvas.drawBitmap(m, m.left, m.top);
}

Conclusion

This is very brief sample that demonstrates how to customise animation in Moscrif. Around 60 lines of javascript code should be enough to do so. This sample is designed for iPhone's Retina displays only. But hopefully, you can use it for any other device's resolution.

include "lib://core/log.ms"                     // log stuff
include "lib://core/animation/animator.ms"                // animator class var win = new Moscrif.Window();                 // main window object
var quit = false;                               // set quit to true for application exit
var background = null;                          // background image
var menu = [];                                  // array of menu (images) function moveVertTo(image, dst, duration)
{
    const delta = 500;                          // offset
    image.left = dst.left;                      // left side has fixed position
    image.top = dst.top + delta;                // move by offest by default
    image.visible = true;                       // for drawing method only
    var animator = new Animator({
        transition: Animator.Transition.easeIn, // start up slowly and then quickly speed up at the end of the animation
        duration: duration,                     // length of animation in miliseconds
    });
    animator.addSubject(function(state) {       // state starts from 1.0 to 0.0
        image.top = dst.top + Math.floor(state * delta);
        win.invalidate();                       // force repaint
    })
    animator.reverse();                         // animator.play() goes from 0..1, but we want 1..0
} win.onStart = function(sender)                  // called when app starts
{
    // loading backgound image & 4 images for menu
    background = Bitmap.fromFile("app://menu_back.png");     var img1 = Bitmap.fromFile("app://text_continue.png");
    menu.push(img1);     var img2 = Bitmap.fromFile("app://text_gyro.png");
    menu.push(img2);     var img3 = Bitmap.fromFile("app://text_touch.png");
    menu.push(img3);     var img4 = Bitmap.fromFile("app://text_quit.png");
    menu.push(img4);     // Timer object that schedules one tick only
    var delayAndTickOnce = new Timer(1, 1);     // the first parameter is ignored when second one is number of the tick
    delayAndTickOnce.onTick = function(sender) {
        moveVertTo(img1, {left:170, top:510}, 100);
        moveVertTo(img2, {left:35, top:610}, 125);
        moveVertTo(img3, {left:30, top:710}, 150);
        moveVertTo(img4, {left:240, top:810}, 175);
    }
    delayAndTickOnce.start(1000);               // start after 1000ms
} win.onProcess = function(sender)
{
    return quit ? 0 : 1;
} win.onPointerReleased = function(sender, x, y) // quit on touch
{
    quit = true;
} win.onDraw = function(sender, canvas)          // draw backround and menu's images
{
    canvas.drawBitmap(background, 0, 0);
    for (var m in menu)
        if (m.visible)
            canvas.drawBitmap(m, m.left, m.top);
} win.init().run();                              // initialize & run app