animation programming
TRANSCRIPT
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