The document discusses patterns and techniques for animations and transitions in mobile applications to enhance the user experience. It covers view pager transformations, rotation effects, parallax scrolling, reacting to scroll updates, using paths and vector drawables for animations, activity transitions, and more. The goal is to help make apps more engaging for users through visual effects.

1. BEAUTY treatment for your
Mobile Application
Image
+JoseLuisUgiaGonzalez
@Jl_Ugia
#beautyTreatment #mobile #codemotion

2. Who are you?
Cloud computing
community
Side projects
Beer
business dev
mobile
Image Placeholder
Jose L Ugia
LOCK8
Wunderlist, Momenta,
Aureum Digital
#beautyTreatment #mobile #codemotion

3. The story
android != iOS
Image
+JoseLuisUgiaGonzalez
@Jl_Ugia
#beautyTreatment #mobile #codemotion

4. DO NOT Be a fan boy
Image
+JoseLuisUgiaGonzalez
@Jl_Ugia
#beautyTreatment #mobile #codemotion

5. patterns to
Make your app stand out
Help your users understand your app

6. VIEW PAGER

7. -1 1
void
transformPage(View page, float
position);
0

8. Slide Joy Effect
-3
0
3
-1 0 1
0
1
-1 0 1
0
10
-1 0 1
pivotX
scale
rotationY

9. rotation Effect
-0,5
0
0,5
-1
0
1
-1 0 1
0
1
-1 0 1
alpha
scale
translationX
sin(π/2) x 0.5

10. FX made easy
-3
0
3
-1 0 1
rotationY
private final float[] rotationYValues = new float[] { 0 , -­‐2.8f, 0, 2.8f, 0 };
private final float[] rotationYCuePoints = new float[] { -­‐.3f, -­‐.1f , 0, .1f , .3f };
0
1
-1 0 1
alpha
private final float[] alphaYValues = new float[] { 0 , 1 , 1 , 0 };
private final float[] alphaYCuePoints = new float[] { -­‐.7f, -­‐.5f, .5f, .7f };

11. float value =
Transitions.intermediateValueForRange(position, cuePoints,
values);

12. EFFECTS FOR EVERYONE
0
1
-1 0 1
value = 1
float value =
Transitions.intermediateValueForRange(0.4f, cuePoints, values);

13. OTHER RESOURCES
Jazzy Viewpager
Viewpager animations – Android developers
https://github.com/jfeinstein10/JazzyViewPager
http://developer.android.com/training/animation/screen-slide.html

14. Lists & collections
private RecyclerView recyclerView;
private ListView listView;
private ScrollView scrollView;

15. Lists & collections
void onScrolled(RecyclerView recyclerView, int dx, int dy);
void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount)
void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY)
scrollY += dy;
scrollY;
float headerScrollY = firstVisibleItem == 0 ? -­‐headerView.getTop() : headerViewHeight;
Recycler view
Scroll view
List view

16. Parallax
listOffset * parallaxRatio

17. float progress = scrollY / referenceScrollY;

18. Reacting to scroll updates
0
1
0
1
0 1
scale
-160
0
0
translationY

19. Using first visible item
List View
Recycler view
int firstVisibleItem
layoutManager.findFirstVisibleItemPosition();

20. Android Sliding Layer
Transformer
compile 'com.wunderlist:sliding-­‐layer:1.2.5'
void
transform(View view, float
previewProgress,
float
layerProgress);
Build.gradle

21. Sliding Layer Transformer
MAKE Your own
void
transform(View view, float
previewProgress,
float
layerProgress);
Built–IN transformers
slidingLayer.setLayerTransformer(new SlideJoyTransformer());
slidingLayer.setLayerTransformer(new RotationTransformer());
slidingLayer.setLayerTransformer(new AlphaTransformer());

22. https://github.com/wunderlist/android-sliding-layer-lib

23. Paths

24. <vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="@dimen/dynamic_header_list_user_avatar_size_big"
android:width="@dimen/dynamic_header_list_user_avatar_size_big"
android:viewportHeight="100"
android:viewportWidth="100">
<path
android:name="right-­‐semi-­‐circle"
android:strokeColor="@color/grey"
android:strokeWidth="2"
android:pathData="M51,1 C77.61,1 100,23.39 100,51 C100,78.61 77.61,101 50,101"/>
<path
android:name="left-­‐semi-­‐circle"
android:strokeColor="@color/grey"
android:strokeWidth="2"
android:pathData="M51,101 C23.39,101 1,78.61 1,51 C1,23.39 23.39,1 51,1"/>
</vector>
Paths
vector drawable –> from svg
http://inloop.github.io/svg2android/

25. <set
xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="together">
<objectAnimator
android:propertyName="trimPathStart"
android:valueFrom="0.5"
android:valueTo="0"
android:valueType="floatType"
android:duration="350"
android:interpolator="@android:interpolator/decelerate_quint"/>
<objectAnimator
android:propertyName="trimPathEnd"
android:valueFrom="0.5"
android:valueTo="1"
android:valueType="floatType"
android:duration="350"
android:interpolator="@android:interpolator/decelerate_quint"/>
</set>
Paths
Object Animator / Animator set

26. Paths
Animated Vector drawable
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/circle_stroke">
<target
android:name="left-semi-circle"
android:animation="@animator/stroke_appear_from_center"/>
<target
android:name="right-semi-circle"
android:animation="@animator/stroke_appear_from_center"/>
</animated-vector>

27. int drawableResource = R.drawable.circle_stroke_animated_show;
AnimatedVectorDrawable drawable = (AnimatedVectorDrawable) getResources()
.getDrawable(drawableResource);
ImageView imageView = (ImageView) findViewById(R.id.imageview);
imageView.setImageDrawable(drawable);
drawable.start();
Paths
Trigger!

28. PRO – paths: Swipe to refresh
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
0

29. Android Support Library 23.2
// Gradle Plugin 2.0+
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
VectorDrawableCompat 7
AnimatedVectorDrawableCompat 11

30. There is more
Animations
View Property transformations
Activity Transitions
coordinator layout

31. DO NOT
FEAR!
It’s not objective–c It’s not a product manager

32. making apps more lovable

33. ThankYou!
Image Placeholder
Jose
L
Ugia
LOCK8,
Wunderlist,
Momenta,
Aureum
Digital
+JoseLuisUgiaGonzalez@Jl_Ugia
#beautyTreatment #mobile #codemotion
…and we are hiring!
https://github.com/JlUgia/beauty-treatment-android-animations
https://speakerdeck.com/jlugia/beauty-treatment-for-your-mobile-application

34. License
(cc)2016JoseUgiaGonzalez.Somerightsreserved.Thisdocumentis
distributedundertheCreativeCommonsAttribution-ShareAlike3.0license,
availableonhttp://creativecommons.org/licenses/by-sa/3.0/.
AlldevicescreenshotsusedbelongtoGoogleIncandAppleInc.