Android Material Design Animation

Android Material Design Animation

I recently read some things about Material Design. I still remember that in my blog "Activity transition animation you don't know -- ActivityOptions", we introduced an elegant activity over-animation. If you read the final reference link, you will find that there are still many things worth learning. So in this blog, let's take a look at the remaining things on this page.

I. Touch feedback

As we all know, in Material Design, the effect of touch feedback is brilliant and ripple. We are glad that this effect can also be customized.

The above Code defines two buttons. The difference is their background attribute,selectableItemBackgroundRepresentsWhen clicked, a ripple effect will occur in the current Button area., AndselectableItemBackgroundBorderlessEffectNot limited to the size of the Button itself. Of course, although it is a big vernacular, it is still not easy to understand. Let's see the effect at a glance.

Well, the effect is very good, but can this background be customized? The answer is yes, so we need to introduce a newDrawable-RippleDrawable.RippleDrawableIs a newly added category of android5.DrawableIts effect is the ripple effect we have been talking about. Let's take a look at it.RippleDrawable. SinceRippleDrawableAlsoDrawableSo it can certainly be defined in xml. Let's look at the code,

We create two xml files in the drawable directory, both of which are ripple-type. We can see that their root nodes are ripple. The only difference between the two files is that the second id specifies that an id is@android:id/maskThe difference between the two is,

If you do not specify the id@android:id/mask, The drawable specified by item is displayed on the homepage.
If the specified id is@android:id/maskThe drawable is not displayed by default, but appears when you click it.

How to use it? You only need to specify the background of the control.

Let's see how it works,

By observing the results, we can find that,

The ripple effect occurs in the non-transparent area of the drawable for the item. When the id of the specified item is @android:id/maskThe Default background is not displayed.

OK. Now, we have learned the ripple effect of custom clicks. We continue to learn, and then we will have a better effect.

Ii. Reveal Effect Display Effect

The new sdk provides a class-ViewAnimationUtilsThis class provides a static method.createCircularRevealThrough this method, we can give any layout or view a ripple display or disappearance process. First, let's take a look at the effect to be achieved,

The results are really good. How should I write the code? In fact, it is very simple, mainly because we are going to learnViewAnimationUtilsAnd its only MethodcreateCircularReveal,

public void change(View view) {    int centerX = mImageView.getWidth() / 2;    int centerY = mImageView.getHeight() / 2;    int maxRadius = Math.max(mImageView.getWidth(), mImageView.getHeight());    if(mImageView.getVisibility() == View.VISIBLE) {        Animator anim = ViewAnimationUtils.createCircularReveal(mImageView,                centerX, centerY, maxRadius, 0);        anim.setDuration(1000);        anim.addListener(new AnimatorListenerAdapter() {            @Override            public void onAnimationEnd(Animator animation) {                super.onAnimationEnd(animation);                mImageView.setVisibility(View.GONE);            }        });        anim.start();    }else {        Animator anim = ViewAnimationUtils.createCircularReveal(mImageView,                centerX, centerY, 0, maxRadius);        anim.setDuration(1000);        mImageView.setVisibility(View.VISIBLE);        anim.start();    }}

Before interpreting the code, let's take a look at the detailed description of this method:

Public static Animator createCircularReveal (View view, int centerX, int centerY, float startRadius, float endRadius)

Parameter section,

View view: Specifies the View for which the animation int centerX is executed. The center X axis of the ripple effect is int centerY, the center Y axis is float startRadius, the start radius is float endRadius, and the end radius.

After the parameters are explained, it is not difficult to find out. Let's take a look at the above Code.
First, we have calculated centerX and centerY, and we have the largest radius. The smallest radius does not need to be calculated, because we know that the effect we need is 0.
The next judgment is to judge the display status of the ImageView. If it is the display status, it is definitely an animation from the presence to the absence. If it is a hidden state, it is an animation from scratch.
In the first State, we callViewAnimationUtils.createCircularReveal()Method To createAnimator, The radius is frommaxRadiusTo 0.
ThenAnimatorAnd listen to the animation end. After the animation ends, we will set the status of the View to hidden, and finally start the animation, here is the hidden effect we just saw.
So what about display? In fact, it is the same as hiding, except that the display radius ranges from 0maxRadius.

Iii. Excessive Activity Animation

This part of our previous blog "Activity transition animation you don't know -- ActivityOptions"
You can refer to this blog and will not repeat it here.

Iv. Path Animation

What is path animation? In fact, in the official document, this section is called self-production.Curved MotionI call it path animation because the core of this section is based onPath.
The Android 5 sdk provides us with a new interpolation tool.PathInterpolatorWith this interpolation tool, we can easily define the path animation,

