Android Development Art Exploration Study Notes (7)

  • 2020-12-16 06:06:28
  • OfStack

Chapter 7 Android Animation in-depth analysis

Android animation is divided into three types: View animation, frame animation, and attribute animation. The frame animation belongs to the View animation.

7.1 View animation

View animation targets View and has four animation effects: translation (Translate), zooming (Scale), rotation (Rotate), and transparency (Alpha).

7.1.1 Types of View animations

Save the path of View animation: res/anim/filename. xml. XML format syntax is as follows:


<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@anim/interpolator_resource"
android:shareInterpolator="true|false">
<alpha
android:fromAlpha="float"<!--  Transparency starting value -->
android:toAlpha="float"/><!--  Transparency end value -->
<scale
android:fromXScale="float"<!-- Scale the starting value horizontally  -->
android:toXScale="float"<!-- Scale the end value horizontally  -->
android:fromYScale="float"<!-- Scale the starting value vertically  -->
android:toYScale="float"<!-- Scale the end value vertically  -->
android:pivotX="float"<!-- Zoom axis point x coordinates  -->
android:pivotY="float"/><!-- Zoom axis point y coordinates  -->
<translate
android:fromXDelta="float"<!--x Initial position -->
android:fromYDelta="float"<!--y Initial position -->
android:toXDelta="float"<!--x End position -->
android:toYDelta="float"/><!--y End position -->
<rotate
android:fromDegrees="float"<!-- The starting point of  -->
android:toDegrees="float"<!--  The end of the Angle -->
android:pivotX="float"<!--  The axis of rotation point x coordinates  -->
android:pivotY="float"/><!--  The axis of rotation point y coordinates -->
<set>
...
</set>
</set> 

< set > The tag represents a collection of animations, corresponding to the AnimationSet class, and other animation collections can be nested within them.

android: The interpolator interpolator specifies how fast the animation has run. The default is the acceleration and deceleration interpolator.

android: Whether an animation in an shareInterpolator collection is shared with the collection with 1 interpolator.

android: Duration of duration animation

android: Whether View stays in the end position after the end of the fillAfter animation.

< scale > , < rotate > The central axis point is by default the center of View (it looks like the top left corner to be verified).

Load the animations defined in xml in the code:


Animation animation = AnimationUtils.loadAnimation(this, R.anim.view1);
button.startAnimation(animation); 

Use the setAnimationListener method of Animation to add listeners to View animations.

7.1.2 Custom View animations

Principle: Inherit the abstract class Animation, then override its initialize and applyTransformation methods, initialize it in initialize, and transform the corresponding matrix in applyTransformation. camera is usually used to simplify the process of matrix transformation. The process of custom View animation is mainly the process of matrix transformation. Examples can be found in Rotate3dAnimation.

7.1.3 frame animation

Frame animation is simply a sequence of 1 set of predefined images. Use frame animation with AnimationDrawable. XML format syntax is as follows:


<?xml version="1.0" encoding="utf-8" ?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true|false">
<item android:drawable="@mipmap/ic_launcher" android:duration="500"/>
<item android:drawable="@mipmap/ic_launcher" android:duration="500"/>
<item android:drawable="@mipmap/ic_launcher" android:duration="500"/>
</animation-list> 

When used, it is directly used as the background of View and played through Drawable.


button.setBackgroundResource(R.drawable.view2);
AnimationDrawable drawable=(AnimationDrawable)button.getBackground();
drawable.start(); 

7.2 Special usage scenarios of View animation

7.2.1 LayoutAnimation

On ViewGroup, specify 1 animation for ViewGroup so that it will have this animation when its children appear.

Steps:

(1) Define LayoutAnimation


<?xml version="1.0" encoding="utf-8" ?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:delay="0.5"
android:animationOrder="normal"
android:animation="@anim/anim_item"/> 

android: The time delay for delay child element to start animation. For example, set duration child element to 200ms, 0.5 means that every child element needs to delay 100ms to start playing animation, that is, the first child element needs to start playing after 100ms, the second one needs to start playing after 200ms, the third one needs to start playing after 300ms, and so on.

android:animationOrder child element animation sequence, normal (sequential display), reverse (reverse display), random (random).

(2) Specify animation for child elements


<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:interpolator="@android:anim/accelerate_interpolator"
android:shareInterpolator="true">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0" />
<translate
android:fromXDelta="500"
android:toYDelta="0" />
</set> 

