13

Friday, May 17, 13

A Moving Experience
Better Animation in Android Applications

Romain Guy

Chet Haase

13

Friday, May 17, 13

Why?

2 Friday, May 17, 13

Connect the user to the application. Keep them plugged into whats happening. Help them understand what could be a confusing UI experience.

Why?
Engage

2 Friday, May 17, 13

Connect the user to the application. Keep them plugged into whats happening. Help them understand what could be a confusing UI experience.

Why?
Engage Inform

2 Friday, May 17, 13

Connect the user to the application. Keep them plugged into whats happening. Help them understand what could be a confusing UI experience.

Elements of Good Animations

Friday, May 17, 13

Short

4 Friday, May 17, 13

Dont make the user wait. Make them only long enough to get the point across. Example: window animations that start most of the way through.

5 Friday, May 17, 13

Stuttery animations are worse than no animations at all. make sure you tune your graphics performance to make them feel smooth. do expensive operations (e.g., layout) before you start. Make the durations match the distance and complexity needed.

Smooth

5 Friday, May 17, 13

Stuttery animations are worse than no animations at all. make sure you tune your graphics performance to make them feel smooth. do expensive operations (e.g., layout) before you start. Make the durations match the distance and complexity needed.

6 Friday, May 17, 13

Animations should feel good and normal, not amazing and bizarre. Theyre there to help the user, not confound them. Most animations shouldnt event be noticeable to the user, theyre so well integrated into the experience.

Natural
6 Friday, May 17, 13

Animations should feel good and normal, not amazing and bizarre. Theyre there to help the user, not confound them. Most animations shouldnt event be noticeable to the user, theyre so well integrated into the experience.

7 Friday, May 17, 13

Dont use them because theyre nifty - use them to accomplish things: transitioning the user, helping inform them of things they should know about, engaging their attention, reacting to input, ...

Arbitrary

7 Friday, May 17, 13

Dont use them because theyre nifty - use them to accomplish things: transitioning the user, helping inform them of things they should know about, engaging their attention, reacting to input, ...

l u f e s o p r u P
Arbitrary

7 Friday, May 17, 13

Dont use them because theyre nifty - use them to accomplish things: transitioning the user, helping inform them of things they should know about, engaging their attention, reacting to input, ...

Samples

Friday, May 17, 13

Demos to help you understand how to accomplish common use cases in Android applications

List Animation

9 Friday, May 17, 13

Demo: ListViewRemovalAnimations Animating the swipe and animating closing the gap.

Animating ListView Item Changes

