Using KeyframeAnimation for fill effects

4 years ago
Tags: demos

Some posts ago we showed how to use KeyframeAnimation in the normal way. That is by making a SpriteSheet image and using separate areas from that image as separate frames in the animation. But theres a bit more in it. The ‘addFrame()’ method can actually accept any kind of fills. Depending on what you wish to achieve this may give you a way to have some animating objects without using lot of images.

Please note that following can not be counted as a major feature of LimeJS but rather a side effect that we are happy about.

Starting with the simplest fill types here is the animation using plain colors as fills. All syntax is the same. Just pass the color name to the ‘addFrame()’ method.

1
2
3
4
5
var sprite = new lime.RoundedRect().setRadius(10).setSize(50,50).setPosition(100,200);
layer.appendChild(sprite);
var anim = new lime.animation.KeyframeAnimation().setDelay(.5).
    addFrame('#c00').addFrame('#0c0').addFrame('#00c');
sprite.runAction(anim);

This creates a simple blinking effect. One other use case would be to use ‘addBrightness()’ or ‘addSaturation()’ and create a stepping version of ColorTo animation.

Next up gradients. Gradients are defined by their direction points and color locations. With a simple loop you could alter some parameters of the gradient to make an effect that the gradient is transforming into another. Here is an example of such case.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var circle = new lime.Circle().setSize(120,120).setPosition(250,200);
layer.appendChild(circle);
var anim2 = new lime.animation.KeyframeAnimation().setDelay(1/15)
for(var i=1;i<=10;i++){
    anim2.addFrame(new lime.fill.LinearGradient().setDirection(0,0,i/10,i/10).
        addColorStop(i/11,'#c00').addColorStop(1,'#00c'));
}
for(var i=1;i<=10;i++){
    anim2.addFrame(new lime.fill.LinearGradient().setDirection(0,1,i/10,1-i/10).
        addColorStop(i/11,'#00c').addColorStop(1,'#c00'));
}
circle.runAction(anim2);

Here we add gradient from red (#c00) to blue (#00c) to the animations. While doing so in each step the location of the gradient is moved from top-left closer to the bottom right. This makes an effect that the gradient is sliding. Then the effect is repeated with swapped colors from different corner so we end up in the same position as the original frame. Note that the loop runs only once while defining the frames not when the animation itself is playing. It looks like this:

One more way how this could be used is by using a single image and defining different size or position offset for each frame. As an example we draw a polygon arrow that uses single image of the “police line” that is scrolling over in a loop. To make such effect the x-axis offset if changed inside the for loop to move it from the left position to the right. Here is the code:

1
2
3
4
5
6
7
8
9
var sign = new lime.Polygon().setPoints(10,0,60,60,50,20,120,20,120,-20,50,-20,60,-60).
    setPosition(450,200);
layer.appendChild(sign);
var anim3 = new lime.animation.KeyframeAnimation().setDelay(1/30);
for(var i=1;i<=100;i++){
anim3.addFrame(new lime.fill.Image('assets/sign.png').setSize(200,33).
    setOffset(1-i/100,0,true));
}
sign.runAction(anim3);

Add a RotateBy animation for bit more effect and here’s how it looks.

These were some samples of KeyframeAnimation effects. You may also combine different techniques as well, so that for example some of the frames use full colors and some use gradients. All depends of course on the effect you need in your game.

All source code for demos above can be seen here.