An analysis of Android animation

Android animation can be divided into three types:

View animation, frame animation and attribute animation.

In fact, frame animation also belongs to view animation, but its translation, rotation and other commonly used view animation are slightly different in performance. View animation is a kind of progressive animation, and view animation supports customization by constantly making image transformations (translation, scaling, rotation, transparency) to the objects in the scene. Frame animation plays a series of images in order to produce animation effect, which can be simply understood as picture switching animation. Obviously, if the picture is too large, it will lead to OOM. Attribute animation achieves animation effect by dynamically changing the attributes of objects. Attribute animation is a new feature of API 11. In the lower version, attribute animation cannot be used directly, but we can still use it through compatibility library.

(1) View animation

The four transformation effects of View Animation correspond to four subclasses of Animation: TranslateAnimation, ScaleAnimation, RotateAnimation and AlphaAnimation

 

 

To use View animation, you first need to create an XML file for the animation. The path of this file is: res/anim/filename.xml

Let's start with a set of XML codes for combining animations:

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@[package:]anim/interpolator_resource"

    android:shareInterpolator=["true" | "false"] >

    <alpha

        android:fromAlpha="float"

        android:toAlpha="float" />

    <scale

        android:fromXScale="float"

        android:toXScale="float"

        android:fromYScale="float"

        android:toYScale="float"

        android:pivotX="float"

        android:pivotY="float" />

    <translate

        android:fromXDelta="float"

        android:toXDelta="float"

        android:fromYDelta="float"

        android:toYDelta="float" />

    <rotate

        android:fromDegrees="float"

        android:toDegrees="float"

        android:pivotX="float"

        android:pivotY="float" />

    <set>

        ...

    </set>

</set>

TranslateAnimation:

<?xml version="1.0" encoding="utf-8"?>

<translate xmlns:android="http://schemas.android.com/apk/res/android"

    android:duration="500"

    android:fromXDelta="100"

    android:fromYDelta="0"

    android:interpolator="@android:anim/cycle_interpolator"

    android:toXDelta="0"

    android:toYDelta="0" />

ScaleAnimation:

<?xml version="1.0" encoding="utf-8"?>

<scale xmlns:android="http://schemas.android.com/apk/res/android"

    android:duration="500"

    android:fromXScale="0.0"

    android:fromYScale="0.0"

    android:toXScale="1.5"

    android:toYScale="1.5"

    android:interpolator="@android:anim/decelerate_interpolator"

    android:pivotX="50%"

    android:pivotY="50%"

    android:repeatCount="1"

    android:repeatMode="reverse"

    android:startOffset="0"

    />

RotateAnimation:

<?xml version="1.0" encoding="utf-8"?>

<rotate xmlns:android="http://schemas.android.com/apk/res/android"

    android:duration="500"

    android:fromDegrees="0"

    android:interpolator="@android:anim/accelerate_decelerate_interpolator"

    android:pivotX="50%"

    android:pivotY="50%"

    android:toDegrees="-360" />

AlphaAnimation:

<?xml version="1.0" encoding="utf-8"?>

<alpha xmlns:android="http://schemas.android.com/apk/res/android"

    android:duration="500"

    android:fillAfter="false"

    android:fromAlpha="1.0"

    android:toAlpha="0.0" />

You can also define animation in the code, for example:

    /*
Define the AlphaAnimation animation in your code
*/
AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);
alphaaAnimation.setDuration(300);
mButton.startAnimation(alphaAnimation);//Animate AlphaAnimation for mButtond

The definition of the remaining three View animations in the code is similar to the above code.

 

Custom View Animation: to define a custom animation, you need to inherit the abstract class animation, then rewrite its initialize and applyTransformation methods, do some initialization work in the initialize method, and perform the corresponding matrix transformation in applyTransformation. Custom View animation is rarely used in actual development, so we will not analyze it in depth.

(2) Frame animation

