Android animation is an integral feature in development, or a clever addition to the interface. Have you figured out how many different ways of animating are available on Android for developers? Today I will sum up for you.

My voice did not fall, the front row that SAO qi is not reduced in those days, the story is full of eyes of the big chest younger brother excited high raised that is full of calluses right hand: “I know, I know! There’s pan, Zoom, rotate, gradient, and…….”

I couldn’t bear to hurt his innocent little heart, watching his attentive and thoughtful expression as he answered. So I decided to tell a lie: “the classmate, you said too right! It’s hard for you to go to class when you know everything. On such a hot day, why not go home to blow air conditioning, eat watermelon, and give this learning opportunity to someone who needs it more?”

Looking at the happy back of the brother with a satisfied face, I can finally rest assured to start today’s focus. Okay, that’s bullshit. Let’s get to the point.

Some of the tutorial images in this article are from the Internet. Thanks to the authors of these images.

Animation types

Android animation can be summarized as follows:

  • View animation
  • Frame animation (Frame animation, Drawable animation)
  • Attribute animation
  • Ripple Effect touch Feedback animation
  • Reveal Effect
  • Transition Animation & Shared Elements (Activity switch Animation)
  • Animate View State Changes
  • Vector animation
  • ConstraintSet animation for constraint layout implementation

The above animation classification is divided by individuals through the independence of each animation category concept. At present, there are only so many that can be thought of. If there is anything missing, you can point out for my subsequent improvement.

A lot of people are probably quick to point out the lack of Airbnb/Lottie-Android animations, which are also relatively popular at present. There is no doubt that Lottie libraries are currently prominent in Android development, especially for complex animations. However, if we can use the animation method provided by Android native, Lottie animation is shelved today. At the same time, the RecyclerView item loading animation is not mentioned today. Let’s classify these animations as something else, not forgetting them.

A detailed tutorial

For the kinds of animation listed above, we may be familiar with some of the more commonly used animation, such as View animation, attribute animation, etc.. What is less well known is that it is used less often (such as expose animation), or used often but never realized that it is a type of animation (such as touch feedback animation). “So today I will explain the concept of each animation in detail”, it is impossible to drop ~~, only so much space, so it is possible to describe each animation in detail.

It will be a huge task to comb through these animations one by one, and I have summed up a ** detailed Android animation series tutorial **, you can go to github.com/OCNYang/And… View, because the animation knowledge involves too much and tutorial detail is outrageous, we can collect slowly view. In addition to the summary of the tutorial each animation provided animation examples, we can be combined with the source code carefully taste. (The series of tutorials summarized above, most of them are borrowed from the previous summary of the tutorial, the selection is for each kind of animation online spread of the most detailed and comprehensive tutorial, in sorting out some mistakes have also been corrected.)

So what’s the mission for today? What follows is a rough introduction to which scenarios each animation can be used in development.

View animation

Since the advent of property animation, the situation of View animation has been very bleak, but sometimes all we need is a simple animation effect, so we use View animation is very convenient.

One of the characteristics of View animation is that its animation is only the drawing place of the moving View, the real position of the View is not animated together.

A View is usually used directly on a View on a page to achieve basic animation effects: pan, rotate, zoom, transparency, or the intersection of the previous ones:

In addition to these usages, there are several special usage scenarios:

    1. Set PopupWindow to show hidden animation effects:

You can compare the default animation with the set animation:

    1. Set the page jump for your Activity and exit the animation:

In-game cut-scenes Activity effect can be set in many ways, and use the View animation realization way is by setting overridePendingTransition (int enterAnim, int exitAnim) method. After startActivity() or Finish (), the switch animation of the above method Settings is displayed when the page transitions.

Effect comparison:

    1. Set the approach animation for the ViewGroup child control:

This is done by setting an Android :layoutAnimation=”@anim/anim_layout” property to the ViewGroup control. Anim_layout is the entry animation for the first display of the ViewGroup’s neutron control.

The effect is as follows:

LayoutAnimation applies to all viewgroups, including ListView, RecyclerView and other controls. As mentioned above, LayoutAnimation provides the entry animation, so it only displays once when the ViewGroup first loads its child View, so we don’t usually use it for the list control item loading animation, we use the list-specific item loading animation, Such as recyclerView. SetItemAnimator (), etc.

The frame of animation

Frame animation is very easy to understand, in fact, just like watching cartoons, each frame represents a picture action, when the fast frame by frame display, the speed reaches the human eye can not distinguish each frame, the animation effect is achieved.

In use, first prepare the material picture of each frame:

Then it plays out as an animation:

When it comes to the use of frame animation scenarios, they are rarely used in development. There are generally two kinds:

  • Switch motor drawing of equipment
  • “Complex” animation effects, seemingly impossible animation

The reason why the boot animation is a frame animation. Because the general boot animation is through the system/media/bootanimation. Zip this package, inside the bootanimation mainly contains a desc. TXT and N folder. And folder inside put is boot animation picture resources. The purpose of decs.txt is to instruct the system how to perform boot animation. TXT to compile the specification, for example, boot animation needs to use two folders, respectively folder1 and folder2, boot time, folder1 first play the pictures in folder1, and then loop play folder2 files, until the system.

In development, boot animation is generally not covered. And often used is, when we need some complicated picture animation display effect, other animation can not be achieved, then we can consider frame animation, but pay attention to avoid OOM. In fact, the real use of frame animation, more time we might as well use GIF pictures instead, now several mainstream picture loading framework support GIF pictures, but also can control the playback time of GIF.

Attribute animation

Property animation provides much the same functionality as View animation. But the two are completely different in implementation principle, and compared to View animation, property animation is much more powerful. Here’s a comparison:

