13 Friday, May 17, 13

13
Friday, May 17, 13
A Moving Experience
Better Animation in Android Applications
Romain Guy
Friday, May 17, 13
Chet Haase
13
Why?
2
Friday, May 17, 13
Why?
Engage
2
Friday, May 17, 13
Why?
Engage
Inform
2
Friday, May 17, 13
Elements of Good Animations
Friday, May 17, 13
Short
4
Friday, May 17, 13
5
Friday, May 17, 13
Smooth
5
Friday, May 17, 13
6
Friday, May 17, 13
Natural
6
Friday, May 17, 13
7
Friday, May 17, 13
Arbitrary
7
Friday, May 17, 13
l
u
f
e
s
o
p
r
u
P
Arbitrary
7
Friday, May 17, 13
Samples
Friday, May 17, 13
List Animation
9
Friday, May 17, 13
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
Activity Animations
11
Friday, May 17, 13
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
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
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
Cartoon Animation Techniques
Friday, May 17, 13
Squash and Stretch
16
Friday, May 17, 13
Timing
17
Friday, May 17, 13
Timing
Squ Dem
ash o!
&S
tre
tc
h
17
Friday, May 17, 13
Anticipation
18
Friday, May 17, 13
Anticipation
18
Friday, May 17, 13
Follow Through and
Overlapping Action
19
Friday, May 17, 13
Follow Through and
Overlapping Action
De
Liv mos
eBu !
tto
n
An &
tici
pat
ion
19
Friday, May 17, 13
Non-Linear Motion
20
Friday, May 17, 13
Non-Linear Motion
Cu Dem
rve o!
dM
oti
on
20
Friday, May 17, 13
21
Friday, May 17, 13
Exagggggggggggggggggggeration
21
Friday, May 17, 13
Exagggggggggggggggggggeration
De
Too
nG
mo
!
am
e
21
Friday, May 17, 13
Tips
Friday, May 17, 13
Avoid Layout
23
Friday, May 17, 13
ViewTreeObserver
24
Friday, May 17, 13
Layers
25
Friday, May 17, 13
Parleys.com
Animation Rules (Devoxx 2009)
Youtube.com
DevBytes (androiddevelopers channel)
More info
Friday, May 17, 13
The Illusion of Life
Thomas and Johnston
Chet’s Tips & Tricks
graphics-geek.blogspot.com
Romain’s 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