1Fall 2005 6.831 UI Design and Implementation 1 Fall 2005 6.831 UI Design and Implementation 2Suggested by Ryan DamicoFall 2005 6.831 UI Design and Implementation 3 Design principles Frame animation Palette animation Property animation Pacing & pathFall 2005 6.831 UI Design and Implementation 4 Purpose of application Games, simulations, tutorials, video players Feedback Visualizing changes not made by user Keeping the user oriented during transitions Displaying progress Help Animated icons Moving mouse around to show how to use UI Reinforcing illusion of direct manipulation Aesthetic appeal and engagement2Fall 2005 6.831 UI Design and Implementation 5! " Existing events are often enough to provide incremental screen changes Users mouse events drive scrolling Program events can drive a progress bar But bursty or slow events may need animation Short distances and short time periods time < 100 ms distance < width of the moving objectFall 2005 6.831 UI Design and Implementation 6#$% Frame rate > 20 frames per second 10 fps is convincing but looks jerky Film is 24 fps, TV (NTSC) 30 fps Big jumps are disruptive Use motion blur if frame rate cant keep up with object speed Rule of thumb: if object moves more than its width between frames, fill in with motion blur (smear of color or multiple images) Animation in direct manipulation Solidity (motion blur, fading in/out) Anticipation (wind up before starting to move) Slow-in/slow-out Follow through (wiggle back and forth when stopping) Keep feedback animation short Many users will wait for it to stop before continuing Use animation sparingly Constant motion is distracting and agitatingFall 2005 6.831 UI Design and Implementation 7%&' Frame animation Animated GIF Graphics.drawImage(, this) automatically animates GIFs by calling this.repaint() when its time to show the next frameFall 2005 6.831 UI Design and Implementation 8%&' % Palette animation Split color index into layers Double-buffering by making only one layer visible while drawing into the other Objects can be moved around in one layer without need to redraw underlying layer Fade-in by interpolating colors between layers3Fall 2005 6.831 UI Design and Implementation 9%&()' *+ Approach Set a periodic timer for 1/frame rate Repaint every timer tick Paint method uses current clock time to compute positions/sizes/etc to draw animated objects Stop timer when animation complete or interrupted May be hard to achieve smooth animation Event-handling may be bursty Getting from timer tick to paint method requires two passes through event queue Processing user input events has priority over animation repaintsFall 2005 6.831 UI Design and Implementation 10%&()' Tight animation loop approach Repeat as fast as possible, Check and handle input events Paint everything for current clock time (Optional: sleep a bit to yield to other processes)Fall 2005 6.831 UI Design and Implementation 11,' % Set periodic timer Every timer tick, update component properties as a function of current clock time Position, size, color, opacityFall 2005 6.831 UI Design and Implementation 12% $% Pacing function maps time t to parameter s [0,1] Linear: s = t / duration Slow-in/slow-out: s ~ atan(t) Path function maps s to property value v Linear: (x,y) = (1-s)*(x0,y0) + s*(x1,y1) Quadratic Bezier curve: (x,y) = (1-s)^2*(x0,y0) + 2s(1-s)(x1,y1) + s^2(x2,y2) Color: HSV vs. RGB4Fall 2005 6.831 UI Design and Implementation 13# ++<Rectangle Fill="Black" Height="100px" Width="100px" Canvas.Bottom="5px Canvas.Right="5px"> <Rectangle.Height><LengthAnimationCollection><LengthAnimation From="100" To="50" Duration="3 RepeatDuration="Indefinite" /></LengthAnimationCollection></Rectangle.Height>
View Full Document
Unlocking...