adapter.remove(item); foreach (child in listview) { child.setHasTransientState(true); // get pre-layout location } ViewTreeObserver observer = listview.getViewTreeObserver(); observer.addOnPreDrawListener(new OnPreDrawListener() { public boolean onPreDraw() { observer.removeOnPreDrawListener(this); foreach (child in listview) { // get post-layout location int deltaY = preLayoutTop - postLayoutTop; child.setTranslationY(deltaY); child.animate().translationY(0); child.setHasTransientState(false); } return true; } });
Friday, May 17, 13

10

[pseudo]code at the heart of animating ListView items

Activity Animations

11 Friday, May 17, 13

Demo: ActivityAnimations Going [way] beyond what window animations provide. Idea: launch the activity without window animations, then do whatever you want.

Activity Animations: Launching Activity

Intent subActivity = new Intent(...); subActivity.putExtra("package.propertyname1", val1). putExtra("package.propertyname2", val2); startActivity(subActivity); overridePendingTransitions(0, 0);
12 Friday, May 17, 13

core code to launch sub-activity with custom activity animations

Activity Animations: Launched Activity

AndroidManifest.xml
<activity android:name="..." android:label="..." android:theme="@style/Transparent" > </activity>

styles.xml
<style name="Transparent"> <item name="android:windowIsTranslucent">true</item> <item name="android:windowBackground">@null</item> </style>

13 Friday, May 17, 13

Make the sub-activity window transparent

Activity Animations: Launched Activity (2)

public void onCreate(Bundle savedInstanceState) { // ... Bundle bundle = getIntent().getExtras(); String val1 = bundle.getString("packagename.propertyname1"); int val2 = bundle.getInt("packagename.propertyname2"); if (savedInstanceState == null) { ViewTreeObserver observer = mImageView.getViewTreeObserver(); observer.addOnPreDrawListener(new OnPreDrawListener() { public boolean onPreDraw() { // Get post-layout view locations/sizes // setup/run animations } }); } }
14 Friday, May 17, 13

extract the data from the Bundle and animate into the new activity appropriately

Cartoon Animation Techniques

Friday, May 17, 13

Techniques from classic cartoon animation, applied to UIs

Squash and Stretch

16 Friday, May 17, 13

Deforming objects adds life and nature. Adds fun.

Timing

17 Friday, May 17, 13

Refers to both non-linear timing (ease in/out), to get more natural feel of animations, as well as appropriate timing of interactions. For example, a button press should be very quick; a slow animation would be horrible. Demo: SquashAndStretch (show squash&stretch *and* Timing)

Timing

Squ Dem ash o! &S tre tc

17 Friday, May 17, 13

Refers to both non-linear timing (ease in/out), to get more natural feel of animations, as well as appropriate timing of interactions. For example, a button press should be very quick; a slow animation would be horrible. Demo: SquashAndStretch (show squash&stretch *and* Timing)

Anticipation

18 Friday, May 17, 13

The action *before* the animation helps the user understand what is going to happen. Examples: rearing back before running. In cartoons, this was important because the action was very quick; if the user didnt understand quickly what was happening, theyd get lost. Anticipation helps indicate the action.

Anticipation

18 Friday, May 17, 13

The action *before* the animation helps the user understand what is going to happen. Examples: rearing back before running. In cartoons, this was important because the action was very quick; if the user didnt understand quickly what was happening, theyd get lost. Anticipation helps indicate the action.

Follow Through and Overlapping Action

19 Friday, May 17, 13

In life, we dont just stop when we hit things. Gravity, momentum, and physical structure of objects makes us continue in the path of motion, and maybe bounce back. More organic, natural animations can use this technique, too. 2 Demos: LiveButton & Anticipation (anticipation: button reacting to press. follow through: button overshooting at end of animation)

Follow Through and Overlapping Action

De Liv mos eBu ! tto n An & tici pat ion

19 Friday, May 17, 13

In life, we dont just stop when we hit things. Gravity, momentum, and physical structure of objects makes us continue in the path of motion, and maybe bounce back. More organic, natural animations can use this technique, too. 2 Demos: LiveButton & Anticipation (anticipation: button reacting to press. follow through: button overshooting at end of animation)

Non-Linear Motion

20 Friday, May 17, 13

Objects in our world dont travel in straight lines. The shortest path is a straight line, but the most realistic one is a curve. Demo: CurvedMotion

Non-Linear Motion

Cu Dem rve o! dM oti on

20 Friday, May 17, 13

Objects in our world dont travel in straight lines. The shortest path is a straight line, but the most realistic one is a curve. Demo: CurvedMotion

21 Friday, May 17, 13

Emphasizing a point, or having fun with it, by doing more of it. In cartoons, really big features, or a really major squash to get a rubbery feel. Again, you wanted the viewer to understand quickly things about the characters and the actions in the cartoons. Demo: ToonGame

Exagggggggggggggggggggeration

21 Friday, May 17, 13

Emphasizing a point, or having fun with it, by doing more of it. In cartoons, really big features, or a really major squash to get a rubbery feel. Again, you wanted the viewer to understand quickly things about the characters and the actions in the cartoons. Demo: ToonGame

Exagggggggggggggggggggeration

De Too nG

mo !

am e

21 Friday, May 17, 13

Emphasizing a point, or having fun with it, by doing more of it. In cartoons, really big features, or a really major squash to get a rubbery feel. Again, you wanted the viewer to understand quickly things about the characters and the actions in the cartoons. Demo: ToonGame

Tips

Friday, May 17, 13

Avoid Layout

23 Friday, May 17, 13

Layout is expensive. Avoid running it during each animation frame, especially for complex view hierarchies. Its okay to run it once at the beginning, to measure where things are going to be, but then animate using another approach (like translationX, translationY, as in ListViewRemovalAnimations).

ViewTreeObserver

24 Friday, May 17, 13

OnPreDrawListener: Great technique to run layout, but then capture the pre/post values just prior to drawing and animate them from start to nish.

Layers

25 Friday, May 17, 13

Performance tip: set a layer on complex views or layouts during animations on those objects.

Parleys.com Animation Rules (Devoxx 2009) Youtube.com DevBytes (androiddevelopers channel)

More info
Friday, May 17, 13

The Illusion of Life Thomas and Johnston Chets Tips & Tricks graphics-geek.blogspot.com Romains Tips & Tricks www.curious-creature.org

More info
Friday, May 17, 13

google.com/+ChetHaase google.com/+RomainGuy

@chethaase @romainguy

Q&A
Friday, May 17, 13

Developers

Friday, May 17, 13