After the study of the first two chapters, we finally arrived at the property animation we use the most. Property animation is a new animation mechanism introduced in Android 3.0 (API 11). Compared with tweening animation, it can achieve all the effects of tweening animation, and can also achieve effects that tweening animation cannot do, such as We now require a gradient of the background color of an image, and the tweening animation cannot be completed, but this effect can be easily achieved by using attribute animation. In addition, the tween animation can only act on View, not on non-View objects. For example, we customize a View. The position of this View is determined by the Ponit class (including x and y axis coordinate information). We require animation. To change the position of the View, you need to use animation to manipulate the point object, then you can only use property animation to complete. For the tween animation, we have already talked about it before, the animation will only change the drawing position of the View without changing its real properties, so the touch event will not move with the animation, and the click event will still appear after the view is translated. The embarrassing thing to stay in place, and the property animation we are going to introduce does not have this problem, because it is the property of the View that is directly manipulated, so after it moves, the corresponding event will also move.
We use two more classes in property animation, one is ValueAnimator and the other is ObjectAnimator. The latter inherits the former and encapsulates many common operations, so it is easier to use than the former. The parent class of ValueAnimator is Animator, and another common subclass of Animator is AnimatorSet (animation set), which we will also introduce later.
ok, after talking so much nonsense, it is not as intuitive as the code. Let's explain the simple use of ValueAnimator, ObjectAnimator and AnimatorSet:
ValueAnimator
First usage:
alphaValueAnimator = ValueAnimator.ofFloat(1.0f,0f);
alphaValueAnimator.setDuration(1000);
alphaValueAnimator.setRepeatCount(1);
alphaValueAnimator.setRepeatMode(ValueAnimator.REVERSE);
alphaValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
ivContainer.setAlpha((float)animation.getAnimatedValue());
}
});
We have written a fade-in and fade-out animation here. The animation transparency changes from 1 to 0, then from 0 to 1, and then ends. You can see that there are many similarities with the tween animation in the usage method, such as setting the animation time (setDuration), setting the number of repetitions (setRepeatCount), setting the repetition mode (setRepeatMode), and so on. In the of... method of ValueAnimator, the former is the initial value of the animation, and the latter is the end value of the animation. You can also pass multiple parameters, for example:
ValueAnimator.ofFloat(1.0f,0.5f,1f,0f);
Just bring the animation that the transparency changes from 1 to 0.5 and then to 1 and then to 0.
Other common methods supported by ValueAnimator are ofInt(), ofArgb(), ofObject(), ofPropertyValueHolder(). The first two methods are roughly similar to ofFloat, and the latter two methods will be used later when analyzing the execution process of property animation. Explain.
It should be noted that the addUpdateListenr method, this method adds a listen to the animation execution, we can make changes to the object we want to animate in the onAnimationUpdate method. If you want to observe the animation execution process, you can print the value of animation.getAnimatedValue in the onAnimationUpdate method to view the change process, you can deepen your understanding of ValueAnimator, and I will not demonstrate it here. If we use other effects, we can write the corresponding logic in the onAnimationUpdate method accordingly. The usage is relatively simple, not much to say.
The following is the animation effect we use ValueAnimator to achieve, as shown in the figure:
ObjectAnimator
The use of ObjectAnimator is much simpler than the above, and it is written like this:
float translationX = ivContainer.getTranslationX();
translateObjectAnimator = ObjectAnimator.ofFloat(ivContainer,"translationY",translationX,translationX-200);
translateObjectAnimator.setRepeatCount(1);
translateObjectAnimator.setRepeatMode(ValueAnimator.REVERSE);
translateObjectAnimator.setDuration(1000);
The above effect is to translate the ImageView upwards by 200 pixels and then translate it back to the original position (if repeatCount is not set, it will stay in the original position after translation. For the convenience of demonstration, 1 repetition is set and the repetition method is set to reverse). It can be seen that the use of ObjectAnimator is much simpler than its parent class. In the ofFloat method, the first parameter Target accepts an Object object, which is the object of animation execution, and the second parameter propertyName is the object selected to be changed during the animation execution process. Note that this property name must have setter and getter methods in the response object, and the other parameters are the initial and end values of animation execution, and the rest are similar to ValueAnimator.
When we add animation to the view, what are the PropertyNames that can be used, commonly used are "translationY", "rotation", "tranlationX", "alpha", "scale" and so on.
Using ObjectAnimator, we don't need to add animation monitoring to set the target object. After calling the start() method, it will be automatically called internally, and we will conduct a detailed analysis later.
The execution effect is as follows:
AnimatorSet (animation collection)
AnimatorSet is also inherited from Animator. It is mainly used to combine animations such as playing two animations at the same time, or playing them later, playing animations in advance, delaying playback, etc. The main methods used are:
play(Animator anim) //播放当前动画
after(Animator anim) //将该动画插入原动画之前
after(long delay) //将动画延迟相应毫秒
before(Animator anim) //将该动画放入原动画
with(Animator anim) //将该动画与原动画同时播放
The above methods return all Animator.Builder objects. With these methods, we combine views as follows:
animatorValueSet = new AnimatorSet();
animatorValueSet.play(alphaValueAnimator)
.with(rotateValueAnimator)
.before(scaleValueAnimator)
.after(translateValueAnimator);
As you can see, the animation will execute translateValueAnimator first, then execute alphaValueAnimator and rotateValueAnimator at the same time, and finally execute scaleValueAnimator.
The following is to use ValueAnimator and ObjectAnimator to use collection animation (actually there is no difference):
Monitor animation start and end
Sometimes we have the need to execute certain methods when the animation ends or starts, and we need to monitor the animation at this time. Above we have used the listener to monitor the animation state update, and there are also addListener and addPauseListener, which monitor the animation start and end status and stop status respectively.
animatorObjectSet.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
//动画开始时调用
}
@Override
public void onAnimationEnd(Animator animation) {
//动画结束时调用
}
@Override
public void onAnimationCancel(Animator animation) {
//动画取消时调用
}
@Override
public void onAnimationRepeat(Animator animation) {
//动画重复执行时调用
}
});
We can perform logical operations in several methods. Sometimes we don't want to monitor so many states, so we can use the abstract class AnimatorListenerAdapter, which implements AnimatorListener and AnimatorPauseListener. We can override the corresponding methods according to our needs:
animatorObjectSet.addListener(new AnimatorListenerAdapter() {
});
xml write attribute animation
We know that tween animation can be implemented in two forms, one is xml form and the other is code form. Attribute animation We just talked about the implementation form of the code, so can it be written into xml? The answer is yes.
The directory where the attribute animation is located is under res/animator. If there is no animator under res, you can create a new directory and create a new xml file. There are three root nodes that we can use:
- Equivalent to ValueAnimator in code
- Equivalent to ObjectAnimator
- Equivalent to AnimatorSet
The effect I have achieved here is this:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="sequentially">
<objectAnimator
android:duration="1000"
android:repeatCount="1"
android:valueType="floatType"
android:valueFrom="0"
android:valueTo="-200"
android:repeatMode="reverse"
android:propertyName="translationY"/>
<set android:ordering="together">
<objectAnimator
android:duration="1000"
android:repeatCount="1"
android:valueType="floatType"
android:valueFrom="1.0"
android:valueTo="0"
android:repeatMode="reverse"
android:propertyName="alpha"/>
<objectAnimator
android:duration="1000"
android:repeatCount="1"
android:valueType="floatType"
android:valueFrom="0"
android:valueTo="-180"
android:repeatMode="reverse"
android:propertyName="rotation"/>
</set>
<objectAnimator
android:duration="1000"
android:repeatCount="1"
android:valueType="floatType"
android:valueFrom="1"
android:valueTo="1.5"
android:repeatMode="reverse"
android:propertyName="scaleY"/>
</set>
The effect of the implementation is the same as that of the Java code. You need to pay attention to the attribute ordering of set, together for simultaneous execution, and sequentially for sequential execution.
The way to call this animation in the program is:
/**
* xml实现动画
*/
protected void xmlAnimatorTest (View view) {
Animator animator = AnimatorInflater.loadAnimator(this,R.animator.animator_test);
animator.setTarget(ivContainer);
animator.start();
}
The effect achieved is shown in the figure:
Ok, the basic usage of attribute animation is finished here. Next, we will introduce the underlying implementation of Animator, some advanced usage and cool animation effects. The code address is still: github, welcome to check it out.
Also welcome to my blog to discuss related technologies~
enjoy~