Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Beauty Treatment for Your Mobile Application

Jose L
October 02, 2015

Beauty Treatment for Your Mobile Application

Repository: https://github.com/JlUgia/beauty-treatment-android-animations

It is time to take advantage of the new tools to draw and animate, design guidelines and a few tricks and recipes to make your mobile application stand out from the rest.

Join me to speak about how to make your application look different by adding subtle effects that are appealing to the eye and the overall experience of your users.

Get your hands dirty with animations, updating layouts on scrolling events, and playing with shapes. You shall not regret it!

Jose L

October 02, 2015
Tweet

More Decks by Jose L

Other Decks in Technology

Transcript

  1. Who are you? Cloud computing community Side projects Beer business

    dev mobile Image Placeholder Jose L Ugia LOCK8 Wunderlist, Momenta, Aureum Digital #beautyTreatment #mobile #devfest
  2. Slide Joy Effect -3 0 3 -1 0 1 0

    1 -1 0 1 0 10 -1 0 1 pivotX scale rotationY
  3. 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
  4. 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  };
  5. efectos para todos 0 1 -1 0 1 value  =

     1 float  value  =     Transitions.intermediateValueForRange(0.4f,  cuePoints,  values);
  6. 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
  7. Reacting to scroll updates 0 1 0 1 0 1

    scale -160 0 0 translationY
  8. Using first visible item List View Recycler view int  firstVisibleItem

    layoutManager.findFirstVisibleItemPosition();
  9. 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());
  10. <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/
  11. 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>
  12. <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
  13. PRO – paths: Swipe to refresh 1 2 3 4

    5 6 7 8 9 10 11 12 13 14 15 16 1 0
  14. Thank You! Image Placeholder Jose  L  Ugia LOCK8,  Wunderlist,  Momenta,

     Aureum  Digital +JoseLuisUgiaGonzalez @Jl_Ugia #beautyTreatment #mobile #devfest …and we are hiring! https://github.com/JlUgia/beauty-treatment-android-animations