Click the Android simulation switch button to open the animation (translation animation of attribute animation)

In Android, some cool animations are really attractive. They are pleasing to the eye. A good-looking animation may improve users' utilization of the software. In addition, when it comes to animation, there are two kinds of animation supported in Android: patch animation and attribute animation. As for the differences between the two kinds of animation, I won't introduce them here. I hope developers can experience the differences between the two in the process of using them.

This article uses attribute animation. When it comes to attribute animation, we must mention the nineold Android animation library written by Jake Wharton. If your app needs to be in Android 3 If you use attribute animation below 0, this library is very useful. If you only need to use it in a higher version, you can directly use the animation API provided by the system.

First, let's take a look at the animation effect to be realized in this paper: the finger moves up to the switch button, then a click action, the switch executes the animation from off to on, and the finger moves down to the original position

Click the picture transfer to the corresponding link to view the animation

Usage scene of animation

When guiding the user to open the switch button of a function or to open a setting of the system, adding animation can improve the click through rate of the user and express the meaning more clearly

Make the following preparations before implementation

　　1. Download nineoldandroids-2.4 0.jar library and put it in the LIBS folder of the Android studio project directory

　　2. In build Introduced in gradle file

　　3. Prepare relevant picture resources

Next, encapsulate a custom control to implement the entire animation

Step 1: first define a layout file finger_ switch_ on_ guide_ layout. xml

The pre cable length of the layout file is as follows:

Step 2: define a custom control (switchonanimview) to realize the whole animation

The last step: find a carrier to add switchonanimview, call its startanim method to execute the animation, and play the animation in an activity

Define the activity layout file_ finger_ switchon_ anim. xml

Define and implement activity: fingerswitchonanimactivity

Summary of animation implementation:

It is not difficult to master Android animation. How to realize some complex animation when it is difficult. Here are some steps to realize complex animation.

　　1. Animation decomposition: any complex animation can be decomposed into a combination of many atomic animations

　　2. Timing analysis of animation connection: after complex animation is decomposed into many atomic animation, it should be connected again

This is actually the execution time of each atomic animation, who first, who later or at the same time

　　3. Realize atomic Animation: realize the disassembled atomic animation in turn

　 4. Animation assembly: after the above is ready, assemble and connect the atomic animation according to certain rules, and the whole complex animation begins to work

Atomic Animation: This article refers to animation that can no longer be split

Take the animation in this article for example. Animation can be divided into four parts:

A. finger up translation animation

B. finger click operation (this is not an animation, but can also be used as a simple animation)

C. switch button origin right translation animation

D. move the finger down the animation.

The animation execution time of this article is:

A executes first, a executes B immediately after execution, B waits 200ms after execution, and C (reflects the click effect)

C start execution after 100ms D

It is not easy to analyze the animation decomposition and animation connection timing, because it is sometimes impossible to observe with the naked eye, so you should slow down when playing the animation. If you still can't see it, you'd better find the UI colleagues of the company to assist in the analysis. Because we can simply distinguish between translation animation and zoom animation, but we can't distinguish between sinusoidal algorithm animation or other algorithm controlled animation. The animation in this paper is relatively simple and easy to implement, but the idea is indeed the same.