Material Animations: show me the code! (Codemotion 2015)

Slide 1

Slide 1 text

Material Animations Show me the code! @lgvalle lgvalle.xyz

Slide 2

Slide 2 text

Why animate?

Slide 3

Slide 3 text

The Elevator Tale how to avoid user frustration

Slide 4

Slide 4 text

Why animate? London

Slide 5

Slide 5 text

Why animate? Nova

Slide 6

Slide 6 text

Why animate? The elevator

Slide 7

Slide 7 text

Why animate? Frustration

Slide 8

Slide 8 text

Animations teach what is happening · what can i do

Slide 9

Slide 9 text

Where things go? What can I do? Where am I? Where things come from?

Slide 10

Slide 10 text

https://medium.com/@BashaChris/overhauling-the-twitter-experience-on-android-80f5b09e7c67 Overhauling the Twitter Experience on Android Where things come Where things go? Where am I? What can I do?

Slide 11

Slide 11 text

Where things come Where things go? Where am I? What can I do?

Slide 12

Slide 12 text

Where things come Where things go? Where am I? What can I do?

Slide 13

Slide 13 text

Where things come Where things go? Where am I? What can I do?

Slide 14

Slide 14 text

Where things come Where things go? Where am I? What can I do?

Slide 15

Slide 15 text

What can be animated? Layout content Shared elements View Properties x

Slide 16

Slide 16 text

Property Animation System  (API 12) View property changes Transition Framework  (API 19) View property changes Layout changes ViewAnimationUtils  (API 21) CircularReveal Activity Transitions Fragment Transitions How can we animate?

Slide 17

Slide 17 text

Property Animation System (API 12) View property changes Transition Framework  (API 19) View property changes Layout changes ViewAnimationUtils (API 21) CircularReveal Activity Transitions Fragment Transitions How can we animate?

Slide 18

Slide 18 text

Animate screen transitions exit · enter · shared startActivity(B) A Exit Enter A B B … B Return Reenter B A A … back()

Slide 19

Slide 19 text

startActivity(B) A Exit Transition Enter  Transition A B B B Return  Transition Reenter  Transition B A A back()

Slide 20

Slide 20 text

startActivity(B) A Exit Transition Enter  Transition A B B B Return  Transition Reenter  Transition B A A Default:   Cross-fade back() Default:   Reversed enter/exit

Slide 21

Slide 21 text

startActivity(B) A Exit Transition Enter  Transition A B B B Return  Transition Reenter  Transition B A A Default:   Cross-fade back() Default:   Reversed enter/exit But you can customise!

Slide 22

Slide 22 text

Explode Slide Fade Activity transition custom effects

Slide 23

Slide 23 text

startActivity(B) A Exit Transition Enter  Transition A B B B Return  Transition Reenter  Transition B A A back()

Slide 24

Slide 24 text

startActivity(B) A Exit Transition Enter  Transition A B B B Return  Transition Reenter  Transition B A A back()

Slide 25

Slide 25 text

> activities/Activity_A.java @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);   Explode explode = new Explode(); getWindow().setExitTransition(explode); }  Exit Transition @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_details);  }  > activities/Activity_B.java

Slide 26

Slide 26 text

Slide 27

Slide 27 text

startActivity(B) A Exit Transition Enter  Transition A B B B Return  Transition Reenter  Transition B A A back()

Slide 28

Slide 28 text

startActivity(B) A Exit Transition Enter  Transition A B B B Return  Transition Reenter  Transition B A A back() Default:  Transitions   Overlap

Slide 29

Slide 29 text

> activities/Activity_A.java @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);   Explode explode = new Explode(); getWindow().setExitTransition(explode); }  Disable Overlap @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_details);  }  > activities/Activity_B.java

Slide 30

Slide 30 text

> activities/Activity_A.java @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);   Explode explode = new Explode(); getWindow().setExitTransition(explode); }  Disable Overlap @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_details); getWindow().setAllowEnterTransitionOverlap(false);  }  > activities/Activity_B.java

Slide 31

Slide 31 text

> activities/Activity_A.java @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);   Explode explode = new Explode(); getWindow().setExitTransition(explode); }  Disable Overlap @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_details); getWindow().setAllowEnterTransitionOverlap(false);  }  > activities/Activity_B.java

Slide 32

Slide 32 text

