Animation in User Interfaces: Principles and Techniques from Traditional Animation, Assignments of Software Development

Download Animation in User Interfaces: Principles and Techniques from Traditional Animation and more Assignments Software Development in PDF only on Docsity! Animation in the Interface Georgia Tech  2 Reading assignment: This section based on 2 papers  Bay-Wei Chang, David Ungar, “Animation: From Cartoons to the User Interface”, Proceedings of UIST’ 93, pp.45-55.  http://www.acm.org/pubs/articles/proceedings/uist/168642/p45-chang/p45-chang.pdf  Scott E. Hudson, John T. Stasko, “Animation Support in a User Interface Toolkit: Flexible, Robust and Reusable Abstractions”, Proceedings of UIST ‘93, pp.57-67.  http://www.acm.org/pubs/articles/proceedings/uist/168642/p57-hudson/p57-hudson.pdf 5 Why animation?  Provides visual continuity (and other effects) enhancing perception  particularly perception of change  hard to follow things that just flash into & out of existence  real world doesn’t act this way 6 Why Animation?  Can also be used to direct attention  movement draws attention  strong evolutionary reasons  therein lies a danger  overuse tends to demand too much attention  e.g., the dreaded paper clip 7 Why Animation?  Used sparingly and understandingly, animation can enhance the interface 10 Specific techniques employing these principles  Solidity  No teleportation  objects must come from somewhere  not just “pop into existence”  nothing in the real world does this (things with mass can’t do this) 11 Specific techniques employing these principles  Solidity  Motion blur  if objects move more than their own length (some say 1/2 length) in one frame, motion blur should be used  matches real world perception  makes movement look smoother  doesn’t need to be realistic 12 Specific techniques employing these principles  Solidity  Squash and stretch  Cartoon objects are typically designed to look “squishy”  When they stop, hit something, land, they tend to squash  like water balloon  compress in direction of travel 15 Specific techniques employing these principles  Solidity  Follow through (& secondary action)  Objects don’t just stop, they continue parts of the motion  e.g., clothes keep moving, body parts keep moving  Reinforces that object has mass via inertia  (also tends to be exaggerated) 16 Follow Through  Notice feather lags behind character  Also S&S here  From: Thomas & Johnston “The Illusion of Life: Disney Animation”, Hyperion, 1981 17 Specific techniques employing these principles  Exaggeration  Cartoon animation tends to do this in a number of ways  paradoxically increases realism (liveness) by being less literal  What is really going on is tweaking the perceptual system at just the right points 20 Specific techniques employing these principles  Reinforcement  Movement in arcs  Objects move in gently curving paths, not straight lines  Movements by animate objects are in arcs (due to mechanics of joints)  Most movements in gravity also in arcs 21 Recap  Appearance of mass  solidity & conservation of volume  several ways to show inertia  Tweak perception  direct attention to things that count  time on conceptually important parts  Caricature of reality Georgia Tech|, Examples From Video 22  25 Transition consists of  Reference to obj being animated  passage of time modeled as events  Time interval  period of time animation occurs  Trajectory  path taken through value space  timing of changes through values 26 Trajectory has two parts  Curve  set of values we pass through  typically in 2D space, but could be in any space of values (e.g., font size)  Pacing function  mapping from time interval (0…1) to “parameter space” of curve (0…1)  determines pacing along curve  e.g., slow-in / slow-out 27 Mapping from time to value  Time normalized with respect to animation interval (0...1)  Normalized time is transformed by pacing function (0…1)  Paced value is then fed to curve function to get final value 30 Transition steps  Steps represent intervals of time, not points in time  deliver start and end times & values  Typical OS can’t deliver uniform time intervals  Number of steps (delivery rate) is not fixed in advance (animation system sends as many as it can)  system delivers as many as it can 31 Recap  Transition  Object to animate  Time interval to work over  Time  (0…1)  Trajectory to pass through  Pacing function (0…1)  (0… 1)  Curve (0...1)  Value Animation in Swing  Unfortunately, no nice API custom built for animation  Animation usually cobbled together using a grab bag of tricks  Separate thread to update positions or other attributes of animated components  Custom repaint code  Graphical trickery  Understanding/using the Swing threading model  (Depending on what you want to do...) 32 Threading and Swing  Caution!  You cannot (should not) update or read any Swing property from a thread other than a Swing thread  Example: ok to update component properties in an event handler, as that code is running in the Swing event dispatch thread  Updating outside a Swing thread can yield unpredictable results  See: http://java.sun.com/products/jfc/tsc/articles/threads/threads1.html 35 How to Run Code in the Swing Event Dispatch Thread?  javax.swing.SwingUtilities  invokeLater(Runnable r) -- queue up a runnable to execute on the Swing event dispatch thread at some later time  invokeAndWait(Runnable r) -- caution: may lead to deadlock!  Useful for one-off updates to Swing state  javax.swing.Timer  Fires one or more actions after a specified delay  Calls out to ActionListeners, whose code executes on the event dispatch thread 36 SwingUtilities.invokeLater Example SwingUtilities.invokeLater(new Runnable() { public void run() { someComponent.setLocation(50, 50); } });  Take care -- don’t loop in run() or you’ll tie up the event dispatch thread 37