Attractive transition in animation.
If developer wants to create a successful application, especially in these times with so many similar mobile applications available on the market, he has to pay profound attention to the detail. Animations are the most important applications detail. They give the application more professional look and users enjoy every click, which gives them better experience.
In this sample, 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.
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 the old image and the second shows the 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(); va2r 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.