2D Animation & Interactivity for the Modern Web
var tween = new Tween(object, 5.0); //Replace 'object' with the object you wish to move. 5.0 represents the number of seconds it takes tween.animate.x.to(500); //replace '500' with the x value you wish to end on tween.animate.y.to(20); //replace '20' with the y value you wish to end on renderLoop.juggler.add(tween);
object1.alpha = 0; //Start the target object as invisible var tween = new Tween(object1, 5.0); //Replace 'object' with the object you wish to move. 5.0 represents the number of seconds it takes tween.animate.alpha.to(1); //Set the end transparency value to fully opaque renderLoop.juggler.add(tween); //Activate it
object2.pivotX = object2.width/2; //Set the center-point
object2.pivotY = object2.height/2; object2.scaleX = 0; //The start size is set to 0 object2.scaleY = 0; var tween = new Tween(object2, 5.0); //Set 'object2' to your desired object, 5.0 to the number of seconds tween.animate.scaleX.to(1); //The end size is set to full tween.animate.scaleY.to(1); renderLoop.juggler.add(tween); //Activate the animation
object3.pivotX = object3.width/2; //Set the center-point object3.pivotY = object3.height/2; object3.rotation = 0; //The start value is 0 var tween = new Tween(object3, 5.0); //Change 'object3' to your desired object, 5.0 is the animation duration tween.animate.rotation.to(30); //Set the radians of rotation renderLoop.juggler.add(tween);
const int START_POS = 30; const int END_POS = 480; const double DURATION = 4.5; void addAnimations() { animateTo(); } void animateTo() { renderLoop.juggler.tween(object4, DURATION, TransitionFunction.easeInOutQuadratic) ..animate.x.to(END_POS) ..onComplete = animateBack; } void animateBack() { renderLoop.juggler.tween(object4, DURATION, TransitionFunction.easeInOutQuadratic) //..delay = 1.0 //this line commented, *optional* ..animate.x.to(START_POS) ..onComplete = animateTo; }
object5.filters = [new GlowFilter(Color.Yellow, 5.0, 20, 20)]; object5.applyCache(-50, -50, 200, 200); //set the area around which to display the filter
GlowFilter glowFilter;
void addAnimations() {
glowFilter = new GlowFilter(Color.Red, 1.0, 20, 20); //Color, strength, blurX, blurY object6.filters = [glowFilter]; createGlowOn(); } void createGlowOn() { Transition glowOn = new Transition(1, 50, 3.0); //start value, end value, duration glowOn.roundToInt = true; glowOn.onUpdate = onGlowUpdate; glowOn.onComplete = createGlowOff; renderLoop.juggler.add(glowOn); } void createGlowOff() { Transition glowOff = new Transition(50, 1, 3.0); glowOff.roundToInt = true; glowOff.onUpdate = onGlowUpdate; glowOff.onComplete = createGlowOn; renderLoop.juggler.add(glowOff); } void onGlowUpdate(num value) { glowFilter.blurX = value; glowFilter.blurY = value; object6.applyCache(-50, -50, 600, 600); }
//Go to http://www.stagexl.org/runtimes/particle_emitter.html to generate this next line
var generatedCloudSettings = {"maxParticles":200, "duration":0, "lifeSpan":0.9, "lifespanVariance":0.4, "startSize":10, "startSizeVariance":20, "finishSize":70, "finishSizeVariance":0, "shape":"circle", "emitterType":0, "location":{"x":180, "y":80}, "locationVariance":{"x":0, "y":0}, "speed":100, "speedVariance":10, "angle":0, "angleVariance":360, "gravity":{"x":0, "y":100}, "radialAcceleration":20, "radialAccelerationVariance":0, "tangentialAcceleration":10, "tangentialAccelerationVariance":0, "minRadius":0, "maxRadius":100, "maxRadiusVariance":0, "rotatePerSecond":0, "rotatePerSecondVariance":0, "compositeOperation":"source-over", "startColor":{"red":1, "green":0.75, "blue":0, "alpha":1}, "finishColor":{"red":1, "green":0, "blue":0, "alpha":0}}; ParticleEmitter cloudEmitter = new ParticleEmitter(generatedCloudSettings); stage.addChild(cloudEmitter); stage.juggler.add(cloudEmitter);