Bringing your application to life. Covers why you should animate, what you should animate, the fundamentals of animation, and some actual code samples to get you going.
12 Basic Principles
– The Illusion of Life: Disney Animation – 1981 by Ollie Johnston and Frank Thomas
h"p://en.wikipedia.org/wiki/ 12_basic_principles_of_anima:on
SQUASH AND STRETCH
– Most things don’t squash/stretch this much, but this exaggeration (another principle) helps to show the physical nature of the object (and you don’t notice how much it’s happening when at speed)
Lampman,
Wikipedia
ANTICIPATION
– Often times, when things are getting ready to move, they make a movement in the opposite first
– Baseball pitcher pulls arm back before going forward to throw the ball
– Person crouches before jumping
h"p://en.wikipedia.org/wiki/12_basic_principles_of_anima:on
SLOW IN AND SLOW OUT
– Movement doesn’t just start and stop immediately
– Running doesn’t just HAPPEN
• You speed up before getting to your running speed
• You slow down over time before coming to a stop
– (Unless like Chet said, you hit a brick wall – good one Chet.)
EVERYTHING
– Not really, but sorta…
– Animate when…
– Something changes
• +1
• Add friend
• Drawer closes
– You want to show off (Travis calls this whimsy)
• Gold star
• +1
• … but don’t get in the way
WHAT CAN WE ANIMATE?
– Basic animations include
– Alpha
– Scale (x and y, x, y)
– Rotation (x, y, and z)
– Position (x, y)
– Complex animations can animate anything you can program…
– Custom Fragment transitions
– setCustomAnimations(int enter, int exit)
– setCustomAnimations(int enter, int exit, int popEnter, int popExit)
13
(3.2)
android:animateLayoutChanges="true" – Supports standard views and layouts
– ListView
– LinearLayout
– RelativeLayout
– Support for custom animations with LayoutTransition via setLayoutTransition(…) 11
(3.0)
INTERPOLATORS
– Determine the output value based on input
– Imagine animating from 0 to 1 over 100 frames
– Normally just 0, 0.01, 0.02, 0.03, …, 1
– Now, something else…
RE-RUNNING ANIMATIONS ON SAME VIEW
myListener = new SimpleAnimatorListener(){ @Override public void onAnimationEnd(Animator animation){ v.animate().scaleYBy(0.5f).start(); } }; v.animate().scaleY(2f).setListener(myListener).start(); .setListener(null)
VIEW COMPOSITING
– VideoView extends SurfaceView
– Behind the window
– Can’t be efficiently moved, scaled, rotated
– Can’t be rotated on X or Y axis at all
ALL THE INCOMPATIBILITY
– NineOldAndroids
– Open source!
– Hyper-compatible (all the way to 1.0)
– So much win!
• Doesn’t support animateLayoutChanges
• Doesn’t support LayoutTransition
• Doesn’t support selector animations
– ViewCompat
– [set]hasTransientState
ADDITIONAL RESOURCES
https://speakerdeck.com/dlew/i-can-animate-and-so-can-you
I Can Animate and So Can You
Daniel Lew
h"p://en.wikipedia.org/wiki/12_basic_principles_of_anima:on
12 Basic Principles of Animation
Wikipedia, the free encyclopedia
h"ps://www.youtube.com/watch?v=ihzZrS69i_s
Google I/O 2013: A Moving Experience
Chet Haase & Romain Guy