Create a new file frame.xml under the drawable folder instead of the anim folder

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"

                android:oneshot="false">//oneshot: play only once

 

    <item

        android:drawable="@mipmap/lottery_1"

        android:duration="200"/>//Duration: the duration of this frame

    <item

        android:drawable="@mipmap/lottery_2"

        android:duration="200"/>

    <item

        android:drawable="@mipmap/lottery_3"

        android:duration="200"/>

 

</animation-list>

Define frame animation in the code:

AnimationDrawable anim = new AnimationDrawable();

    for (int i = 1; i <= 6; i++) {

    int id = getResources().getIdentifier("lottery_" + i, "mipmap", getPackageName());

    Drawable drawable = getResources().getDrawable(id);

    anim.addFrame(drawable, 200);//Add frames

    }

    anim.setOneShot(false);//Set to loop

    imageView.setImageDrawable(anim);

    anim.start();

(3) Attribute animation

The Android development team decided to introduce the feature of attribute animation in version 3.0. The attribute animation mechanism is no longer designed for View, nor limited to moving, zooming, rotating and fading. At the same time, it is no longer just a visual animation effect. In fact, it is a mechanism of continuously operating on the value, and assigning the value to the specified attribute of the specified object, which can be any attribute of any object. So we can still move or scale a View, but we can also animate the Point object in the custom View. We just need to tell the system the running time of the animation, which type of animation needs to be executed, as well as the initial value and end value of the animation. The rest of the work can be done by the system.

Since the implementation mechanism of attribute animation is realized by assigning values to the target object and modifying its attributes, the problem of button display previously mentioned no longer exists. If we move a button through attribute animation, then the button is really moving, rather than just drawing in another position.

ValueAnimator

ValueAnimator is the core class of the whole attribute animation mechanism. As we mentioned earlier, the operation mechanism of attribute animation is realized by continuously operating the value, and the animation transition between the initial value and the end value is calculated by ValueAnimator. It uses a time cycle mechanism to calculate the animation transition between values. We only need to provide the initial value and the end value to ValueAnimator, and tell it how long the animation needs to run. Then ValueAnimator will automatically help us to smoothly transition from the initial value to the end value. In addition, ValueAnimator is also responsible for the management of animation playback times, playback modes, and the setting of monitors for animation, which is indeed a very important class.

To smoothly transition a value from 0 to 1 for 300 milliseconds, write as follows:

 

ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);  
anim.setDuration(300);  
anim.start(); 

Calling the ofFloat() method of ValueAnimator can build an instance of ValueAnimator. The ofFloat() method allows the parameters of multiple float types to be passed in. The 0 and 1 entries here indicate that the value is transferred from 0 smooth to 1, then the setDuration() method of ValueAnimator is invoked to set the length of the animation run, and finally the start() method is invoked to start the animation.

How can I know if this animation is actually running? This needs to be implemented with the help of a listener, as follows:

ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);  
anim.setDuration(300);  
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  
    @Override  
    public void onAnimationUpdate(ValueAnimator animation) {  
        float currentValue = (float) animation.getAnimatedValue();  
        Log.d("TAG", "cuurent value is " + currentValue);  
    }  
});  
anim.start();

Here we use the addUpdateListener() method to add an animation listener. During the execution of the animation, there will be constant callbacks. We only need to take out the current value in the callback method and print it out to know whether the animation is actually running.

ObjectAnimator

Compared with ValueAnimator, ObjectAnimator is probably the most common class we are exposed to, because ValueAnimator is just a smooth animation transition of values, but there are not many scenes that we actually use this function. The ObjectAnimator is different. It can directly animate any attribute of any object, such as the alpha attribute of View.

However, although ObjectAnimator will be more commonly used, it is actually inherited from ValueAnimator. The underlying animation implementation mechanism is also based on ValueAnimator, so ValueAnimator is still the core class of the entire attribute animation. Since it is an inheritance relationship, the methods that can be used in ValueAnimator can also be used normally in ObjectAnimator, and their usage is very similar. Here, if we want to transform a TextView from regular to full transparent in 5 seconds, and then from full transparent to regular, we can write as follows:

