Bookmark this on Hatena Bookmark
Hatena Bookmark - animation.enchant.js v0.1 Released!
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed

We’re proud to announce the release of the official animation.enchant.js plugin (beta) today. We’re planning on integrating it fully into enchant.js in the future.

Please download from github!

animation.enchant.js adds animation queue tools to enchant.js. Our v0.1 features usage by calling up Sprite class: AnimationSprite class.

It can be used as a simple twin plugin, for instance to move a Sprite to a specific spot, to fade out or in, for visualization of smooth movement and magnification, and more. It can be also be used to delay certain processing, or activate functions before or after certain processing.

Here’s a sample. If you click the red sprite, you’ll see variation animations in action.

animation.enchant.js Sample – jsdo.it – share JavaScript, HTML5 and CSS

Adding Twin

bear = new AnimationSprite(32, 32);
bear.animation.addTween({
    rotation: 360,
    scaleX: 2,
    scaleY: 2,
    time: 30
});

Expands while rotating.
(bear.rotation is rotation angle of the bear object, and bear.scaleX, scaleY displasy the scaling. With the addTween method executing the code above, you add an action changing bear queue with 30 frame rotation, scaleX, scaleY.)

Twin is not merely properties like x, y, scaleX, scaleY, opacity, and rotation, but can be used freely for changes in any property.

However, for time, onload, callback, and others, there are properties that can be expanded by setting.

  • time: number of frames until twin is completed (required)
  • onload: function executed when twin begins
  • callback: function executed when twin ends

Will not be executed when onload and callback are not set.

Easing

Easing refers not merely to directly adjusting the levels of a property, but also adding various effects in response to a numerical formula. This may include effects to accelerate a change, and effects to add bounds to an edge.

Several default easing functions are registered as properties of enchant.Easing. It uses the work of Robert Penner (BSD license).

bear = new AnimationSprite(32, 32);
bear.animation.addTween({
    x: 320,
    y: 320,
    easing: enchant.Easing.BACK_EASEOUT,
    time: 30
});
// Moves to (320, 320). Includes visualization effects to return when the tip is passed.

bear = new AnimationSprite(32, 32);
bear.animation.addTween({
    scaleX: 2,
    scaleY: 2,
    easing: enchant.Easing.BOUNCE_EASEOUT
    time: 30
});
// Expands sprite. Includes visual effect for bounds at tip.

All formulas preset in the ActionScript twin library “Tweener” can be used. A graph about easing formulas can be found in the Tweener document. Please see Aquioux’s blog to confirm actual movement.

Simple Notation

There is a simple method for describing twins.

bear = new AnimationSprite(32, 32);

// Moves 30 frames to (320, 320). (moveTo: absolute coordinates)
bear.animation.moveTo(320, 320, 30);

// Moves 30 frames to (320, 320). (moveBy: relative coordinates)
bear.animation.moveTo(-320, -320, 30);

// Fadeout
bear.animation.fadeOut(30);

// Fadein
bear.animation.fadeIn(30);

Control

Can be used for various functions not limited to animation.

// Disappears after 30 frames
bear.animation.delay(30).then(function(){
    game.rootScene.removeChild(this);
});
// delay(30) adds an action to do nothing until 30 frames have been exceeded.
// then(...) adds an action to execute the function delivered in the argument
// Actions are executed in the order they were added, so the designated functions will be executed when 30 frames have been exceeded

bear.animation.repeat(function(){...}, 60, 3);
// Executes designated functions at intervals of every 3 frames for a 60-frame section

bear.animation.after(function(){...}).then(function(){...})
// Executes second function after waiting for the first function to return "true"
// after(..) executes each function delivered per frame, and if "true" is returned proceeds to the next action

bear.animation.loop();
// Loops animation cue
// (When one action ends, the action will not be deleted but added to the end of the queue)

bear.animation.pause();
// Pauses animation queue execution

bear.animation.start();
// Restarts animation queue

bear.animation.clear();
// Empties animation queue

animation.enchant.js’s new features are perfect for controlling complex animation. We can’t wait to see what you come up with!