This Code defines an animation between x and y from 0.4 and 0 to 1, respectively. However, I think this method is too limited, so I will not introduce it here, the focus is on building a Path animation using Path in java code.

In the new sdk,ObjectAnimatorThere are many more methods with Path parameters.PathObject, then we can get the animation based on thisPath.

Public static ObjectAnimator ofFloat (Object target, String xPropertyName, String yPropertyName, Path path );

In this construction, we need to pass two attribute values. Here, x and y are in the object Path, and the last parameter is the most important Path. Let's take a look at our demo. In this demo, we want to keep a piece of text followingZTo the original location.

TextView tv = (TextView) findViewById(R.id.tv);tv.setOnClickListener(new View.OnClickListener() {    @Override    public void onClick(View v) {        Path path = new Path();        path.moveTo(100, 100);        path.lineTo(600, 100);        path.lineTo(100, 600);        path.lineTo(600, 600);        path.close();        ObjectAnimator anim = ObjectAnimator.ofFloat(v, View.X, View.Y, path);        anim.setDuration(5000);        anim.start();    }});

The code is very simple. First, we build a simplePathAnd then useObjectAnimatorNewofFloatThe method is to specify the path to move x and y of the View, and finally let the animation run.

5. View State Animation

Before that, we were usingselectorWhen defining the status, only one stiff state change can be provided. In the new sdk, the status change occurs. we can define a State with an animation effect!
First, we define a drawable file,

We are still familiarselectorBut its item isobjectAnimatorHere we specifytranslationZAnd then we use it in the layout,

Here we introduce a new propertyandroid:stateListAnimator, We use this attribute to setselector, To see the effect,

Observe the effect carefully.translationZThere is an animation effect.
Speaking of this, it would be even better if we could give it an animation of the background. Of course this is also possible! First define a drawablew file, but the file here isAnimatedStateListDrawable, We useanimated-selector.

Here, we first define three items, which correspond to three States, and define IDs. Next, we definetransitionNode.fromIdAndtoIdIt indicates the State from which the animation is executed to which the animation is executed.animation-listNode. We have specified twoitem, Pay attention to the twoitemThe execution order, if it is fromfromIdTotoIdFrom the normal status to the press, it will be executed in the forward direction.toIdTofromIdFrom the press status to normal, it will be executed in reverse order. Here we will give each item A Ms stay time.

From the effect, it may not be seen when I click to release it. Here, each color will have a period of time.

Vi. SVG vector Animation

In the new sdk, Google finally provides native support for SVG.VectorDrawableOf course,VectorDrawableIt is alsoDrawable,
So we can still define it in xml,

Here we definedrawableFile. Its root node isvector, Indicates that it isVectorDrawable, Look at its content, anothergroupMultiplepathComposition,groupCan contain multiplepathOf course, we only wrote one here. It is worth noting thatpathOfandroid:pathDataAttribute, which defines the shape of the image. How to use it? Just like a normal imageImageViewOfsrcAttribute assignment is OK. What shape is this?

Of course, we can use some tools to easily implement somepathData.

Well, now it's just a simple image with no animation effect. Now we want this image to be moved and the color will change constantly. What should we do? Here we need to introduce a new thing-animated-vector.
With this, we can specify different animations Based on the name value written above.

First, we define two animations, one being a rotation animation and the other being an animation with changing color values.

Here we define twoAnimatorIt must be noted thatandroid:propertyNameThe values are the ones we defined above.vectorOfgroup
AndpathOne of the attributes of a tag, the two animations are a rotation and a color change animation. How can this problem be solved? We also needanimated-vectorOfdrawableFile.

In this file, we specifydrawableFor the one we previously definedvectorFile, and write twotargetTag, which is very simple. There are only two attributes. They specify the animation used and who the animation should be. (remember to give itgroupAndpathThe specifiednameAttribute )! OK.ImageViewOfsrcSpecifyanimated-vectorFile, run it, you may feel frustrated because there is no animation! So how can we make the animation run? Very simple.

final ImageView iv = (ImageView) findViewById(R.id.iv);iv.setOnClickListener(new View.OnClickListener() {    @Override    public void onClick(View v) {        Drawable d = iv.getDrawable();        if(d instanceof Animatable) ((Animatable) d).start();    }});

We are clickingImageViewTo obtain thisImageViewImage resource, and then determine whether it isAnimatableType. If yes, directly call itsstartMethod!
Finally, let's take a look at the effect at this time.

There is a rotating animation, which is also accompanied by color changes during the rotation process. OK. Now, we have finished learning the Material Design animation.

Finally, download the demo code and reference materials.