> activities/Activity_A.java @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);   Explode explode = new Explode();  explode.excludeTarget(R.id.toolbar, true); getWindow().setExitTransition(explode); }  Exclude Views @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_details);  getWindow().setAllowEnterTransitionOverlap(false);  }  > activities/Activity_B.java

Slide 33

Slide 33 text

> activities/Activity_A.java @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);   Explode explode = new Explode();  explode.excludeTarget(R.id.toolbar, true); getWindow().setExitTransition(explode); }  Exclude Views @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_details);  getWindow().setAllowEnterTransitionOverlap(false);  }  > activities/Activity_B.java

Slide 34

Slide 34 text

startActivity(B) A Exit Transition Enter  Transition A B B B Return  Transition Reenter  Transition B A A back()

Slide 35

Slide 35 text

startActivity(B) A Exit Transition Enter  Transition A B B B Return  Transition Reenter  Transition B A A back()

Slide 36

Slide 36 text

> activities/Activity_A.java @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);   Explode explode = new Explode();  explode.excludeTarget(R.id.toolbar, true); getWindow().setExitTransition(explode); }  @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_details);  getWindow().setAllowEnterTransitionOverlap(false);  }  > activities/Activity_B.java Return Transition

Slide 37

Slide 37 text

> activities/Activity_A.java @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);   Explode explode = new Explode();  explode.excludeTarget(R.id.toolbar, true); getWindow().setExitTransition(explode); }  Return Transition @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_details);  getWindow().setAllowEnterTransitionOverlap(false);    Slide slide = new Slide(Gravity.RIGHT);  getWindow().setReturnTransition(slide);  }  > activities/Activity_B.java

Slide 38

Slide 38 text

startActivity(B) A Exit Transition Enter  Transition A B B B Return  Transition Reenter  Transition B A A back() Shared Element   has its own transitions Reversed shared element transition

Slide 39

Slide 39 text

res/values/styles.xml <item name=“android:windowContentTransitions”>true</ item> … 1. Enable content transition activities/Activity_A.java @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState); getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);  … }  -OR-

Slide 40

Slide 40 text

    2. Common Transition Name

Slide 41

Slide 41 text

    2. Common Transition Name

Slide 42

Slide 42 text

> activities/Activity_A.java Intent i = new Intent(this, Activity_B.class);    ActivityOptions options = ActivityOptions .makeSceneTransitionAnimation( this, rowView, // shared element view "rowName"); // common transition name   startActivity(i, options.toBundle());  3. Start Activity (with options)

Slide 43

Slide 43 text

startActivity(B) A Exit Transition Enter  Transition A B B B Return  Transition Reenter  Transition B A A back() Transition Listener Transition Listener

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Transition Listener > activities/Activity_B.java   @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_details);  getWindow().setAllowEnterTransitionOverlap(false);    getWindow().getEnterTransition() .addListener(new TransitionListener() {  @Override  public void onTransitionEnd(Transition t) {  fab.setVisibility(View.VISIBLE); fade.removeListener(this);  } …  });  }  Don’t forget!

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Animate screen elements property changes · circular reveal

Slide 48

Slide 48 text

fabView .animate() .alpha(1); (API 12+) Property animation system

Slide 49

Slide 49 text

fabView .animate() .alpha(1) .scaleX(1f) .scaleY(1f); (API 12+) Property animation system

Slide 50

Slide 50 text

fabView .animate() .alpha(1) .scaleX(1f) .scaleY(1f) .setDuration(500)  .setStartDelay(300)  .setInterpolator(…)  .setListener(…); (API 12+) Property animation system

Slide 51

Slide 51 text

> activities/Activity_B.java Transition fade = getWindow().getEnterTransition();  fade.addListener(new TransitionListener() {  public void onTransitionEnd(Transition t) {  fab.setVisibility(View.VISIBLE); fade.removeListener(this); }  }); public void onBackPressed() {  fab.setVisibility(View.INVISIBLE);  finishAfterTransition(); } (API 12+) Property animation system

Slide 52

Slide 52 text

> activities/Activity_B.java Transition fade = getWindow().getEnterTransition();  fade.addListener(new TransitionListener() {  public void onTransitionEnd(Transition t) {  fab.animate() .scaleX(1f) .scaleY(1f) fade.removeListener(this); }  }); public void onBackPressed() {  fab.animate() .scaleX(0f) .scaleY(0f)  .withEndAction(new Runnable() {  @Override  public void run() {  finishAfterTransition();  }  }); } (API 12+) Property animation system

Slide 53

Slide 53 text

