Page tree
Skip to end of metadata
Go to start of metadata

This guide explains how to use Animations in a project.

Animation Types

In Smartface, there are 2 types of animations. These are;

  • Page  Animations
  • UI Object Animations

Both of them have their own animation styles. While Page  Animations are about transition effects between pages or dialog, UI Object Animations are more about re-sizing objects , changing positions of them or changing transparency with an animation effect.

Page Animations

An animation can be given to a page with show() method. Parameters that are sent to this method will give an animation to the page which is called with this method as desired. The show() method can take 5 parameters. As a signature;

function show (motionEase, transitionEffect, transitionEffectType, fade, reset)
  • motionEase : Gives a motion ease to page transition. There are 5 types of motion eases on the Smartface for a page. Which are;
    • NONE: Clears the motionEase effect. Its value is 0.
    • ACCELERATING : Sets the motionEase effect as accelerating. Its value is 1.
    • DECELERATING : Sets the motionEase effect as decelerating. Its value is 2.
    • PLAIN : Sets the motionEase effect as plain. Its value is 3.
    • ACCELERATEANDDECELERATE : Sets the motionEase effect as accelerateAndDecelerate. Its value is 4.
  • transitionEffect : Gives a transition effect to page transition. There are 8 types of motion eases on the Smartface for a page. Which are;
    • NONE : Clears TransitionEffect animation. Its value is 0.
    • UPTODOWN : Sets TransitionEffect as upToDown. Its value is 1.
    • DOWNTOUP : Sets TransitionEffect effect as downToUp. Its value is 2.
    • RIGHTTOLEFT : Sets TransitionEffect effect as rightToLeft. Its value is 3.
    • LEFTTORIGHT : Sets TransitionEffect effect as leftToRight. Its value is 4.
    • FLIPFROMLEFT : Sets TransitionEffect effect as flipFromLeft. Its value is 5.
    • FLIPFROMRIGHT : Sets TransitionEffect effect as flipFromRight. Its value is 6.
    • CURL : Sets motionEasse TransitionEffect as curl. Its value is 7.
  • transitionEffectTypes : Gives a motion ease to page transition. There are 3 types of motion eases on the Smartface for page. Which are;
    • PUSH : Sets the TransitionEffectType as push. Its value is 0.
    • COVER : Sets the TransitionEffectType as cover. Its value is 1.
    • REVEAL : Sets the TransitionEffectType as reveal. Its value is 2.
  • fade : Allows user to show page via Fade effect. It can be true or false.
  • reset : Allows user to reset page before showing. It can be true or false.

Example for page with animations;

page1.show(SMF.UI.MotionEase.accelerating, SMF.UI.TransitionEffect.leftToRight, SMF.UI.TransitionEffectType.push,false,false);
//or
page1.show(1, 4, 1,false,false);

Both of them uses are correct and gives the same results.

UI Object Animations

We can give an animation to an UI Object with animate() method. The animate() method changes property of the UI object with the given animation parameters. Almost every UI object can be animated. However, not all of the properties can be animated. The supported properties are;

  • top : y or Y.
  • left : x or X.
  • width : w or W.
  • height : h or H.
  • alpha

Do not animate size and location any object which has parent as autosize. The animation may not look as it should be and also it may raise performance issues. The animate() method can take 5 parameters. As a signature;

function animate (property, endValue, motionEase, duration, onFinish)
  • property : Name of the property written in string. For example: ‘top’,’left’,’y’,’Y’,’x’,’X’,’alpha’ etc.
  • endValue : Value that would be set at the end of the animation. For example: “30 px”, “60 dp” , “10%”.
  • motionEase : How the animation motion ease will be performed.
    • NONE: Clears the motionEase effect. Its value is 0.
    • ACCELERATING : Sets the motionEase effect as accelerating. Its value is 1.
    • DECELERATING : Sets the motionEsse effect as decelerating. Its value is 2.
    • PLAIN : Sets the motionEase effect as plain . Its value is 3.
    • ACCELERATEANDDECELERATE : Sets the motionEase effect as accelerateAndDecelerate. Its value is 4.
    • BOUNCE: Sets the motionEase effect as bounce. Its value is 5.
  • duration : Duration of animation in milliseconds.
  • onFinish : Call back function that would be called at the end of the animation.

Animate Example as below :

rectangle1 = new SMF.UI.Rectangle({
		left : "20%",
		top : "10%",
		width : "60%",
		height : "20%",
		fillColor : "#FF00FF"
	});
page1.add(rectangle1);
rectangle1.animate({
	property : 'top',
	endValue : "30%",
	motionEase : SMF.UI.MotionEase.BOUNCE,
	duration : 3000,
	onFinish : function () {
		alert("Animate Completed");
	}
});