Skip to content

Instantly share code, notes, and snippets.

@sebmarkbage
Created July 26, 2010 13:54
Show Gist options
  • Save sebmarkbage/490572 to your computer and use it in GitHub Desktop.
Save sebmarkbage/490572 to your computer and use it in GitHub Desktop.
ART.Fx Demo
var playhead, art, keyframe1, keyframe2;
addEvent('load', function(){
art = new ART(400, 400).inject(document.body);
playhead = new ART.Rectangle(200, 200)
.inject(art)
.fill('#00F');
keyframe1 = playhead.tween(2000) // begin tween
.scale(2, 1)
.fill('#0F0');
keyframe2 = keyframe1.tween(2000) // sequential chaining
.scale(2, 2)
.fill('#F00');
keyframe2.tweenTo(keyframe1, 2000); // loop
});
addEvent('click', function(){
playhead.tweenTo(playhead); // equivalent to playhead.stop();
});
addEvent('keyup', function(){
playhead.tweenTo(keyframe2.stop()); // tween to keyframe2, then stop
});
// Keyframes can be thought of as timelines
var playhead, art;
addEvent('load', function(){
art = new ART(400, 400).inject(document.body);
playhead = new ART.Rectangle(200, 200)
.inject(art)
.fill('#00F');
var timeline = playhead.tween(2000)
.scale(2, 1)
.fill('#0F0');
timeline.tween(500) // append to the existing timeline
.scale(2, 2)
.fill('#F00')
.tween(1000)
.scale(1, 1)
.fill('#00C');
timeline.getLast().tweenTo(timeline.clone().reverse().next); // equivalent to timeline.yoyo();
timeline.repeat(10); // repeat the whole thing 10 times
timeline.setDuration(5000); // uniformly scale the entire animation down to 5 seconds
});
addEvent('click', function(){
if (playhead.paused) playhead.resume() else playhead.pause();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment