Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Animation programming

1,622 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

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

×