(3) Specify the attribute android:layoutAnimation for ViewGroup


android:layoutAnimation="@anim/anim_layout" 

Or you can animate ViewGroup via LayoutAnimationController.


Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_item);

LayoutAnimationController controller=new LayoutAnimationController(animation);
controller.setDelay(0.5f);
controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
linearlayout.setLayoutAnimation(controller); 

7.2.2 Switching effect of Activity

Use the overridePendingTransition(int enterAnim, int exitAnim) method. Note that this method must be invoked after startActivity or finish to take effect.

enterAnim - Animation of Activity when it is turned on

exitAnim - Animation when Activity exits

Start the Activity:


Intent intent =new Intent(this,TestActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.enter_anim,R.anim.exit_anim); 

Exit Activity:


@Override
public void finish() {
super.finish();
overridePendingTransition(R.anim.enter_anim,R.anim.exit_anim);
} 

7.3 Attribute animation

API level must be greater than or equal to 11, the storage path is res/animator/ directory, attribute animation can be done on any object animation, common are ValueAnimator, ObjectAnimator.

7.3.1 Use attribute animation

The default time interval of attribute animation is 300ms and the default frame rate is 10ms/ frame, which can change the object from one attribute value to another within one time interval. If you want attribute animation to be compatible with lower versions of the system, you need to use the NineOldAndroids open source animation library.

Examples of how to use property animation:

(1) Change the translationY attribute of an object and shift it up by 1 distance along the Y axis: its height.
ObjectAnimator.ofFloat(myObject,"translationY",-myObject.getHeight());

(2) Change the background color of one View and make the background color change from 0xFFFF8080 to 0xFF8080FF in 3 seconds. The animation will loop endlessly and add the reverse effect.


Animation animation = AnimationUtils.loadAnimation(this, R.anim.view1);
button.startAnimation(animation); 
0

The XML format syntax for the attribute animation is as follows:


Animation animation = AnimationUtils.loadAnimation(this, R.anim.view1);
button.startAnimation(animation); 
1

android: The number of repeatCount animation cycles, default is 0, -1 is infinite loop;

android:repeatMode repeat: continuous repetition; reverse: Repeat backwards (after the first play, the second time backwards, and the third time over again).

Once the attribute animation is defined in XML, it can be used in the java code


Animation animation = AnimationUtils.loadAnimation(this, R.anim.view1);
button.startAnimation(animation); 
2

In actual development, it is recommended to use code for property animation rather than xml.

7.3.2 Understand interpolators and estimators

Interpolator: Calculates the percentage change of the current attribute value based on the percentage time elapsed;

Estimator: Calculates the changed attribute value based on the percentage of the current attribute.

7.3.3 Property animation listener

AnimatorListener listens for the start, end, cancel and repeat of the animation;

AnimatorUpdateListener listens for the entire animation.

7.3.4 Animate arbitrary attributes

To animate object's attribute abc, the following two conditions should be met if the animation is to take effect:

(1) object must provide setAbc method. If the initial value is not passed during the animation, then getAbc method must be provided; otherwise, the program will directly provide crash.

(2) Changes made to attribute abc by setAbc of object must be reflected in some way, such as bringing about changes to UI.

See Method 2 on page p285 for how to animate an original object.

7.3.5 Working principle of attribute animation

Property animation requires the animate object to provide the set method for the property. The property animation removes the set method several times according to the initial and final value of the property you passed, as well as the effect of the animation. Each time the value passed to the set method is different, it is precisely that the value passed is getting closer and closer to the final value over time. The get method is also provided if the initial value is not passed during the animation, because the system needs to get the initial value of the property.

7.4 Precautions for using animation

Note: View animation is to animate the image of View, which does not really change the state of View. Therefore, sometimes View cannot be hidden after the completion of animation, that is, setVisibility (ES293en.GONE) is invalid. At this time, just call ES295en.clearAnimation () to clear the View animation to solve the problem.

When View is moved (translated), on the previous SYSTEM of Android3.0, the click event cannot be triggered by the new position, whether it is an View animation or an attribute animation, while the click event can still be triggered by the old position. Even though View no longer exists visually, after moving View back to its original location, the click from the original location continues to take effect. Starting with 3.0, the click event trigger bit of the property animation is set to the moved position, but the View animation remains in the original position.

So much for Android development art Exploration study notes (7), we will continue to update the android art exploration related knowledge, please continue to pay attention to this site, thank you.


Related articles: