Smartface Developer Center

Smartface Developer Center

Welcome to the Smartface Developer Hub. You'll find comprehensive guides and documentation to help you start developing and managing native iOS and Android apps with Smartface Cloud.

Get Started    

Hello Animation

API Reference: UI.Animator

UI.Animator is used to perform transform animations inside a layout. All you have to do is to pass functions setting the final condition of the UI objects and let Animator execute those functions with animation. In this tutorial, we will be creating a basic animation step by step so that we will know the basics of the animations with Animator.

Initial Setup

Let's say we have a view inside a flex layout in a page with the setup below:

var animatedView = new View({
  left:1, top:1, width: 100, height: 100,
  positionType: FlexLayout.PositionType.ABSOLUTE,
  backgroundColor: Color.create("#00A1F1")
});

this.onLoad = function() {
  this.headerBar.visible = false;
  this.statusBar.visible = false;

  flexLayout.borderWidth = 1;
  flexLayout.addChild(animatedView);
};

UI.Animator Functions

Let's say we want to expand the button and then shrink it to the initial size.

To do that, we must start with the first step, growing.

this.onShow = function() {
  // animate is the initial function to start an animation
  // @param layout having the animating object
  // @param duration in milliseconds
  // @param function having the final condition of the objects
  Animator.animate(flexLayout, 1000, function() {
    animatedView.width = 300;
    animatedView.height = 300;
  });
};

Note that:

Put the animation inside onShow method if you want to animate things right after the page is ready so that we can observe the animation.

Now we add the shrink animation. However, this time we will be using another method to continue our animation.

this.onShow = function() {
  // then is used to create a sequence of animations
  // @param duration in milliseconds
  // @param function having the final condition of the objects in each then
  Animator.animate(flexLayout, 1000, function() {
    animatedView.width = 300;
    animatedView.height = 300;
  }).then(3000, function() {
    animatedView.width = 5;
    animatedView.height = 5;
  }).then(1000, function() {
    animatedView.width = 100;
    animatedView.height = 100;
  });
};

Finally, we conclude our animation by coloring the view object.

this.onShow = function() {
  // complete is used to indicate the animation is finished
  Animator.animate(flexLayout, 1000, function() {
    animatedView.width = 300;
    animatedView.height = 300;
  }).then(3000, function() {
    animatedView.width = 5;
    animatedView.height = 5;
  }).then(1000, function() {
    animatedView.width = 100;
    animatedView.height = 100;
  }).complete(function() {
    animatedView.backgroundColor = Color.GREEN;
  });
};

Do Not Forget:

Complete does not perform any animations but indicates that the all animation sequences are finished.

Try Yourself

const extend = require("js-base/core/extend");

const View       = require("sf-core/ui/view");
const Page       = require("sf-core/ui/page");
const Color      = require("sf-core/ui/color");
const Animator   = require("sf-core/ui/animator");
const FlexLayout = require("sf-core/ui/flexlayout");

const PageAnimator = extend(Page)(
    function(_super) {
        _super(this);

        var flexLayout = this.layout;
        var animatedView = new View({
            left:1, top:1, width: 100, height: 100,
            positionType: FlexLayout.PositionType.ABSOLUTE,
            backgroundColor: Color.create("#00A1F1")
        });

        this.onLoad = function() {
            this.headerBar.visible = false;
            this.statusBar.visible = false;
        
            flexLayout.borderWidth = 1;            
            flexLayout.addChild(animatedView);
        };
        
        this.onShow = function() {
            Animator.animate(flexLayout, 1000, function() {
                animatedView.width = 300;
                animatedView.height = 300;
            }).then(3000, function() {
                animatedView.width = 5;
                animatedView.height = 5;
            }).then(1000, function() {
                animatedView.width = 100;
                animatedView.height = 100;
            }).complete(function() {
                animatedView.backgroundColor = Color.GREEN;
            });
        };
    }
);

module.exports = PageAnimator;

Hello Animation

API Reference: UI.Animator