![Page 1: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/1.jpg)
AnimationPresented by Sancho McCann
![Page 2: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/2.jpg)
Animation
• Is animation useful?
• Why?
• Principles of animation
• Principles applied
![Page 3: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/3.jpg)
Animation: can it facilitate?
• Does animation help the understandingof changes over time?
• A picture is worth 1000 words; is a 100frame animation even worth 100 stills?
• “Yes?” - the congruence principle• “No?” - the apprehension principle
![Page 4: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/4.jpg)
Congruence Principle
• A useful graphic is congruent to thestructure and content of the internalrepresentation.
• Either match a users internalrepresentation or,
• Force a useful internal representation.
![Page 5: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/5.jpg)
Wood, D. (1992). The Power of Maps.
![Page 6: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/6.jpg)
Wood, D. (1992). The Power of Maps.
![Page 7: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/7.jpg)
Congruence Principle Violated• 3D does not improve
congruence;
• 3D does not improveperformance, speed,accuracy, ormemory.
0102030405060708090
1stQtr
2ndQtr
3rdQtr
4thQtr
East
![Page 8: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/8.jpg)
Congruence Principle Applied
![Page 9: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/9.jpg)
Congruence in Static Graphics
• Using space to portray space has beenwidely successful for millennia.
http://www.math.ubc.ca/~cass/Euclid/papyrus/papyrus.html http://www.classicmaps.com
US Patent 223898
![Page 10: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/10.jpg)
Congruence in Animations
![Page 11: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/11.jpg)
Does Animation Facilitate?
• How could we compare theeffectiveness of an animatedpresentation against a staticpresentation?
![Page 12: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/12.jpg)
Rieber’s Animated Graphic
Rieber, L. P. (1991a). Animation, incidental learning, and continuing motivation. Journal ofEducational Psychology, 83, 318–328.
• Block andball movedat differentspeeds
![Page 13: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/13.jpg)
Rieber’s Static Graphic
Rieber, L. P. (1991a). Animation, incidental learning, and continuing motivation. Journal ofEducational Psychology, 83, 318–328.
• No information about speeds of theobjects was presented, only arrows toindicate direction of motion.
![Page 14: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/14.jpg)
Rieber’s Post Test
Rieber, L. P. (1991a). Animation, incidental learning, and continuing motivation. Journal ofEducational Psychology, 83, 318–328.
![Page 15: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/15.jpg)
Does Animation Facilitate?
• Many of the studies have confoundingvariables on the results of the test:– The animation was interactive– The animation showed more information
• Comparison on equal ground:– Tutorials based on animation are actually
not remembered well
![Page 16: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/16.jpg)
Palmiter, S. & Elkerton, J. (1993). Animated demonstrations for learning proceduralcomputer-based tasks. Human–Computer Interaction, 8, 193–216.
![Page 17: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/17.jpg)
Why Not?
• The apprehension principle states thatthe external representation must bereadily and accurately perceived andcomprehended.
• Animation violates this principle!
![Page 18: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/18.jpg)
Why Not?
• Minds are not easily forced to hold acontinuous representation.
• Animations are comprehendeddiscretely.
• Different viewers will take away differentelements from an animation.
• Animation is fleeting.
![Page 19: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/19.jpg)
Advice
• Useful when timing is important• Realism is not important, your
information is– Slow down animations at critical phases– Annotate, highlight, direct attention– Eliminate unnecessary information
• Allow interaction
![Page 20: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/20.jpg)
The Music AnimationMachine
![Page 21: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/21.jpg)
Animationuseful fortiming?
![Page 22: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/22.jpg)
Interactive Animation
• Richard Lowe. User-ControllableAnimated Diagrams: The Solution forLearning Dynamic Content?
![Page 23: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/23.jpg)
Interactive Animation
• Animation is not fleeting
• Animation is not overwhelming
• View animation at any speed
• Extract fine and coarse grainedinformation
![Page 24: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/24.jpg)
Interactive Animation
• Given:– 28 frame user-controllable weather map
representing a 7 day period– Another “Original” weather map
• Task:– Use patterns learned in the animation to
predict the weather map 24 hours after the“Original”
![Page 25: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/25.jpg)
Interactive Animation
Richard Lowe. User-controlled animated diagrams: the solution for learning dynamiccontent?. In Lecture Notes in Computer Science - Diagrammatic Representation andInference. Springer-Verlag, 2004.
![Page 26: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/26.jpg)
Interactive Animation
• Animation only used for an overview
• Novice users did not use animation tolearn temporal relations betweenfeatures; they didn’t know to look!
• The animation degraded to a flip-bookof images
![Page 27: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/27.jpg)
Animated Interaction
• Animation does aid understanding ofinteractive and dynamic changes to aninterface.
![Page 28: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/28.jpg)
Animated Interaction
![Page 29: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/29.jpg)
Principles of Animation
• John Lasseter. Principles of TraditionalAnimation Applied to 3D computerAnimation. 1987.
![Page 30: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/30.jpg)
Principles of Animation
• From classes promoted by Walt Disneyin the 1930s, The 11 Principles arose
![Page 31: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/31.jpg)
Squash and Stretch
![Page 32: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/32.jpg)
Timing
![Page 33: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/33.jpg)
Anticipation
![Page 34: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/34.jpg)
Staging
![Page 35: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/35.jpg)
Staging
![Page 36: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/36.jpg)
Slow-In Slow-Out
![Page 37: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/37.jpg)
Arcs
![Page 38: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/38.jpg)
Exaggeration
![Page 39: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/39.jpg)
Appeal
![Page 40: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/40.jpg)
Three Other Principles
• Follow-through and Overlapping Action
• Straight Ahead or Pose-to-Pose
• Secondary Action
![Page 41: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/41.jpg)
Principles Applied
![Page 42: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/42.jpg)
An Application
• David Carr and Matja_ Kljun. The Effectof Animated Transitions on UserNavigation in 3d Tree-Maps.Proceedings of the 9th Intl. Conferenceon Information Visualization (IV 2005).
![Page 43: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/43.jpg)
![Page 44: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/44.jpg)
An Application
• How is staging applied?
• How is anticipation applied?
• What other principles are applied?
• What principles could have beenapplied?
![Page 45: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/45.jpg)
Discussion
• Animation did allow for different types ofnavigation - short-cuts
• The short-cuts were not effective -users got lost.
![Page 46: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/46.jpg)
![Page 47: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/47.jpg)
Summary
• Animation is deceivingly attractive
• Interactive animation might help
• Animated interaction does help
![Page 48: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/48.jpg)
Papers• Barbara Tversky, Julie Bauer Morrison and
Mireille Betrancourt. Animation: can itfacilitate?. In International Journal of Human-Computer Studies, 57 . Elsevier Science Ltd,2004.
• Richard Lowe. User-controlled animateddiagrams: the solution for learning dynamiccontent?. In Lecture Notes in ComputerScience - Diagrammatic Representation andInference. Springer-Verlag, 2004
![Page 49: Animationtmm/courses/cpsc533c-06... · applied to 3D computer animation. In ACM Journal of Computer Graphics, 21 - 4, July 1987. •Bladh, T., Carr, D. A., and Kljun, M. 2005. The](https://reader034.vdocument.in/reader034/viewer/2022052011/602724a909c2f21b93314f87/html5/thumbnails/49.jpg)
Papers• John Lasseter. Principles of traditional animation
applied to 3D computer animation. In ACM Journal ofComputer Graphics, 21 - 4, July 1987.
• Bladh, T., Carr, D. A., and Kljun, M. 2005. The Effectof Animated Transitions on User Navigation in 3DTree-Maps. In Proceedings of the Ninth internationalConference on information Visualisation (Iv'05) -Volume 00 (July 06 - 08, 2005). IV. IEEE ComputerSociety, Washington, DC, 297-305.