   What is animation   Attributes can be varied    ›   Position    ›   Velocity    ›   Accelration    ›   Width, height ...
   What is animation?    › Particle System Demo
   Change of Object’s Properties over time    › What properties to change?    › What objects to apply?    › How to trigge...
Visible properties                Invisible propertiesPosition                          VelocityScale                     ...
 Movieclips Text Box Sound Object Camera (in 3D application)
   Static animation    › Timeline    › Pre-programmed animation   Dynamic animation    › Mouse actions    › Keyboard act...
Initialization                  Animation                    Loop Updateproperties                 NoAnimation Ended?    Y...
   We will go through…    › Velocity    › Acceleration    › Friction    › Boundaries    › Easing and Springing    › Angul...
   Velocity    › Rate of change of position over time   Acceleration    › Rate of change of velocity over time   Useful...
   There can be energy loss when an    object moves    › Causing the object to slow down   An easy way to implement fric...
   The previous method is only an approximation    because:     › In real physics, friction of a moving object has       ...
   However, with the previous method:    › Normal user should not be able to discover    › No change of the sign of veloc...
   Bouncing    If (ball.x + ball.width / 2 > right || ball.x – ball.width / 2 < left) {                 ball.vx = -ball.v...
   Bouncing with energy loss                                                  Without Energy loss                        ...
   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 < l...
   Demo showing    › Friction    › Boundary    › Energy loss hitting wall    › throwing
 Velocity is proportional to target distance Object moves smoothly and decelerate to the  target positiondisplacement   ...
   Formula for easing    x += (targetX – x) * easingFactor;;    y += (targetY – y) * easingFactor;;
 Acceleration is proportional to target distance Objects move smoothly, vibrate and then slow  down through the target p...
   Formula for springing    vx += (targetX – x) * springFactor;    vy += (targetY – y) * springFactor;    //add friction,...
   In real world,     › Objects usually move along an arced trajectory     › Objects usually accelerates when start and  ...
   Tweener is a well-known Flash tweening library    http://code.google.com/p/tweener/   Easing can be done in just 1 st...
   Some famous tweening libraries    ›   Tweener    ›   TweenLite    ›   Boostworthy Animation System    ›   FuseKit    ›...
   Think in polar co-ordinate and then    transform into the Cartesian Plane                        (x,y)   x = r * Math....
   Angular Velocity    › Rate of change of θ over time   Angular Acceleration    › Rate of change of angular velocity ov...
   Sine curve   Circle
   First person shooter game    › Move up and down when walk   Biased Value Mapping    › Random number biasing    › My W...
   Rectangular Plane   Circular Plane   Cylinder   Cone   Helix   Sphere
 Make code simpler Same thinking in 2D and 3D space
 Add Subtraction Scale Dot production Normalize Get Length
   Collision Detection of a group of sphere   Explosion Effect in 3D space
Animation programming
Animation programming
Animation programming
Animation programming
Animation programming
Upcoming SlideShare
Loading in …5
×

Animation programming

1,445 views
1,309 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,445
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Animation programming

  1. 1.  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
  2. 2.  What is animation? › Particle System Demo
  3. 3.  Change of Object’s Properties over time › What properties to change? › What objects to apply? › How to trigger the animation?
  4. 4. Visible properties Invisible propertiesPosition VelocityScale Angular Velocity(width and height)Rotation AccelerationAlpha Angular AccelerationColor Loop interval(brightness, saturation, tone…)Depth Sound VolumeAppearance(e.g. blur filter, shape)
  5. 5.  Movieclips Text Box Sound Object Camera (in 3D application)
  6. 6.  Static animation › Timeline › Pre-programmed animation Dynamic animation › Mouse actions › Keyboard actions › Web Cam (Augmented Reality) › Microphone
  7. 7. Initialization Animation Loop Updateproperties NoAnimation Ended? YesAnimation Ended
  8. 8.  We will go through… › Velocity › Acceleration › Friction › Boundaries › Easing and Springing › Angular Motion › Collision Detection › Frame-based VS Time-based
  9. 9.  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
  10. 10.  There can be energy loss when an object moves › Causing the object to slow down An easy way to implement friction: vx *= friction factor vy *= friction factor where friction factor is from 0 to 1
  11. 11.  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) t 0 1 2 3 4 5 v 10 8 6 4 2 0 Approximation (friction factor = 0.3): t 0 1 2 3 4 5 v 10 4 1.6 0.64 0.256 0.1024
  12. 12.  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;
  13. 13.  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; }
  14. 14.  Bouncing with energy loss Without Energy loss 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; }
  15. 15.  Screen wrapping Re-appear in the other side!
  16. 16. 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;}
  17. 17.  Demo showing › Friction › Boundary › Energy loss hitting wall › throwing
  18. 18.  Velocity is proportional to target distance Object moves smoothly and decelerate to the target positiondisplacement Target pos time
  19. 19.  Formula for easing x += (targetX – x) * easingFactor;; y += (targetY – y) * easingFactor;;
  20. 20.  Acceleration is proportional to target distance Objects move smoothly, vibrate and then slow down through the target positiondisplacement Target pos time
  21. 21.  Formula for springing vx += (targetX – x) * springFactor; vy += (targetY – y) * springFactor; //add friction, otherwise the object will never stop vx *= frictionFactor; vy *= frictionFactor; x += vx; y += vy;
  22. 22.  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!
  23. 23.  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 });
  24. 24.  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
  25. 25.  Think in polar co-ordinate and then transform into the Cartesian Plane (x,y) x = r * Math.cos(θ); r y = r * Math.sin(θ); θ
  26. 26.  Angular Velocity › Rate of change of θ over time Angular Acceleration › Rate of change of angular velocity over time Angular Friction Angular easing Angular Springing
  27. 27.  Sine curve Circle
  28. 28.  First person shooter game › Move up and down when walk Biased Value Mapping › Random number biasing › My Website’s wallpaper rotator
  29. 29.  Rectangular Plane Circular Plane Cylinder Cone Helix Sphere
  30. 30.  Make code simpler Same thinking in 2D and 3D space
  31. 31.  Add Subtraction Scale Dot production Normalize Get Length
  32. 32.  Collision Detection of a group of sphere Explosion Effect in 3D space

×