Android animation in-depth analysis-imitation 58 bottom navigation item animation

Source: Internet
Author: User

In the process of developing Android, the reasonable use of animation can improve the user experience and bring a refreshing feeling to the user. So we should master the use of Android animation. In the process of development, I seldom write my own animation, in the GitHub search basic can meet the requirements, but in the spirit of breaking the sand pot asked the end of the cockroach, know its why, I decided to take a good look at the document, in-depth study of the animation bar, I always believe that in the complex animation is also a simple animation composition, Learn basic skills. From simple to complex.

First I went to look at the official documentation, which is probably 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
Finishing up, the structure of the animation is as follows:

The official gives us the type of animation, see the picture at a glance, of course, property animation, and then again. The authorities gave it to me. These basic animations, paired with various (interpolator) accelerators, combine into a lot of cool animations. Today we want to say carefully is tweend animation in the rotateanimation.

Reference, the default rotation point is view (0,0), clockwise rotation angle is positive, counterclockwise angle is negative, start angle fromdegrees, end angle todegrees. Like what:
Fromdegree is 30,todegrees to 60, then the angle of rotation is 60-30 = 30.
Fromdegrees is 30, cast degrees is-30, then the angle of rotation is 30-(-30) = 60
Speaking clearly of the angle of the problem, then the rotation point, how to control the position of the rotation point?

publicRotateAnimation (floatfloatfloatfloat pivotY)

Looking at the constructor, Rotateanimation uses float pivotx, float pivoty to control the rotation point. For example, Pivotx is set to 50%,pivoty to 50%, which means rotating around the center of the view itself.
Let's look at an item animation on the bottom navigation bar of the example,58 app. A very simple animation, but with a little vainly disobey, very refreshing feeling.
The following XML code is given:
Cycle_shake.xml

<?xml version="1.0" encoding="utf-8"?><cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"    android:cycles="3" />

This cycleinterpolator is used to repeat the animation 3 times.

Shake.xml

<?xml version= "1.0" encoding= "Utf-8"?  <rotate  xmlns : Android  = "http://schemas.android.com/apk/res/android"  android:pivotx  =  Android:pivoty  = "0%"  android:fromdegrees  = "5"  android:todegrees  ="-5 " android:duration  =" 500 "  android:interpolator  = "@anim/cycle_shake" />   

Almost, explain it. Interpolator, this is a time interpolation class that defines the speed of animation transformations. It can realize acceleration, deceleration and repetition of alpha/scale/translate/rotate animation. The Interpolator class is actually an empty interface that inherits from the Timeinterpolator,timeinterpolator time interpolator allowing animations to perform nonlinear motion transformations, such as acceleration and speed limiting, where there is only one method in the interface float Getinterpolation (float Input) this method. The value passed in is a 0.0~1.0 value, and the return value can be less than 0.0 or greater than 1.0.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android animation in-depth analysis-imitation 58 bottom navigation item animation

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.