animation programming
TRANSCRIPT
![Page 1: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/1.jpg)
![Page 2: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/2.jpg)
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
![Page 3: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/3.jpg)
What is animation?
![Page 4: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/4.jpg)
Before we start…
What is animation?
› Particle System Demo
![Page 5: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/5.jpg)
What is Animation?
Change of Object’s Properties over time
› What properties to change?
› What objects to apply?
› How to trigger the animation?
![Page 6: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/6.jpg)
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)
![Page 7: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/7.jpg)
What objects to apply?
Movieclips Text Box Sound Object Camera (in 3D application)
![Page 8: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/8.jpg)
How to trigger the animation?
Static animation› Timeline› Pre-programmed animation
Dynamic animation› Mouse actions› Keyboard actions› Web Cam (Augmented Reality)› Microphone
![Page 9: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/9.jpg)
Animation Life Cycle
Initialization
Update properties
Animation Ended
Animation Ended?
Yes
No
Animation Loop
![Page 10: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/10.jpg)
Animation Basics
![Page 11: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/11.jpg)
Animation Basics
We will go through…› Velocity› Acceleration› Friction› Boundaries› Easing and Springing› Angular Motion› Collision Detection› Frame-based VS Time-based
![Page 12: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/12.jpg)
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
![Page 13: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/13.jpg)
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
![Page 14: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/14.jpg)
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
![Page 15: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/15.jpg)
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;
![Page 16: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/16.jpg)
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;
}
![Page 17: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/17.jpg)
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
![Page 18: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/18.jpg)
Handling boundaries
Screen wrapping
Re-appear in the other side!
![Page 19: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/19.jpg)
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;}
![Page 20: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/20.jpg)
Demo showing› Friction› Boundary› Energy loss hitting wall› throwing
![Page 21: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/21.jpg)
Easing
Velocity is proportional to target distance Object moves smoothly and decelerate to the
target position
time
displacement
Target pos
![Page 22: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/22.jpg)
Easing (cont.)
Formula for easing
x += (targetX – x) * easingFactor;;y += (targetY – y) * easingFactor;;
![Page 23: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/23.jpg)
Springing
Acceleration is proportional to target distance Objects move smoothly, vibrate and then slow
down through the target position
time
displacement
Target pos
![Page 24: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/24.jpg)
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;
![Page 25: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/25.jpg)
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!
![Page 26: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/26.jpg)
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
});
![Page 27: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/27.jpg)
Tweener (Cont.)
![Page 28: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/28.jpg)
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
![Page 29: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/29.jpg)
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(θ);
![Page 30: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/30.jpg)
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
![Page 31: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/31.jpg)
Curves, Shapes and Volume
![Page 32: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/32.jpg)
Commonly used curves
Sine curve
Circle
![Page 33: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/33.jpg)
Application of Curve
First person shooter game› Move up and down when walk
Biased Value Mapping › Random number biasing› My Website’s wallpaper rotator
![Page 34: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/34.jpg)
Creating Shapes and Volumes
Rectangular Plane
Circular Plane
Cylinder
Cone
Helix
Sphere
![Page 35: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/35.jpg)
Vector
Make code simpler Same thinking in 2D and 3D space
![Page 36: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/36.jpg)
Vector basic operation
Add Subtraction Scale Dot production Normalize Get Length
![Page 37: Animation programming](https://reader030.vdocuments.site/reader030/viewer/2022012922/5562f7c5d8b42a62598b47b1/html5/thumbnails/37.jpg)
Collision Detection of a group of sphere
Explosion Effect in 3D space