Animation practices for Android apps-View Animation

Preface

I tried to search for the Chinese documents of android animation, many of which are some of the documents of some boring translation APIs, and seldom systematically explained how to use animation to develop an application. Suddenly, I found that many apps do not pay much attention to animation apps. I thought about it and I would like to summarize it myself. Because I am not an animation maker and cannot make the animation very beautiful, I have to use the built-in effects for simple processing, how to play it, determined by your creativity. In view of the fact that many android animation materials are full of heap code, all the code is put on github. To view the complete code, go to github.

Specifically, due to the reasons of the android simulator and recording tool, the effect of gif cramps in the example is different from the actual effect. In this example, you can clear the cramps by yourself.

Android animation Basics

Animation effects that can be used in Android:

• Translation

• Zoom

• Rotate

• Transparent

The above animation is basically used in this article. Because of my ability problems, it is impossible to make people look at the current highlight of the animation, let's look at it. However, these are the foundations of amazing animation effects.

Interpolators interpolation tool)

Generally, to make an animation, You need to encapsulate the point physical formula and use it as the numerical calculation between the calculated frame and the frame. However, if you just want to make some animations easier for the app, the android api has encapsulated some common animation interpolation devices.

Seven types of interpolation are built in by default. In my opinion, these seven interpolation tools are sufficient if only some animations in the application are used.

1. AccelerateInterpolator

   Acceleration
   650) this. width = 650; "style =" display: inline "title =" AccelerateInterpolator "alt =" AccelerateInterpolator "src =" http://www.bkjia.com/uploads/allimg/131228/11345H326-0.gif "height =" 240 "/>

2. Decelerate

   Deceleration
   650) this. width = 650; "style =" display: inline "title =" decelerate "alt =" decelerate "src =" http://www.bkjia.com/uploads/allimg/131228/11345I646-1.gif "height =" 240 "/>

3. AccelerateDecelerateInterpolator

   Start and end are both slow, but intermediate Acceleration
   650) this. width = 650; "style =" display: inline "title =" accelerate_decelerate "alt =" accelerate_decelerate "src =" http://www.bkjia.com/uploads/allimg/131228/11345HL9-2.gif "height =" 240 "/>

4. AnticipateInterpolator

   Start to backward, and then, throw
   650) this. width = 650; "style =" display: inline "title =" AccelerateInterpolator "alt =" AccelerateInterpolator "src =" http://www.bkjia.com/uploads/allimg/131228/11345L925-3.gif "height =" 240 "/>

5. OvershootInterpolator

   Throw more than one point forward and return
   650) this. width = 650; "style =" display: inline "title =" overshoot "alt =" overshoot "src =" http://www.bkjia.com/uploads/allimg/131228/11345LV9-4.gif "height =" 240 "/>

6. AnticipateOvershootInterpolator

   Start to backward, throw a point forward, and then return
   650) this. width = 650; "style =" display: inline "title =" anticipate_overshoot "alt =" anticipate_overshoot "src =" http://www.bkjia.com/uploads/allimg/131228/11345K559-5.gif "height =" 240 "/>

7. BounceInterpolator

   Try again at the end
   650) this. width = 650; "style =" display: inline "title =" bounce "alt =" bounce "src =" http://www.bkjia.com/uploads/allimg/131228/11345K128-6.gif "height =" 240 "/>

8. LinearInterpolator

   Uniform speed

The above animations are all sourced from the official android api demo. You can use eclipse adt android to select an example project for navigation. Then, you can choose APIDEMOS to create something you have never heard? Now you know ...)

Well, although the captured gif animation is a little hard to play, how can we use this knowledge in applications?

Composite Animation

At present, there are a lot of materials to explain the animation api. Here we will not repeat the basic knowledge!

Now let's take a look at how to use, translate, zoom, and rotate to create a bright animation.

In order to use animation for a better purpose, the following is a hypothetical use case.

Hypothetical: Shopping Cart case

Notice: For the convenience of viewing the effect, the animation delay time will be set relatively long. Note: you can imagine that you just want to avoid having to sit on your seat.

Task:

In order to make the mall app have a better interaction effect, it is decided to add some animation effects to the shopping cart control and product control.

Shopping Cart animation design scheme:

Use, transparency, and translation to add an animation Interaction Effect on the appearance and departure of the shopping cart.

