Outline

What is animation Attributes can be varied

› Position› Velocity› Accelration› Width, height› Rotation› Alpha› Time interval› Color

Easing Bounce Spring Tweener

› Performance issue Creating Curve / Shapes / Volume

› Application of curve Using Vector

› Optimizing ball collision demo

What is animation?

Before we start…

What is animation?

› Particle System Demo

What is Animation?

Change of Object’s Properties over time

› What properties to change?

› What objects to apply?

› How to trigger the animation?

What properties to change?

Visible properties Invisible properties

Position Velocity

Scale (width and height)

Angular Velocity

Rotation Acceleration

Alpha Angular Acceleration

Color (brightness, saturation, tone…)

Loop interval

Depth Sound Volume

Appearance (e.g. blur filter, shape)

What objects to apply?

Movieclips Text Box Sound Object Camera (in 3D application)

How to trigger the animation?

Static animation› Timeline› Pre-programmed animation

Dynamic animation› Mouse actions› Keyboard actions› Web Cam (Augmented Reality)› Microphone

Animation Life Cycle

Initialization

Update properties

Animation Ended

Animation Ended?

Yes

No

Animation Loop

Animation Basics

Animation Basics

We will go through…› Velocity› Acceleration› Friction› Boundaries› Easing and Springing› Angular Motion› Collision Detection› Frame-based VS Time-based

Velocity and Acceleration

Velocity› Rate of change of position over time

Acceleration› Rate of change of velocity over time

Useful formulae

vx = vx + ax, vy = vy + ay

x = x + vx, y = y + vy

Friction

There can be energy loss when an object moves

› Causing the object to slow down

An easy way to implement friction:

vx *= friction factorvy *= friction factor

where friction factor is from 0 to 1

Friction (cont.)

The previous method is only an approximation because:› In real physics, friction of a moving object

has no relationship on velocity

Real Physics (acceleration = -0.2)

Approximation (friction factor = 0.3):

t 0 1 2 3 4 5

v 10 8 6 4 2 0

t 0 1 2 3 4 5

v 10 4 1.6 0.64 0.256 0.1024

Friction (cont.)

However, with the previous method:› Normal user should not be able to discover› No change of the sign of velocity

Write less “if then else” statements in code

The correct method:

var speed:Number = Math.sqrt(vx * vx + vy * vy);var angle:Number = Math.atan2(vy, vx);if (speed > friction) {

speed -= friction;} else {

speed = 0;}vx = Math.cos(angle) * speed;vy = Math.sin(angle) * speed;

Handling boundaries

Bouncing

If (ball.x + ball.width / 2 > right || ball.x – ball.width / 2 < left) {ball.vx = -ball.vx;

}

If (ball.y + ball.height / 2 > bottom || ball.y – ball.height / 2 < top) {ball.vy = -ball.vy;

}

Handling boundaries

Bouncing with energy loss

If (ball.x + ball.width / 2 > right || ball.x – ball.width / 2 < left) {ball.vx = -ball.vx * friction;

}

If (ball.y + ball.height / 2 > bottom || ball.y – ball.height / 2 < top) {ball.vy = -ball.vy * friction;

}

With Energy loss

Without Energy loss

Handling boundaries

Screen wrapping

Re-appear in the other side!

If (ball.x - ball.width / 2 > right ) {ball.x = left – ball.width / 2;

}else if (ball.x _+ ball.width / 2 < left) {

ball.x = right + ball.width / 2;}

If (ball.y - ball.height / 2 > bottom) {ball.y = top – ball.height / 2;

}else if (ball.y _+ ball.height / 2 < top) {

ball.y = bottom + ball.height / 2;}

Demo showing› Friction› Boundary› Energy loss hitting wall› throwing

Easing

Velocity is proportional to target distance Object moves smoothly and decelerate to the

target position

time

displacement

Target pos

Easing (cont.)

Formula for easing

x += (targetX – x) * easingFactor;;y += (targetY – y) * easingFactor;;

Springing

Acceleration is proportional to target distance Objects move smoothly, vibrate and then slow

down through the target position

time

displacement

Target pos

Springing (cont.)

Formula for springing

vx += (targetX – x) * springFactor;vy += (targetY – y) * springFactor;

//add friction, otherwise the object will never stopvx *= frictionFactor;vy *= frictionFactor;

x += vx;y += vy;

Why easing and springing?

In real world, › Objects usually move along an arced trajectory› Objects usually accelerates when start and

decelerate when stop› This kind of motion create “natural” feeling to us› Easing is used entired in Mac OS / iPhone!

Tweener

Tweener is a well-known Flash tweening library http://code.google.com/p/tweener/

Easing can be done in just 1 statement› Can you read the meaning below?

Tweener.addTween(this.ball, {x: 100,alpha: 0,time: 2,delay: 1,transition: easeOutExpo

});

Tweener (Cont.)

Other Flash Tweening Libraries

Some famous tweening libraries› Tweener › TweenLite› Boostworthy Animation System › FuseKit › Go › KitchenSync

A comparison of these tweening libraries can be found at:http://dispatchevent.org/wp-content/uploads/2008/04/Tween-Engine-Comparisons.pdf

Angular Motion

Think in polar co-ordinate and then transform into the Cartesian Plane

θ

r(x,y) x = r * Math.cos(θ);

y = r * Math.sin(θ);

Angular Motion (Cont.)

Angular Velocity› Rate of change of θ over time

Angular Acceleration› Rate of change of angular velocity over time

Angular Friction Angular easing Angular Springing

Curves, Shapes and Volume

Commonly used curves

Sine curve

Circle

Application of Curve

First person shooter game› Move up and down when walk

Biased Value Mapping › Random number biasing› My Website’s wallpaper rotator

Creating Shapes and Volumes

Rectangular Plane

Circular Plane

Cylinder

Cone

Helix

Sphere

Vector

Make code simpler Same thinking in 2D and 3D space

Vector basic operation

Add Subtraction Scale Dot production Normalize Get Length

Collision Detection of a group of sphere

Explosion Effect in 3D space