Android advanced UI tween animation and property animation

Tween Animation

What is tween animation? Simply speaking, it is to create an anim folder under RES, and the animation generated by the animation file in it is called tween animation.

The tween animation value:

<translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromXDelta="0" android:fromYDelta="0" Android :toXDelta=" 60%P "Android :toYDelta=" 60%P" Android :fillAfter="true"// Whether to save the animation end status Android :duration="500">// Animation execution time </translate>Copy the code

Set the View to perform the animation in your code

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tween_animation); mBtnStart = (Button) findViewById(R.id.btn_start); MBtnStart. SetOnClickListener (new View. An OnClickListener () {/ / set the click event @ Override public void onClick (View v) { Toast. MakeText (TweenAnimationActivity. This, "you let me why hey?" ,Toast.LENGTH_SHORT).show(); }}); init(); } private void init() { Animation animation= AnimationUtils.loadAnimation(this,R.anim.translate); animation.start(); mBtnStart.setAnimation(animation); }Copy the code

If you click on the Button you see, the event is not responsive, but you click on the original position, clicking on the event responds, unexpectedly clicking “why do you click me?” “”

Here are some conclusions for Tween Animation:

A. There are four types of tween animation: Translate, Rotate, Scale and Alpha.
B. The actual position of the View does not change, indicating that the View moves to another place and the click event remains in the same place before it responds. (This is important, for example, if you set the control click event, after the animation is over, you click the position of the control you see, will not respond, the original position of the point can respond, this is the tween animation only shows the position change, the actual position does not change)
C. The procedure for combined use is complicated.
D. View Animation also refers to this Animation.

Property Animation

Ok, here I will focus on the property animation, what is the property animation, in fact, the property animation is really changing the property of the View, the View executes the animation position, is actually where it is, in short, the following points:

A. Support animation of all View properties that can be updated (setXxx() and getXxx() are required).
B. The actual properties of the View are changed, so it will not affect the normal use of its position after the animation is executed.
C. Android3.0 (API11) and subsequent features, prior to 3.0 can be supported using github third-party open source library nineoldandroids.jar.

Several commonly used apis:
ObjectAnimator: Object animation execution class.
PropertyValuesHolder: Property store that provides two execution classes with the ability to update multiple properties.
AnimatorListener: An animation executes a listener that calls back when the animation starts, repeats, finishes, and cancels.
Keyframe: Provides operation values for multiple key frames for PropertyValuesHolder.
AnimatorSet: a set of animations that are executed in sequence, at a time, etc.
TimeInterpolator: Time interpolation, used to control animation execution.
ValueAnimator: Specifies the animator execution class. It is used in conjunction with AnimatorUpdateListener.
AnimatorUpdateListener: Listens for animation updates.
TypeEvaluator: Type valuation used to set values for complex animation operation properties.

Set the imageView to pan 100 pixels to the right and set the random opacity

value +=100; mBtnStart.setTranslationX(value); Mbtnstart. setAlpha((float) math.random ()); mbtnstart. setAlpha((float) math.random ()); // Set transparencyCopy the code

This is also setting the imageView to pan to the right, and you can also set the time when the animation is executed

ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(mBtnStart,"translationX",0f,(float)value); objectAnimator.setDuration(5000); // set time objectAnimator.start();Copy the code

Look directly at the following picture, intuitive:

Multiple animations are executed simultaneously

Method one:

Set animation listener to start the first animation while opening other animations

ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(mBtnStart,"6666",0f,300f); objectAnimator.setDuration(3000); objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float animationAnimatedValue= (float) animation.getAnimatedValue(); / * mBtnStart setScaleX + animationAnimatedValue / 600 f (0.5 f); MBtnStart. SetScaleY + animationAnimatedValue / 600 f (0.5 f); */ mBtnStart.setTranslationX(animationAnimatedValue); mBtnStart.setTranslationY(animationAnimatedValue); }}); objectAnimator.start();Copy the code

ObjectAnimator is Valueanimator without this property. ObjectAnimator is Valueanimator without this property. ObjectAnimator is Valueanimator. Valueanimator has no attributes, so the animation will still be executed. Ok, method two, valueAnimator;

Method 2:

Using Valueanimator to listen for the animation, it is also possible to execute the animation simultaneously

ValueAnimator animator = ValueAnimator.ofFloat(0f,200f); animator.setDuration(200); animator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mBtnStart.setTranslationX(animationAnimatedValue); mBtnStart.setTranslationY(animationAnimatedValue); }}); animator.start();Copy the code

Method 3:

With PropertyValuesHolder, you can combine animations so that you can execute animations at the same time

PropertyValuesHolder holder = PropertyValuesHolder. OfFloat (" translationX ", 0200500); PropertyValuesHolderholder1 = PropertyValuesHolder. OfFloat (" translationY ", 0300500); ObjectAnimator objectAnimator =ObjectAnimator.ofPropertyValuesHolder(mBtnStart,holder,holder1); objectAnimator.setDuration(5000); objectAnimator.start();Copy the code

Method 4:

AnimatorSet, real animation combination, look at the code, very simple;

ObjectAnimator objectAnimator1 = ObjectAnimator. OfFloat (mBtnStart, "translationX", 0200500); ObjectAnimator ObjectAnimator = ObjectAnimator. OfFloat (mBtnStart, "translationY", 0200500); AnimatorSet animatorSet =new AnimatorSet(); animatorSet.setDuration(5000); //animatorSet.playTogether(objectAnimator,objectAnimator1); / / at the same time perform animatorSet. PlaySequentially (objectAnimator, objectAnimator1); // Execute animatorset.start ();Copy the code

With playTogether, you can execute a combination of animations simultaneously; With playSequentially, you assemble animations one by one and then execute them one by one.

Attribute animation accelerator (also called interpolator)

What is the property animation accelerator;

The first few animations we’ve written are all done at equal speed. It’s not like a setup accelerator. You want your animation to speed up at the beginning and then slow down.

ObjectAnimator oa = ObjectAnimator.ofFloat(mBtnStart, "translationY", 0f,800f); oa.setDuration(5000); oa.setInterpolator(new AccelerateInterpolator(5)); // Set the accelerator method oa.start();Copy the code

The method of setting accelerators is setInterpolator (accelerator name);

Here is the accelerator method:

LinearInterpolator moves at a constant speed
AccelerateDecelerateInterpolator acceleration deceleration interpolation (acceleration and deceleration) first
AccelerateInterpolator (AccelerateInterpolator)
Argateinterpolator will be made to echo swing interpolator or argateinterpolator
AnticipateOvershootInterpolator (based on a one step beyond the finish back to accelerate forward, then slow down)
BounceInterpolator BounceInterpolator BounceInterpolator BounceInterpolator BounceInterpolator BounceInterpolator
CycleInterpolator Sinusoidal periodic interpolator (periodic motion)
Activity Ateinterpolator decelerator
OvershootInterpolator(Get to the end point quickly and then come back after one small step)