Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

VIEW PAGER

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Parallax listOffset  *  parallaxRatio

Slide 17

Slide 17 text

float  progress  =  scrollY  /  referenceScroll;

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Paths

Slide 24

Slide 24 text


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

Slide 25

Slide 25 text

Paths Animated Vector drawable 
 
 
 
 
 


Slide 26

Slide 26 text


 
 
 
 
 
 Paths Object Animator / Animator set

Slide 27

Slide 27 text

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!

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

There is more Animations View Property transformations Activity Transitions coordinator layout

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

making apps more lovable

Slide 33

Slide 33 text

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