Beauty Treatment for Your Mobile Application

Transcript

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

   View Slide

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 #devfest
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. VIEW PAGER
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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  };
    

    View Slide

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

    View Slide

12. efectos para todos
    0
    1
    -1 0 1
    value  =  1
    float  value  =    
    Transitions.intermediateValueForRange(0.4f,  cuePoints,  values);
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

16. Parallax
    listOffset  *  parallaxRatio
    

    View Slide

17. float  progress  =  scrollY  /  referenceScroll;
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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());
    

    View Slide

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

    View Slide

23. Paths
    

    View Slide

24.                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">

    

                                   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"/>

    

                                   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"/>

     
    Paths
    vector drawable –> from svg
    http://inloop.github.io/svg2android/
    

    View Slide

25. Paths
    Animated Vector drawable
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:drawable="@drawable/circle_stroke">

    

    android:name="left-semi-circle"

    android:animation="@animator/stroke_appear_from_center"/>

    

    android:name="right-semi-circle"

    android:animation="@animator/stroke_appear_from_center"/>

    

    
    

    View Slide

26. xmlns:android="http://schemas.android.com/apk/res/android"

    android:ordering="together">

    

    android:propertyName="trimPathStart"

    android:valueFrom="0.5"

    android:valueTo="0"

    android:valueType="floatType"

    android:duration="350"

    android:interpolator="@android:interpolator/decelerate_quint"/>

    

    android:propertyName="trimPathEnd"

    android:valueFrom="0.5"

    android:valueTo="1"

    android:valueType="floatType"

    android:duration="350"

    android:interpolator="@android:interpolator/decelerate_quint"/>

    

    
    Paths
    Object Animator / Animator set
    

    View Slide

27. AnimatedVectorDrawable drawable = (AnimatedVectorDrawable) getResources()
    .getDrawable(R.drawable.circle_stroke_animated_show);
    ImageView imageView = (ImageView) findViewById(R.id.imageview);
    imageView.setImageDrawable(drawable);
    

    drawable.start();
    Paths
    Trigger!
    

    View Slide

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

    View Slide

29. http://inloop.github.io/svg2android/
    

    View Slide

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

    View Slide

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

    View Slide

32. making apps more lovable
    

    View Slide

33. 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
    

    View Slide