Animation. HCID 520 User Interface Software & Technology

Transcription

1 Animation HCID 520 User Interface Software & Technology

2 How is animation used in user interfaces today?

3 Animated Transitions See change from one state to next start

4 Animated Transitions See change from one state to next end

5 Animated Transitions See change from one state to next Animation shows transition better, BUT Still may be too fast, or too slow Too many objects may move at once start end

6 Perceiving Animation Under what conditions does a sequence of static images give rise to motion perception?

7 Perceiving Animation Under what conditions does a sequence of static images give rise to motion perception? Motions perceived at ~10 frames/second (100 ms). Smooth animation perceived at higher rates (e.g., 24fps+)

8 Cone Trees [Robertson 91]

9

10 Tracking Multiple Targets How many dots can we simultaneously track?

11

12

13

14 Tracking Multiple Targets How many dots can we simultaneously track? ~4-6. Difficulty increases sig. at 6. [Yantis 92, Pylyshn 88, Cavanagh 05]

15 Principles for Animation Design

16 Principles of Character Animation Character Animation (Johnston & Thomas 81, Lasseter 87) Squash-and-Stretch Staging, Overlapping Action Anticipation Follow-Through Slow-In, Slow-Out

17 Squash-and-Stretch Defines rigidity of material Should maintain constant volume Smoothes fast motion, similar to motion blur

18 Staging Clear presentation of one idea at a time Highlight important actions Lead viewers eyes to the action Motion in still scene, stillness in busy scene Motion clearest at silhouette

19 Anticipation Show preparation for an action

20 Follow-Through Emphasize termination of action

21 Slow-In, Slow-Out Start transition slowly Speed up in middle Slow down at end Linear interpolation (uniform velocity) is less pleasing Most common form of pacing (easing) function

22 Example: Andre and Wally B.

23 Example: Andre and Wally B.

24 Example: Andre and Wally B.

25 Example: Andre and Wally B.

26 How appropriate are character animation techniques for UIs?

27 Implementing Animation

28 Animation Approaches Frame-Based Animation Redraw scene at regular interval (e.g., 16ms) Developer defines the redraw function

29 Frame-Based Animation

30 Frame-Based Animation circle(10,10) circle(15,15) circle(20,20) circle(25,25)

31 Frame-Based Animation circle(10,10) circle(15,15) circle(20,20) circle(25,25)

32 Frame-Based Animation clear() clear() clear() circle(10,10) circle(15,15) circle(20,20) circle(25,25)

33 Animation Approaches Frame-Based Animation Redraw scene at regular interval (e.g., 16ms) Developer defines the redraw function

34 Animation Approaches Frame-Based Animation Redraw scene at regular interval (e.g., 16ms) Developer defines the redraw function Transition-Based Animation (Hudson & Stasko 93) Specify property value, duration & easing Also called tweening (for in-betweens ) Typically computed via interpolation step(fraction) { x now = x start + fraction * (x end - x start ); } Timing & redraw managed by system / toolkit

35 Transition-Based Animation from: (10,10) to: (25,25) duration: 3sec dx=25-10 x=10+(0/3)*dx x=10+(1/3)*dx x=10+(2/3)*dx x=10+(3/3)*dx 0s 1s 2s 3s

36 Transition-Based Animation from: (10,10) to: (25,25) duration: 3sec Toolkit handles frame-by-frame updates! dx=25-10 x=10+(0/3)*dx x=10+(1/3)*dx x=10+(2/3)*dx x=10+(3/3)*dx 0s 1s 2s 3s

37 Easing (or Pacing ) Functions Goals: stylize animation, improve perception. Basic idea is to warp time: as animation goes from start (0%) to end (100%), dynamically adjust progress fraction using an easing function.

38 Easing (or Pacing ) Functions Goals: stylize animation, improve perception. Basic idea is to warp time: as animation goes from start (0%) to end (100%), dynamically adjust progress fraction using an easing function. 1 frac ease(x) = x (linear, no warp) elapsed time / duration

39 Easing (or Pacing ) Functions Goals: stylize animation, improve perception. Basic idea is to warp time: as animation goes from start (0%) to end (100%), dynamically adjust progress fraction using an easing function. 1 frac ease(x) = x (linear, no warp) elapsed time / duration 1 frac ease(x) = s-curve(x) (slow-in, slow-out) elapsed time / duration

40

41 CSS Transitions Extends CSS with Animated Transitions a { color: black; transition: color 1s ease-in-out; } a:hover { color: red; }

42 CSS Transitions Extends CSS with Animated Transitions a { Duration color: black; transition: color 1s ease-in-out; } a:hover { color: red; } Property Easing

43 CSS Transitions Extends CSS with Animated Transitions a { Duration color: black; transition: color 1s ease-in-out; } a:hover { color: red; } Property Easing Animate color transition upon mouse in / out.

44 Interface Physics

45 Use the Force!

46 Physics Engines Simulate Physical Forces among Particles Electric Charge / Gravitational Attraction Spring Forces connecting Elements Gravity & Friction Integrate over time > frame-based animation Why? Layout diagrams or data visualizations Create interesting visual effects Fun & games!

47 JavaScript Physics Engines d3.js - d3.force (d3js.org) Particle system supporting: particle charge, gravity, friction, edge constraints, and rudimentary collision detection Box2D (box2d-js.sourceforge.net) Richer geometries and collision detection

48