Android animation is divided into three types, namely frame animation, View animation and attribute animation

1. The frame animation

Frame animation is to define a group of sequential pictures in advance, and then keep changing the front display of one, similar to the effect of turning over a book, to produce the feeling of animation, including two steps

• Define an XML file in the res/drawable directory. The root node is the system-supplied animation-list, and then place the specified image
• Use the AnimationDrawable class to play the defined image and animate it

// Define the animation <? The XML version = "1.0" encoding = "utf-8"? > <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/image1" android:duration="200"/> <item android:drawable="@drawable/image2" android:duration="200"/> <item android:drawable="@drawable/image3" android:duration="200"/> <item android:drawable="@drawable/image4" android:duration="200"/> <item android:drawable="@drawable/image5" Android :duration="200"/> </animation-list> // ImageView ImageView = findViewById(R.i.btnimg); imageView.setBackgroundResource(R.drawable.frame_animation_list); AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground(); animationDrawable.start();Copy the code

2.View Animation (Tween animation)

Set the start and end states of a View, and the intermediate states will be completed automatically

Four main effects are supported: pan, Scale, rotate and transparent

Method 1:

• Declare animations in XML
• Used in Activity AnimationUtils. LoadAnimation loading Animation Animation, call the startAnimation

<? The XML version = "1.0" encoding = "utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromYDelta="0" android:toYDelta="0" android:fromXDelta="0" android:toXDelta="100" /> </set> Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_animation); animation.setFillAfter(true); imageView2.startAnimation(animation);Copy the code

Method 2:

Initialize the animation with code

Call the startAnimation

TranslateAnimation animation = new TranslateAnimation(50, 100, 50, 100);

animation.setFillAfter(true);
imageView2.startAnimation(animation);
Copy the code

Note: After using the View animation, the View click event trigger area is still in the same position as when the animation started. Manual layout is required to handle this

Usage scenarios

1.LayoutAnimation

Assigns an animation to a ViewGroup, and then performs this effect whenever its children appear, often in listViews

1. Define the XML of LayoutAnimation

2. Specify specific entry animations

3. Specify the Android :layoutAnimation property for ViewGroup and import the XML of layoutAnimation

// res/anim/anim_layout.xml <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" Android: delay = "0.5" android: animationOrder = "normal" android: animation = "@ anim/anim_item" / >Copy the code

// res/anim/anim_item.xml <? The 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 :toXDelta="0" /> </set>Copy the code

<ListView android:id="@+id/list" android:layout_width="match_parent" android:layout_height="match_parent" android:layoutAnimation="@anim/anim_layout" android:background="#fff4f7f9" android:cacheColorHint="#00000000" Android: divider = "# DDDBDB" android: dividerHeight = 1.0 px "android: listSelector =" @ android: color/transparent "/ >Copy the code

Using code

ListView listView = (ListView) layout.findViewById(R.id.list); Animation animation = AnimationUtils.loadAnimation(this,R.anim.anim_item); LayoutAnimationController controller = new LayoutAnimationController(animation); Controller. SetDelay (0.5 f); controller.setOrder(LayoutAnimationController.ORDER_NORMAL); listView.setLayoutAnimation(controller);Copy the code

2.Activity switching effect

Method 1:

final View frame = findViewById(R.id.frame); Animation alpha = new AlphaAnimation(1, 0); alpha.setDuration(MILLISECOND_1500); alpha.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { } // empty @Override public void onAnimationRepeat(Animation animation) { } // empty @Override public void onAnimationEnd(Animation animation) { frame.setVisibility(View.INVISIBLE); startActivity(i); finish(); }}); frame.startAnimation(alpha);Copy the code

Method 2:

Activity has the default switch effect, we can be customized, mainly use overridePendingTransition (int enterAnima, int exiAnima)

Intent intent = new Intent(MainActivity.this, MainActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.enter_from_right, R.anim.exit_to_left);
Copy the code

3. Property animation

• Property animation can define changes to any property
• Property animation can animate any object, not just UI components.

Areas to define:

• Animation duration. The default is 300ms, which can be specified using the Android :duration property.
• Animation interpolation method. Specified by Android: Interploator.
• Number of animation repeats. Specified by Android :repeatCount.
• Repetitive behavior. Specified by Android :repeatMode.
• The animation set. In the properties resource file, pass the
  
• Frame refresh rate. Specifies how long a frame should be played. The default value is 10 ms.

Property animation API

• Animator: provides a base class for animating properties. This class is rarely used directly.
• ValueAnimator: The main time engine used by attribute animations. It is responsible for calculating the value of each frame’s attribute. Almost all other attribute animations inherit it directly or indirectly.
• ObjectAnimator: A subclass of ValueAnimator that animates the properties of the specified object.
• AnimatorSet: a subclass of Animator used to combine multiple animators.

In addition to these apis, property animations provide a Evaluator that controls how property animations evaluate property values.

• IntEvaluator: calculator that calculates the value of an attribute of type int.
• FloatEvaluator: a calculator used to calculate the value of a float type property.
• ArgbEvaluator: calculator used to calculate the value of a hexadecimal color representation.
• TypeEvaluator: You can customize the calculator.

Steps to create an animation using ValueAnimator:

• Call ValueAnimator’s ofInt(), ofFloat(), or ofObject() static methods to create a ValueAnimator instance.
• Call setXxx() of ValueAnimator to set the duration, interpolation method, number of repetitions, etc.

• Call the start() method of ValueAnimator to start the animation.
• Registers an AnimatorUpdateListener listener for ValueAnimator, which listens for ValueAnimator value changes and applies those values to specified objects.

Usage:

• Create animations using the static factory method of ValueAnimator or ObjectAnimator
• Use resource files to define animations

Use of property animation:

• Create a ValueAnimator or ObjectAnimator object — you can either load the animation from an XML resource file or create the animation directly by calling the static factory methods of ValueAnimator or ObjectAnimator.
• Set properties for the Animator object as needed.
• If you want to listen for Animator’s animation start event, animation end event, animation repeat event, animation value change event, and provide response handling code based on the event, you need to set up a listener for the Animator object.
• If you have multiple animations that need to be played at the same time, you need to combine them using AnimatorSet.
• Call start of the Animator object to start the animation.

ObjectAnimator animator0 = objectAnimator.offloat (imageView2, "alpha", 1f, 0.5f); animator0.setDuration(2000); animator0.start(); ObjectAnimator animator0 = objectAnimator.offloat (imageView2, "alpha", 1f, 0.5f); animator0.setDuration(2000); ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageView2, "scaleX", 0.5f, 1.5f); animator0.setDuration(2000); AnimatorSet set = new AnimatorSet(); set.setDuration(4000); set.playSequentially(animator0, animator1); set.start();Copy the code

Add: SVG animation, because SVG is a vector graphics, the advantage is not distorted after magnification, Android provides components to introduce SVG graphics, if necessary, you can study by yourself.