Animation in Java

behumble@hanjava.net

Disclaimer

RenderingRendering or PerformancePerformance

issues are not covered here

Simplest Example

Using Timer

2 Timers in Java World

• java.util.Timer– for general use

• calls java.util.TimerTask instance

– good for scheduling tasks• specifying time for task

• javax.swing.Timer– GUI specific

• calls java.awt.event.ActionListener instance

– called on EDT

Working Implementation

• Example1

labelPanel.getObj()

Code & Demo of Example 1timer = new Timer(10, new ActionListener() {

public void actionPerformed(ActionEvent e) {

if(xPos < xEndPos) {

xPos += xDiff;

JComponent obj = labelPanel.getObject();

obj.setLocation( xPos, obj.getY() );

} else {

timer.stop();

xPos = 0;

}

}

});

timer.start();

Is it enough?

• What about– Repetition– Duration– On slow machine– Non-linear

interpolation– Reverse direction

• Back and Forth

Time based animation

v = f(t)v = f(t)

Key Concepts of Timing Model

• Cycle– Smallest unit for animation

• Envelope– container of same cycles

• TimingController– uses Cycles & Envelopes– Synthesize TimingEvent(s)

• TimingTarget– Interface we should implements– Modify value based on timing event

Cycle

Envelope

Envelope ( bonus )

• Repeat Behavior– FORWARD or REVERSE– at the end of each cycles

• End Behavior– HOLD or RESET– at the end of the Envelope

Timing Target

• Interface we should implement• callback for timing events• where the formula (v=f(t)) resides

Example 2// duration : 1s, resolution : 10 msCycle horizontalCycle = new Cycle( 1000, 10 );// repeat 5 times, beginning delay : 0 msEnvelope simpleEnv = new Envelope( 5, 0, Envelope.RepeatBehavior.FORWARD, Envelope.EndBehavior.HOLD );TimingTarget tt = new TimingTarget() { public void begin() {} public void end() {} public void timingEvent(long cycleElapsedTime, long totalElapsedTime, float fraction) { int x = (int)(fraction * 400); JComponent obj = labelPanel.getObject(); obj.setLocation( x, obj.getY() ); }};

TimingController controller = new TimingController( horizontalCycle, simpleEnv );controller.addTarget( tt );controller.start();

Demo of Example 2

• Duration• Resolution• Beginning delay• Repeat Count• Repeat Behavior

Hardcore Hardcore AnimationAnimation

Non-linear Interpolation

Acceleration

Deceleration

Property Range

Object Modifier

Trigger

Multi-Step Animation

Non-linear Interpolation

• Real World is non-linear– Gravity, Acceleration, friction…

• Non-linear movement looks more natural• see KeySplines, KeyFrames

Ease-in Ease-in, Ease-out Quick Start

Acceleration / Deceleration

• Simple & useful non-linear interpolation

• Float value between 0 and 1• Fraction of time spent speeding up or

slowing down• Demo please

– modifying Example 2

Property Setter

• Property is CBD term for field or member variable

• Animate property of JavaBeans• Consists of

– PropertyRange• property name + value range• int, double, float, Dimension, Point, Color,

Rectangle

– Object modifier• implements TimingTarget

Example 3 & DemoCycle horizontalCycle = new Cycle( 1000, 10 );Envelope simpleEnv = new Envelope( 1, 0, RepeatBehavior.REVERSE, EndBehavior.HOLD );

Rectangle from = new Rectangle( 0, 0, 0, 0 );Rectangle to = new Rectangle( 100, 100, 200, 200 ); PropertyRange boundsRange = PropertyRange.createPropertyRangeRectangle("bounds", from, to);TimingTarget tt = new ObjectModifier( labelPanel.getObject(), boundsRange ); TimingController controller = new TimingController( horizontalCycle, simpleEnv );controller.addTarget( tt );controller.start();

Trigger

• Utilities to reduce event listener code• Useful for

– Hover effect for buttons– Pulsating effect for focus events– Animation on action events

• ActionTrigger, ButtonStateTrigger, ComponentFocusTrigger, TimingTrigger

Trigger Examplefrom JavaOne2006 TS-1297 Slide

Multi-Step AnimationsKeyValues, KeyTimes, KeySplines, KeyFrames (Example 4)

Cycle horizontalCycle = new Cycle( 1000, 10 );Envelope simpleEnv = new Envelope( 1, 0, REVERSE, HOLD );

Point from = new Point( 0, 10 );Point mid = new Point ( 10, 300 );Point to = new Point( 400, 100 );// variable length argumentsKeyValues values = KeyValues.createKeyValues(from, mid, to);KeyFrames frames = new KeyFrames( values );PropertyRange boundsRange = new PropertyRange("location", frames );TimingTarget tt = new ObjectModifier( labelPanel.getObject(), boundsRange ); TimingController controller = new TimingController( horizontalCycle, simpleEnv );controller.addTarget( tt );controller.start();

Application

• Not only for location, size, bounds• can apply for everywhere• Example 5 – Fading Animation Demo

Reference• Timing is Everything

– http://today.java.net/pub/a/today/2005/02/15/timing.htmlhttp://today.java.net/pub/a/today/2005/02/15/timing.html

• Time Again– http://today.java.net/pub/a/today/2006/0

3/16/time-again.html• Timing Framework

– http://timingframework.dev.java.net/• JavaOne 2006 TS-1297 “Filthy Rich

Clients: Animated Effects in Swing Applications”