Using KeyframeAnimation for fill effects

Mar 03 2011 21:48
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….

Introducing Sprite Sheets

Feb 21 2011 23:23

LimeJS now has full support of sprite sheets. This means that you can gather your image assets to the same file and define areas that contain only the parts you are interested about. This lets you load multiple images with one request and export your whole keyframe animation with single file.

To define a fill for a part of a image there is a new Frame fill. It takes in an image(as url or Image element) and frame definition(as goog.math.Rect object or numbers). You can then use the Frame fill instance as you would use any other fill. All the same methods can be used for Frame as for Image fill(this covers repeating patterns) and performance should be also similar.

1
2
var frame = new lime.fill.Frame('sheet.png', 20, 30, 200, 150); //x , y, width, height
box.setFill(frame);

By default the fill….