StageXL StageXL for Dart


2D Animation & Interactivity for the Modern Web

Moving an Object

  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);

Fading an Object

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

Growing an Object

  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

Spinning an Object

  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);

Moving an Object Back-and-Forth

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;
}

Glowing an Object

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

Pulsating a Glow

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); }

Particles

//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);