After some effort, the effect is as follows (let's take a look ..) :

650) this. width = 650; "style =" display: inline "title =" anim1 "alt =" anim1 "src =" http://www.bkjia.com/uploads/allimg/131228/11345J140-7.gif "height =" 240 "/>

Related Knowledge points

Common basic attributes of some animations:

Notice: the so-called general purpose means that all animation labels apply to these attributes.

• android:durationSet the animation playback time

• android:startOffsetSet the start time of the animation.

• andorid:interpolatorSet the animation interpolation tool

• android:repeatCountNumber of times of playing an animation

• android:repeatModeThe animation replay mode, that is, from start to end, from start to end, or from start to end, from end to end.

Transparent use:

<alpha />

The value is transparent from 0) to 1) Transparency in android is mainly used to fade in the view. The fade out effect control has two attributes:

• android:fromAlphaThe transparency of the view at the beginning of the animation.

• android:toAlphaThe transparency of the view at the end of the animation.

Use of translation:

<translate />

% Is supported. For example, "50%" gets 50 percent of the view. In addition, there is another method: "50% p" means to get 22.2 of the previous view of this view. Of course, the specified value is also ", however, we recommend that you use the percentage value to ensure compatibility with more android devices.

• android:fromXDelta

• android：fromYDelta

  From? Delta indicates the starting axis.

• android:toXDelta

• android：toYDelta

  To? Delta indicates the ending axis.

This solution shows the use of two interpolation devices:

Used to appear: BounceInterpolator

Used to exit: AnticipateInterpolator

What is an interpolation device?

The so-called interpolation is used for the change between the beginning of the value, is equivalent to something similar to the physical engine. Android has built-in some simple and commonly used numerical transformations, so that we do not need to learn relevant physical knowledge.

For example:

The start value is 1 and the end value is 100. How can we control the change process of this value? Here is the use of the interpolation tool.

In general, the constant speed is:

1, 2, 3, 4, 5... 100. Then we can see that the object is translated at a constant speed.

So we need the acceleration of objects like cars. We can use the accelerator interpolation tool. The process from 1 to 100 will be:

1, 2, 4, 5, 8, 16 ..... 100 the view object displayed in front of us will be translated in the form of an acceleration.

Many application developers are not familiar with the basic knowledge of animation production and may not understand it. Now, we can thoroughly understand this concept by analyzing the source code.

We analyze some Interpolator class trees:

We can see from the api documentation TimeInterpolator that there is only one method for implementing this interpolation:

getInterpolation(float t);

Then let's select the previously used BounceInterpolator to see how it implements this method. If you are interested, you can follow this method to read the implementations of several other interpolation devices.

Finally, we will find that the interpolation is used to return values.

Next let's take a look at how Animation line: 869 uses this interface.

After reading these points, I believe we should understand how the android animation framework converts values.

With the above knowledge, we have basically fully understood the android animation framework. Now, we use the knowledge we have learned to perform better animation design.

Let's proceed with the case just now to design the animation design of product controls.

Product animation design:

This time, we learn a new animation label Scaling (<scale>)

The effect is as follows:

650) this. width = 650; "style =" display: inline "title =" shop1 "alt =" shop1 "src =" http://www.bkjia.com/uploads/allimg/131228/11345JE6-8.gif "height =" 240 "/>

<scale />

Make the view larger or smaller

• android:fromXScale

• android：fromYScale

  From? Scale indicates that the Scale ratio of the Start axis is 1.0 by default)

• android:toXScale

• android：toYScale

  To? Scale means the Scale ratio of the ending axis is 1.0 by default)

• android:pivotX

• android:pivotX

  Axis coordinate for rotation

Finally, we combine the animation of the shopping cart and the animation of the product. The effect is as follows:

When adding a product, if the shopping cart does not appear, the animation displayed in the shopping cart is first displayed, and the product is being played in an animation.

Specific implementation line: 77-104

650) this. width = 650; "style =" display: inline "title =" shop2 "alt =" shop2 "src =" http://www.bkjia.com/uploads/allimg/131228/11345M005-9.gif "height =" 240 "/>

This time, we will learn how to monitor the animation action.AnimationListener()There are mainly three

• onAnimationStart(Animation animation)

• onAnimationRepeat(Animation animation)

• onAnimationEnd(Animation animation)