The following video demonstrates SwingPad's basic animation capabilities with GfxBuilder + TridentBuilder



This is the code that produces the animation
import groovy.beans.Bindable import org.pushingpixels.trident.Timeline.TimelineState @Bindable class Model { float s = 0.5f float ra = 0.0f } model = new Model() anim = timeline(model, duration: 4000, loop: 'reverse') { interpolatedProperty(property: "s", from: 0.5f, to: 2.0f) interpolatedProperty(property: "ra", from: 0f, to: 360f) } mouseHandler = { anim.state == TimelineState.SUSPENDED? anim.resume() : anim.suspend() } cx = 100 cy = 100 radius = 25 panel { borderLayout() canvas = canvas(preferredSize: [200,200], constraints: context.CENTER) { group { antialias true background(color: color("white")) group(sx: bind{model.s}, sy: bind{model.s}, ra: bind{model.ra}, mouseClicked: mouseHandler) { rect(x: cx-radius, y: cy-radius, w: radius*2, h: radius*2, f: color('blue')) circle(cx: cx-radius, cy: cy-radius, r: radius/2, f: color('red')) circle(cx: cx-radius, cy: cy+radius, r: radius/2, f: color('green')) circle(cx: cx+radius, cy: cy-radius, r: radius/2, f: color('yellow')) circle(cx: cx+radius, cy: cy+radius, r: radius/2, f: color('violet')) } } } label("Click shape to pause/resume", constraints: context.SOUTH) swingRepaintTimeline(canvas, loop: true) }Let's review the code step by step.

1. A Model class is defined with two observable properties (s & ra). Creating observable beans with @Bindable is so easy I cannot do it in a different manner now
2. A timeline is set to interpolate the model's properties. It will last for 4 seconds and will loop forever in a 'reverse' cycle. This means once the s property reaches 2.0 it will be animated back to 0.5 then back to 2.0, and so on.
3. A closure named mouseHandler is defined, it will be used to pause/resume the animation. This will be triggered by clicking on the animated shape.
4. The main content of the script follows. It is a JPanel that contains a GfxCanvas (GfxPanel was renamed to GfxCanvas) and a JLabel. The canvas contains all gfx nodes. Notice that the group's scaleX, scaleY and rotateAngle (sx, sy, and ra) properties are bound to the model's properties, using the short binding syntax. The mouseHandler closure is assigned to the group's mouseClicked property.
5. Lastly, a repaint timeline is set on the canvas widget.

I don't know about you, but I'm excited to be able to mix & match Swing, Gfx and Trident nodes seamlessly in the same script. This script is far from optimized though, an alternative way to define the timeline that updates the model's properties could be
anim = timeline(model, duration: 4000, loop: 'reverse') bean(model, s: animate(timeline: anim, from: 0.5f, to: 2.0f)) bean(model, ra: animate(timeline: anim, from: 0.0f, to: 360f))However, this is not yet possible with TridentBuilder 0.1, but I'd love to have that syntax finished before its next release.

Keep on Groovying!