In this blog we are going to show you how to create great animations, using amazing graphics performance of Moscrif SDK for mobiles and smart phones.

If you want to explore graphics possibilities of Moscrif, please take a look at the following video. (video in the right corner)

All functions that manage bitmap drawing, take Paint object as the last optional parameter. If this parameter is used, bitmap is drawn with effect defined in Paint object.

The most important effects are:
• alpha property: helps to change bitmap transparency
• mask filter: creates blur effect
• color filter: creates lightening or greyscale effect

These three features help us to create following interesting animations:

Transition with changing alpha effect is the first good-looking  and simple effect, presented in this sample. It can be a suitable effect for basic form or photos changing.

When application starts, it loads two bitmaps and also creates paint object for both bitmaps. Alpha channel of one of them is set to 0 (transparent).

win.onStart = function()
{
    // paint object used for bitmaps drawing
    this._oldPaint = new Paint();
    this._oldPaint.alpha = 255;
    this._newPaint = new Paint();
    // alpha = 0 - means that bitmap is transparent
    this._newPaint.alpha = 0;     // load bitmaps
    this._oldImage = Bitmap.fromFile("app://old.jpg");
    this._newImage = Bitmap.fromFile("app://new.png");     // start animation after 2 seconds
    var timer = new Timer(100, false); // interval make no sense here
    timer.start(2000);
    timer.onTick = function(sender)
    {
        this super._animate();
    };
}

Drawing function is really fast and easy. It draws two images only.

win.onDraw = function(s, c)
{
    c.drawBitmap(this._oldImage, 0, 0, this._oldPaint);
    c.drawBitmap(this._newImage, 0, 0, this._newPaint);
}

Order of the commands is not important, because one of the images is always transparent.
The most important function is _animate(). This function creates two Animator objects. The first hides old image and the second shows new image by smooth changing its alpha property.

win._animate = function()
{
    var hideOld = new Animator({
        transition: Animator.Transition.easyInOut,
        duration: 2000,                     // length of animation in miliseconds
    });
    hideOld.addSubject(function(state) {      // state starts from 1.0 to 0.0
        this super._oldPaint.alpha = (255*state).toInteger();     })
    // hide old image
    hideOld.reverse();     var showNew = new Animator({
        transition: Animator.Transition.easyInOut,
        duration: 2000,                         // length of animation in miliseconds
    });
    showNew.addSubject(function(state) {      // state starts from 0.0 to 0.1
        this super._newPaint.alpha = (255*state).toInteger();
        console<<"animate "<         win.invalidate();
    })
    // show new image
    showNew.play();
}

Another type of transition effect is animation of objects by changing their position. In following example we are going to change top position of the new image which causes that the next sample moves bitmap from the top of the screen with amazing effect.

win._animate = function()
{
    var showNew = new Animator({
        transition: Animator.Transition.veryElastic,
        duration: 2000,                         // length of animation in miliseconds
    });
    showNew.addSubject(function(state) {      // state starts from 0.0 to 0.1
        this super._newTop = (this super._newImage.height * (state - 1)).toInteger();
        win.invalidate();
    })
    // show new image
    showNew.play();
} win.onStart = function()
{
    // load bitmaps
    this._oldImage = Bitmap.fromFile("app://old.jpg");
    this._newImage = Bitmap.fromFile("app://new.png");     // position for both bitmaps
    this._newTop = -1*this._newImage.height;     // start animation after 2 seconds
    var timer = new Timer(100, false); // interval make no sense here
    timer.start(2000);
    timer.onTick = function(sender)
    {
        this super._animate();
    };
} win.onDraw = function(s, c)
{
    c.drawBitmap(this._oldImage, 0, 0);
    c.drawBitmap(this._newImage, 0, this._newTop);
}

Good-looking effects can be achieved by changing animation transition options. For example, changing of Animator.Transition.veryElastic to Animator.Transition.veryBouncy.
It looks like an object is falling down from the top of the screen and then bounces back a few times.

For more information about Moscrif  Animator class, please refer to animation sample, or jozef’s blog.