preface

For now, most users are already using 5.0 mobile phones, and 4.4 and below are very few. Therefore, we have a reason to bring our app to Material Design. An important aspect of Material Design is animation.

Ripple- Touch feedback

By default, those that inherit the MeaterialDesign theme have feedback effects. The system has two default implementations

  • ? Android: attr/selectableItemBackground specified bounded ripples
  • ? Android: attr/selectableItemBackgroundBorderless specified ripple across the view borders

Come with bounded effects

Built-in unbounded effect

One has a boundary, one has no boundary. Of course, in some cases we may not be satisfied with what the system provides, in which case we can choose to define ourselves first under drawable. The simplest one is this

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorAccent"
    >
</ripple>Copy the code

Custom unbounded and unmasked effect

The effect above is unbounded. So, how do we define a bounded? We just need to add an item to the ripple, and that item is our boundary.

<? The XML version = "1.0" encoding = "utf-8"? > <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent" > <item android:drawable="@color/colorPrimary"/> </ripple>Copy the code

Custom bounded no mask effect

So, since our boundary item is a drawable, we can certainly choose another type of drawable as our boundary. Shape, image. So, our control is dyed the color of item. How do we get rid of this color? Android :id= “@android:id/mask”.

` ` ` <? The XML version = "1.0" encoding = "utf-8"? > <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent" > <item android:drawable="@color/colorPrimary" android:id="@android:id/mask"/> </ripple>Copy the code
When we set the mask, the default is hidden pull. Custom bounded mask effect! [custom bounded have mask effect] (https://github.com/Guolei1130/blog_resource/blob/master/art/md_anim/custom_youjie_mask.gif?raw=true) So much for touch feedback. # # # Circular pass Reveal - exposed effect this effect, very simple, we only need ViewAnimationUtils. CreateCircularReveal this API to create an Animator.Copy the code
circularRevealView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Animator animator = ViewAnimationUtils.createCircularReveal(circularRevealView,circularRevealView.getWidth(), circularRevealView.getHeight(),0, (float) Math.hypot(circularRevealView.getWidth(), circularRevealView.getHeight())); animator.setDuration(3000); animator.start(); }}});Copy the code
The parameters are the starting point, the starting radius and the final radius, which in this case, in the lower right corner, is the hypotenuse length. Renderings:! [](https://github.com/Guolei1130/blog_resource/blob/master/art/md_anim/ciecular_reveal.gif?raw=true) ### This was added to the 4.4 release, with a few animations added to 5.0. So what is a Scene? We can View it as a collection of views. We animate a series of views. This is usually triggered when the View state changes, such as show hide. So how do we use it? We can choose to create the Scene or not create the Scene, which is managed by the TransitionManager.Copy the code
final Slide slide = new Slide();
final Fade fade = new Fade();
findViewById(R.id.anim).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
Copy the code

// TransitionManager.beginDelayedTransition((ViewGroup) findViewById(R.id.sssss),new Fade());

// findViewById(R.id.anim).setVisibility(View.INVISIBLE);

TransitionManager.go(scene,slide); findViewById(R.id.anim).setVisibility(View.INVISIBLE); circularRevealView.setVisibility(View.INVISIBLE); }}); findViewById(R.id.reset).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { TransitionManager.go(scene,fade); findViewById(R.id.anim).setVisibility(View.VISIBLE); circularRevealView.setVisibility(View.VISIBLE); }});Copy the code
This is just the simplest effect, and you can explore further uses. Let's see what happens. ! [] (https://github.com/Guolei1130/blog_resource/blob/master/art/md_anim/Transition.gif?raw=true) # # # Shared Element - Shared elements We can create shared element animations using the ActivityOptionsCompant compatible class, which has the following apis! [] (https://github.com/Guolei1130/blog_resource/blob/master/art/md_anim/shareelement.png?raw=true), respectively, to create different types of elements sharing the animation. Let's take a simple example.Copy the code
Bundle bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this,
        crView, "cr")
        .toBundle();
Intent intent = new Intent(MainActivity.this, ShareEleActivity.class);
startActivity(intent, bundle);
Copy the code

` ` `

Android :transitionName= “cr” to tell the system that the View with the same transitionName is overdone. Let’s see what happens.

There are many shared element animations, I did not say in detail here, we are interested in their own research.

The resources

Animated Transitions

Android Transition animation framework

Recent visitors