Create simple Animation and Effects in Netgem

This blog guides you throught the essential part of Netgem tv devlopment i.e Animation and effects.In this blog we will learn how to create a simple canvas to move from one place to another , fade in/out and zooming as well.

So First of all we will define an object to get animated with different effects .we can use images, video,color client or virtual clients but we'll use canvas in this blog. we should keep a reference to the object, otherwise it would be cleaned at some point and nothing would beshown on screen.

Put this code in MyFormWidget.js.

var canvas = new Canvas.JSCanvas();  
canvas.init(300, 100, 1, "black");  
  
var ctx = canvas.getContext("2d");  
ctx.fillStyle = "white";  
ctx.textAlign = "center, middle";  
// ctx.fillText(0, 0, ctx.viewportWidth, ctx.viewportHeight, _data); *DEPRECATED*  
ctx.fillText(0, 0, ctx.viewportWidth, ctx.viewportHeight, this._userData);  
  
// Keep reference  
this.canvas = canvas;
        

The object state is defined by several parameters. The graphic engine will compute intermediate value to emulate animation.Here, we will animate position, size and visibility of the canvas.When declared, the object should be initialized.It is visible and disabled by default.First we will have to enable it, set it hidden and place it at some x,y point on screen.(Here x = 200 and y = 120).

canvas.animation.setEnable().move(200, 120).hide().start();
 

We will not pass any duration to initialize the animation so when is called, the object will be getting proper parameters. Here we will show the object in 10000ms. It means in 10secs the object will be fully visible.

canvas.animation.show(10000).start();
 

Now the show animation will be started and will last for 10secs. Let's move the canvas to some other point. Let's do this after 2secs and let the animation last 3secs.

canvas.animation.move(600, 400, 3000, 2000).start(); 
 

While accessing the animation member in Netgem library, an Animation object will be created. Every call to the animation method will add an command to a list which will be stored in the object's cache. Nothing will be done until and unless start method is called programatically. So now, let us define a new anim, but let's do start this in 5s.

var anim = canvas.animation.move(400,100,2000).stretch(30,10,2000);  
setTimeAlarm(5000, function () {
       NGM.trace("Start second anim now");
 anim.start();
}, true); 
 

Isn't it simple ?

Download sample Animation project Cheers :)