In-depth analysis of android animation-imitation of item animation in the bottom navigation of 58

In-depth analysis of android animation-imitation of item animation in the bottom navigation of 58

During the development of android, the rational use of animation can improve the user experience and give users a fresh feeling. Therefore, we should master the use of android animation. During the development process, I seldom write animations on my own, and searching on github can basically meet the requirements. However, in the spirit of breaking down the casserole and asking the question to the end, I should know why, I decided to take a good look at the document and study animation in depth. I always believe that complicated animations are also made up of simple animations, so I learned the basic skills well. From simple to complex.

First of all, I went to the official documents. This is what I want to learn.

AccelerateDecelerateInterpolator
AccelerateInterpolator
AlphaAnimation
Animation
Animation. Description
AnimationSet
AnimationUtils
AnticipateInterpolator
AnticipateOvershootInterpolator
BounceInterpolator
CycleInterpolator
DecelerateInterpolator
GridLayoutAnimationController
GridLayoutAnimationController. AnimationParameters
LayoutAnimationController
LayoutAnimationController. AnimationParameters
LinearInterpolator
OvershootInterpolator
RotateAnimation
ScaleAnimation
TranslateAnimation
After finishing up, the structure of animation is as follows:

The animation types officially provided to us are clear at a glance. Of course, there are also property animations. Let's talk about them later. The official team gave me these basic animations, along with a variety? Http://www.bkjia.com/kf/ware/vc/ "target =" _ blank "class =" keylink "> authorization + HsxbXEtq + 7raGjvfHM7M7Sw8fSqs + signature + DQo8aW1nIGFsdD0 =" here write picture description "src =" http://www.bkjia.com/uploads/allimg/151012/05040914X-1.png "title = "\" />

For reference, the default rotation point is view (0, 0). The clockwise rotation angle is positive, the clockwise angle is negative, the start angle is fromDegrees, and the end angle is toDegrees. For example:
If fromDegree is 30 and toDegrees is 60, the rotation angle is 60-30 = 30.
If fromDegrees is 30 and Degrees is-30, the rotation angle is 30-(-30) = 60.
To clarify the angle, let's talk about the rotation point. How can we control the position of the rotation point?

public RotateAnimation (float fromDegrees, float toDegrees, float pivotX, float pivotY)

Let's take a look at the constructor. RotateAnimation uses the float between Tx and float between ty parameters to control the rotation points. For example, when Tx is set to 50%, ty is set to 50%, which means that the center of the view is rotated.
Let's take a look at the item animation in the navigation bar at the bottom of the app in the same city as example, 58. It's a very simple animation, but it's quite refreshing.
The following xml code is provided:
Cycle_shake.xml

This cycleInterpolator is used to repeat the animation three times.

Shake. xml

It's almost the same. I want to explain interpolator, which is a time interpolation class that defines the speed of animation transformation. It can accelerate, slow down, and duplicate alpha/scale/translate/rotate animations. The Interpolator class is actually an empty interface inherited from TimeInterpolator. The TimeInterpolator time interpolation allows animations to perform Nonlinear Motion transformations, such as acceleration and speed limiting, only the interface has one float getInterpolation (float input) method. The input value is 0.0 ~ The value of 1.0. the return value can be smaller than 0.0 or greater than 1.0.