This is the second day of my participation in the August More text Challenge. For details, see:August is more challenging

Borrow more article challenge to urge oneself in August, thank gold!

First, the concept and classification of animation

Mastering animation is a basic skill for Android development. Animation, when used properly in certain situations, can be more effective with less effort. Android animation can be divided into view animation and property animation, view animation can be divided into tween animation and frame animation, let’s take a look at the following picture:

The essential difference between a View animation and a property animation is whether an object’s property row has been changed. The movement of a View animation is only a visual movement; the View is not moving, per se.

2. View animation

View animation works on an entire View, such as a TextView, Button, or other control. It has no way to manipulate the properties of the object, which is the function of property animation.

(1) Tween animation

Tween animation can be divided into the following different types:

  • Translation of animation
  • Zoom animation
  • Select the animation
  • Transparency animation

In fact, the general steps are similar, so let’s use pan animation to write an example.

  1. Create a new anim folder in the res directory.
  2. Create the translate_animation file in the anim folder.

      
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:repeatCount="0"
    android:toXDelta="500"
    android:toYDelta="500">
  
    <! < span style = "box-sizing: border-box; color: black; color: black; color: black;
    
    <! -- Android :duration="3000" // Animation duration (ms) Android :fillBefore =" true "android:fillBefore =" true" android:fillBefore =" true "android:fillBefore =" true" Android :fillAfter = "false" android:fillAfter = "false" android:fillAfter = "false" Android :fillAfter = "false" Android :fillAfter = false Default: false Android :fillEnabled= "true" // Whether to apply the fillBefore value has no effect on the fillAfter value. The default value is true. Android :repeatMode= "restart" // Select the animation mode of repeating playback. Restart indicates positive order replay, reverse indicates reverse order replay, Defaults to restart | android: repeatCount = "0" / / replay number (so the animation plays = replay number + 1), Android :interpolator = @[package:]anim/interpolator_resource // interpolator for infinite android:interpolator = @[package:]anim/interpolator_resource // interpolator for infinite
  

</translate>
Copy the code

Take the translation animation as an example, fromXDelta represents the position from which the translation begins in the direction of X (fromXDelta naturally represents the direction of Y), and toXDelta represents the position of X (the same is true for toYDelta).

3. Through AnimationUtils. LoadAnimation loading animation (), use the code below:

val translateAnimation = AnimationUtils.loadAnimation(this, R.anim.translate_animation)
translateAnimation.duration = 3000
Copy the code

  1. Button1. startAnimation(translateAnimation)

  2. Set the listen event for the animation

translateAnimation.setAnimationListener(object : Animation.AnimationListener {
   override fun onAnimationStart(animation: Animation?). {
       Log.d("yangchao "."translateAnimation begin")}override fun onAnimationEnd(animation: Animation?). {
       Log.d("yangchao "."translateAnimation in process")}override fun onAnimationRepeat(animation: Animation?). {
       Log.d("yangchao "."translateAnimation end")}})Copy the code

The effect is as follows:

(2) Frame animation

Frame animation, as the name suggests, is a patchwork of pictures together to form a GIF. Specific practices are as follows:

  • Create a new frame_animation file under Drawable:

      
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
   android:oneshot="false">
   <item
       android:drawable="@drawable/a1"
       android:duration="100" />
   <item
       android:drawable="@drawable/a2"
       android:duration="100" />
   <item
       android:drawable="@drawable/a3"
       android:duration="100" />
   <item
       android:drawable="@drawable/a4"
       android:duration="100" />
</animation-list>
Copy the code
  • A1-a4 is the name of the image stored under drawble. Oneshot indicates whether the animation a1-A4 is played only once. The false setting here means that the animation A1-A4 is played continuously in a loop.
  • The following code looks like this:
// Set the Resource for the ImageView to load the previous animated XML
imageView.setImageResource(R.drawable.frame_animation)
// Obtain the drawable object of the ImageView and convert it forcibly
val animationDraw = imageView.drawable as AnimationDrawable
// Start the animation
animationDraw.start()
Copy the code

Three, attribute animation

View animation essentially changes the View visual effects, such as using tween animation to move Buttom from the top left corner to the bottom right corner, but clicking on the bottom right corner does nothing. Property animation works on any Java object, not just a View object. In a certain period of time to constantly change the value, so as to achieve the object in the attribute animation effect.

Property animation has two main classes for controlling ValueAnimator and ObjectAnimator.

1, the ValueAnimator

By controlling the change of the value, and then constantly manually assigned to the attributes of the object, so as to achieve the animation effect. ValueAnimator has three important methods:

  • ValueAnimator.ofInt(int valus)
  • ValueAnimator.ofFloat(int valus)
  • ValueAnimator.ofObject(int valus)

The first two have built-in evaluators, and the third requires us to define a custom evaluator that extends from the TypeEvaluator class and overrides the evaluate method. The example code is as follows:

public class PointEvaluator implements TypeEvaluator<Point> {
    @Override
    public Point evaluate(float fraction, Point startValue, Point endValue) {
      // New value = start value + (End value - start value) * Duration
        float x = startValue.getX() + (endValue.getX() - startValue.getX()) * fraction;
        float y = startValue.getY() + (endValue.getY() - startValue.getY()) * fraction;
      // This is essentially creating an object from scratch
        return newPoint(x, y); }}Copy the code
(1) Interpolator and estimator
  • Interpolator: determines the pattern of variation of values (Interpolator, Interpolator)
  • TypeEvaluator: Determines specific changes in values
// Animate the object at the beginning and the object at the end
Point startPoint = new Point(RADIUS, RADIUS);
Point endPoint = new Point(700.1000);

ValueAnimator valueAnimator = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);
valueAnimator.setDuration(3000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   @Override
   public void onAnimationUpdate(ValueAnimator animation) { curPoint = (Point) animation.getAnimatedValue(); invalidate(); }}); valueAnimator.start();Copy the code

2, ObjectAnimator

ObjectAnimator.ofFloat(Object object, String property, float …. values)

For attribute animation, its extensibility lies in that it is not limited to the animations limited by the system, but can customize the animation, that is, customize the object’s properties, and realize the animation by operating the customized properties.

The use of attribute animation mainly has the following:

Iv. Summary of animation foundation

View animation is essentially a visual effect on a View, and property animation is an action on an object property.