ObjectAnimator animator = ObjectAnimator.ofFloat(textview, "alpha", 1f, 0f, 1f);  
animator.setDuration(5000);  
animator.start();

As you can see, we still call the ofFloat() method to create an instance of ObjectAnimator, but the parameters received in the ofFloat() method have changed a little. The first parameter here requires an object object to be passed in, and we will pass in whatever object we want to animate. Here I pass in a textview. The second parameter is which attribute of the object you want to animate. Since we want to change the opacity of the TextView, we pass in "alpha" here. The following parameters are not fixed length. You can pass in whatever animation you want to complete. The value passed in here means to transform textview from regular to full transparent, and then from full transparent to regular. After that, you call the setDuration() method to set the duration of the animation, and then call the start() method to start the animation.

For other uses, we can draw inferences from one example. For example, if we want to rotate TextView 360 degrees, we can write as follows:

ObjectAnimator animator = ObjectAnimator.ofFloat(textview, "rotation", 0f, 360f);  
animator.setDuration(5000);  
animator.start(); 

The following is an animation set, which changes the rotation, translation, scaling and transparency of the View in 5 seconds:

AnimationSet set = new AnimatiorSet();
set.playTogether(
ObjectAnimator.ofFloat(myView,"rotationX", 0 , 360);
ObjectAnimator.ofFloat(myView,"rotationY", 0 , 180);
ObjectAnimator.ofFloat(myView,"rotation", 0 , -90);
ObjectAnimator.ofFloat(myView,"translationX", 0 , 90);
ObjectAnimator.ofFloat(myView,"translationY", 0 , 90);
ObjectAnimator.ofFloat(myView,"scaleX", 1 , 1.5f);
ObjectAnimator.ofFloat(myView,"scaleY", 1 , 0.5f);
ObjectAnimator.ofFloat(myView,"alpha", 1 , 0.25f,1);
);
set.setDuration(5*1000).start();

In addition to code implementation, attribute animation can also be defined through XML. Attribute animation needs to be defined in the res/animator directory. Its syntax is as follows:

<set
android:ordering=["together"|"sequentially"]>

<objectAnimator
android:prooertyName="String"
android:duration="int"
android:valueFrom="float | int | color"
android:startOffset="int"
android:repetCount=""int"
android:repeatMode["restart" | "reverse"]
android:valueType=["intType" | "floatType"]/>

<animator
android:duration="int"
android:valueFrom="float | int |color"
android:valueTo="float | int |color"
android:startOffset="int"
android:repeatCount="int"
android:repeatMode=["restart" | "reverse"]
android:valueType=["intType" | "floatType]


   <set>
  ...

   </set>
</set>

The meaning of each attribute in the < objectanimator > tag:

android:propertyName -- the name of the property of the action object of the property animation;

android:duration-- indicates the duration of the animation;

android:valueFrom -- indicates the starting value of the attribute;

android:valueTo -- indicates the end value of the attribute;

android:startOffset -- indicates the delay practice of animation. When the animation starts, how many milliseconds will it take to play the animation;

android:repeatCount -- indicates the number of iterations of the animation;

android:repeatMode -- represents the repetition mode of animation;

android:valueType -- indicates the type of the property specified by android:propertyName. There are two options: "intType" and "floatType", respectively indicating that the property types are integer and floating-point. In addition, if the property specified by android:properName represents color, you do not need to specify android:valueType, and the system will automatically process the property of color type.

Reference article:

http://www.cnblogs.com/whoislcj/p/5730520.html

 

Published 10 original articles, won praise 14, visited 769
Private letter follow

Tags: Android Attribute xml encoding

Posted on Tue, 11 Feb 2020 08:52:16 -0500 by cupboy