> activities/Activity_B.java Transition fade = getWindow().getEnterTransition();  fade.addListener(new TransitionListener() {  public void onTransitionEnd(Transition t) {  fab.animate() .scaleX(1f) .scaleY(1f) fade.removeListener(this); }  }); public void onBackPressed() {  fab.animate() .scaleX(0f) .scaleY(0f)  .withEndAction(new Runnable() {  @Override  public void run() {  finishAfterTransition();  }  }); } (API 12+) Property animation system

Slide 54

Slide 54 text

What about complex animations?

Slide 55

Slide 55 text

TransitionManager.beginDelayedTransition StartTransition Transition Manager

Slide 56

Slide 56 text

StartTransition Save Start State TransitionManager.beginDelayedTransition Transition Manager

Slide 57

Slide 57 text

StartTransition Capture end state Save Start State TransitionManager.beginDelayedTransition Transition Manager

Slide 58

Slide 58 text

StartTransition Capture end state Animate difference Save Start State TransitionManager.beginDelayedTransition Transition Manager

Slide 59

Slide 59 text

public void onClickFab() { Transition transition = TransitionInflater.from(this) .inflateTransition(R.transition.changebounds_with_arcmotion); TransitionManager .beginDelayedTransition(viewRoot, transition);  fab.setLayoutParams( new RelativeLayout.LayoutParams( WRAP_CONTENT, WRAP_CONTENT, CENTER_HORIZONTAL, ALIGN_PARENT_BOTTOM) ); } Fab Transition

Slide 60

Slide 60 text

Slide 61

Slide 61 text

activities/TargetActivity.java         > res/transitions/changebounds_with_arcmotion.xml

Slide 62

Slide 62 text

Slide 63

Slide 63 text

Slide 64

Slide 64 text

Slide 65

Slide 65 text

Title A Title A Title A Title B Bacon ipsum dolor amet sausage bacon pork chop strip steak cow porchetta landjaeger ham sirloin swine leberkas prosciutto turducken ball tip. Pork chop kielbasa shank cow, pig corned beef hamburger Circular Reveal Animation

Slide 66

Slide 66 text

ViewAnimationUtils .createCircularReveal( view, x, y, initialRadius, finalRadius); Circular Reveal Animation

Slide 67

Slide 67 text

ViewAnimationUtils .createCircularReveal( viewGroup, x, y, initialRadius, finalRadius); Circular Reveal Animation

Slide 68

Slide 68 text

ViewAnimationUtils .createCircularReveal( view, x, y, 0f, Math.hypot(…)); Circular Reveal Animation

Slide 69

Slide 69 text

Circular Reveal Animation int x = (view.getLeft() + view.getRight()) / 2;  int y = (view.getTop() + view.getBottom()) / 2;  int startRadius = 0; int endRadius = Math.hypot(x, y);   Animator anim = ViewAnimationUtils .createCircularReveal( view,   x, y, startRadius, endRadius); view.setVisibility(View.VISIBLE); anim.start(); (x,y) left right top bottom hypot

Slide 70

Slide 70 text

(…) transition.addListener(new Transition.TransitionListener() {  @Override  public void onTransitionEnd(Transition transition) {  fab.setVisibility(View.GONE);  createRevealForView(extraContent);  }  }); private Animator createRevealForView(ViewGroup view) { int x = (viewRoot.getLeft() + viewRoot.getRight()) / 2;  int y = viewRoot.getBottom() - fab.getHeight();  float finalRadius = (float) Math.hypot(x, y);    Animator anim = ViewAnimationUtils .createCircularReveal(viewRoot, x, y, fab.getWidth(), finalRadius); viewRoot.setVisibility(View.VISIBLE);  anim.start();  } Circular Reveal Animation

Slide 71

Slide 71 text

- Shared element Transition - Transition Listener - Enter / Exit Transition - Property Animation System - Transition Manager - Circular Reveal

Slide 72

Slide 72 text

Pasquale D’Silva: Designing with animation  https://youtu.be/TMe0WnkF1Lc Material Animations: Code Samples  https://github.com/lgvalle/Material-Animations Alex Lockwood: Transition Framework  http://goo.gl/y4ZSsp Saul Molinero: User interface   http://goo.gl/8gex9n Material Witness: How Android material applications work  https://youtu.be/97SWYiRtF0Y Chris Basha: Overhauling the Twitter Experience on Android  https://goo.gl/F281b2 Resources