View animation/View animation:

  1. View animation can only add animation effects to a View, and cannot listen to the change process of View properties.
  2. The animation capability provided by View animation is relatively simple. Currently, it only supports frame animation, zoom animation, displacement animation, rotation animation, transparency animation and the set animation of these animations.
  3. View animation changes the rendering effect of the View, but the real position and related properties of the View do not change, which is why the trigger area of the click event is the position before the animation, not the position after the animation.

Attribute animation

  1. Property animation is not limited to the View, but to the properties of any object that provides getters and setters.
  2. Property animation does not have the ability to directly change the state of the View, but to change the display effect of the View by dynamically changing the related properties of the View.
  3. Property animation is more convenient to use, you can use more concise code to achieve related animation effects.
  4. Property animation is difficult to get started, so you need to mine propertyName by yourself, or customize the propertyName by Wrapper.
  5. Attribute animation is the ability provided by Android3.0 above, in 3.0 below need to import nineoldandroids tripartite library to solve compatibility problems.

What are the use scenarios for property animations?

  • Basically View animation effect on View animation, property animation can be achieved;
  • In the custom View, the need to achieve some complex animation effects, or the View of some special attribute values for animation changes, View animation can not be achieved;
  • In addition, you can also use property animation in non-animated scenarios, for example, if you are customizing a View and need a value variable that has a certain pattern (depending on a specific differentiator) and can be listened to, it is best to use property animation.

Attribute animation is a more powerful, more elegant animation solution, in the custom View set dynamic effect has a very strong performance, can achieve View animation can not achieve more cool animation effect. For a detailed introduction to property animation, see the Android Animation Tutorial series.

Here a stolen some time ago a netizen to achieve the clever red carp effect, the specific implementation of the principle of many attributes of animation.

Ripple Effect touch Feedback animation

Touch feedback animation is a click effect. When applied to a clickable View, there is a ripple of feedback when a click occurs, which is perfect for buttons.

Ripple Ripple effects are as follows:

// Have boundaries? Android: attr/selectableItemBackground / / no boundary (API21 above)? android:attr/selectableItemBackgroundBorderlessCopy the code

The effects are as follows:


It is also very easy to use, just set the above two effects to the background or foreground of the control, and also need to set the control to click events, or set the control to clickable.

Reveal Effect

Unmasking animations are common in systems, which are ripples that unfold from a point or converge from a point.

  • You can use a View animation in an Activity to expose the display of a hidden View. *
  • It can also be used in an Activity jump transition animation.

Here are some of the effects:

If you add some View animations, combine them like this:

It can also be combined with the following transitions to create even more cool effects:

The animation above looks like this: transitions using the shared elements of the transition animation, then reveals the View using the reveal animation.

Transition Animation & Shared Elements (Activity switch Animation)

The name of the transition animation knows its use of the scene, transition, transition is naturally used in the scene conversion:

  • The transition effect is generally used in the animation effect of the Activity switch;
  • Shared elements we generally use to have common elements on the two pages before and after the transformation[1]When;
  • You can also animate the View in the Activity layout when the scene changes.

Common elements: No restriction means that the state, size, and display position of two shared elements are exactly the same. Rather, it means that the two are passing the same content on the page, such as the same title, main image, etc. when going from the list of articles to the article details page. If the two shared elements are different elements, on the one hand, the shared element will flash when it is displayed and the transition is completed. On the other hand, if the two elements are expressed differently, the user will also feel very confused.

Without further ado, here are the renderings:


Animate View State Changes

View state animation is the animation effect that a View performs when its state changes. It’s the same thing we did before when we set the Button’s background in different states using the Selector selector.

Of course, its usage scenarios are also specific:

  • When the state of the View changes, it is expected that the display will be different from the static effect, that is, the display will change accordingly, such as z-axis elevation, size change, or other animation effects.

Put an animation of the view state set after the button is clicked:

Vector animation

I don’t know if you are still cutting various sizes of.png image adaption on the icon display under development. Now I have been using SVG ICONS all the time (in development, I used them by converting them into vectors, and now I import them into AS, which can automatically complete the conversion, and if the conversion fails, I use the above url conversion), so the benefits of SVG ICONS are needless to say. What about vector animation?

VectorDrawable is usually an XML file defined with a

root tag.

,

,

, and elements each have attributes that can play animations. See how to generate animated ICONS in the tutorial series.


We can use it in the following scenarios:

  • ICONS with dynamic transformation effects;
  • It can also be used on VectorDrawable images that require specific animation effects.


ConstraintSet animation for constraint layout implementation

This animation is relatively new and not even officially fully documented. This is a keyframe animation implemented by ConstraintLayout.

Keyframe animation: (baidu encyclopedia) to any animation showing movement or change, at least some key state, two different before and after the middle of the computer can automatically change and cohesion, and in a Flash, said state key frame animation is called a keyframe animation Alleged keyframe animation, it is to need to animate the properties of the prepared a set of values associated with time, These values are extracted from the key frames in the animation sequence, and the values in other time frames can be calculated by using these key values and special interpolation methods, so as to achieve a smoother animation effect.

ConstraintSet requires at least two keyframes, and ConstraintSet requires two layout states. ConstraintSet generates animation transitions between two layout states.

The use of the scene according to the constraints animation instructions are also more obvious, is the same layout needs to adjust the layout of the View position used.

More detailed introduction to animation

Here is just a simple introduction to Android’s various kinds of animation, if you want a more detailed and comprehensive view of Android’s various animation tutorials, you can go to this article with the series of article tutorials to view:

Android animation detailed tutorial: https://github.com/OCNYang/Android-Animation-Set

At the end of this tutorial, I remembered the big chest brother at the beginning of the article, I think he must be at home at the moment complacently eating a big watermelon. Needless to say, such a hot weather, I also want to eat a watermelon to soothe the manic heart.