A series of

• Animation | Android frame animation is analysed
• Shallow of animation animation | Android attributes
• Animation | animation analyses between Android to fill
• Animation | Android transition animations

What is tween animation

Baidu Baike’s explanation: “Tween animation” is needed between two key frames to realize the motion of the picture; The interpolation frame between two key frames after inserting tween animation is obtained by computer automatic operation

In Android, Animation is used to perform a series of transformations on a single picture to create an Animation, and rotate, fade, move and stretch the graphics to achieve the effect of Animation

Classification of tween animation

Tween animation can be subdivided into 5 categories

type	meaning	Corresponding Animation subclass	Corresponding XML attribute
Translate	Translation of animation	TranslateAnimation	translate
Scale	Zoom animation	ScaleAnimation	scale
Rotate	Rotating animation	RotateAnimation	rotate
Alpha	Transparency animation	AlphaAnimation	alpha
Set	Combination of animation	AnimationSet	set

How to use tween animation

There are two ways to use tween animation XML and code dynamic Settings

XML way

Need under the res/anim folder to create the corresponding static Animation resources, in the use of AnimationUtils. LoadAnimation (this, resource ID) way to get to the Animation object, Finally, use view.startAnimation(anim) to set the view to be animated

Code sets

Use the Animation’s descendant class, such as TranslateAnimation, to set the required properties and finally use view.startAnimation(anim) to set the view to which the Animation is to be added

Transparency animation

 btn_alpha.setOnClickListener {

    // Mode 1 code Settings
    /** * Parameter 1 transparency at the beginning of fromAlpha animation * parameter 2 Transparency at the end of toAlpha animation */
    val anim = AlphaAnimation(1f.0f)
    anim.duration = 1000
    view_anim.startAnimation(anim)

    // Mode 2 XML Settings
    val animation = AnimationUtils.loadAnimation(this, R.anim.alpha)
    view_anim_2.startAnimation(animation)
}
Copy the code

      
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="1.0"
    android:toAlpha="0.0">
</alpha>
Copy the code

parameter	meaning
toAlpha	Transparency at the end of the animation
fromAlpha	Transparency at the beginning of the animation

Rotating animation

 / / rotation
btn_rotate.setOnClickListener {
    // Mode 1 code Settings
    val anim = RotateAnimation(0f.360f.0f.0f)
    anim.duration = 1000
    view_anim.startAnimation(anim)


    // Mode 2 XML Settings
    val animation = AnimationUtils.loadAnimation(this, R.anim.rotate)
    view_anim_2.startAnimation(animation)
}

Copy the code

      
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromDegrees="0"
    android:pivotX="0"
    android:pivotY="0"
    android:toDegrees="360">

</rotate>
Copy the code

parameter	meaning
fromDegrees	The starting point of
fromDegrees	The end of the Angle
pivotX	Initial X coordinate
pivotY	End Y coordinate

Zoom animation

/ / zoom
btn_scale.setOnClickListener {
    // Mode 1 code Settings
    val anim = ScaleAnimation(
        1.0 f.0f.1.0 f.0f,
        Animation.RELATIVE_TO_SELF, 0.5 f,
        Animation.RELATIVE_TO_SELF, 0.5 f)
    anim.duration = 1000
    view_anim.startAnimation(anim)

    // Mode 2 XML Settings
    val animation = AnimationUtils.loadAnimation(this, R.anim.scale)
    view_anim_2.startAnimation(animation)
}
Copy the code

      
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromYScale="1.0"
    android:toYScale="0.0"
    android:fromXScale="1.0"
    android:toXScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    >

</scale>
Copy the code

parameter	meaning
fromXScale	Initial X scaling
toXScale	End X scaling
fromYScale	Initial Y scaling
toYScale	End Y scaling
pivotX	The position of the center point X when the image is zoomed
pivotY	The position of the center point Y when the image is zoomed

Translation of animation

/ / translation
btn_translate.setOnClickListener {

    // Mode 1 code Settings
    val anim = TranslateAnimation(
        Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 0.5 f,
        Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 0f
    )
    anim.duration = 1000
    view_anim.startAnimation(anim)

    // Mode 2 XML Settings
    val animation = AnimationUtils.loadAnimation(this, R.anim.translate)
    view_anim_2.startAnimation(animation)
}
Copy the code

      
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="0"
    android:toXDelta="50%p"
    android:fromYDelta="0"
    android:toYDelta="0"
  >
</translate>
Copy the code

parameter	meaning
fromXDelta	Initial X migration
toXDelta	End X Offset
fromYDelta	Initial Y shift
toYDelta	End Y Offset

Combination of animation

 // Combine animation
btn_set.setOnClickListener {
    // Mode 1 code Settings
    //true: all children use the same interpolator
    val anim = AnimationSet(true)
    anim.addAnimation(
        TranslateAnimation(
            Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 0.5 f,
            Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 0f
        )
    )
    anim.addAnimation(AlphaAnimation(1f.0f))
    anim.duration = 1000
    view_anim.startAnimation(anim)

    // Mode 2 XML Settings
    val animation = AnimationUtils.loadAnimation(this, R.anim.set)
    view_anim_2.startAnimation(animation)
}
Copy the code

      
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="50%p"
        android:toYDelta="0" />

</set>
Copy the code

50%p is different from 50%

In the example above we set the pan animation with a 50% P

      
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="0"
    android:toXDelta="50%p"
    android:fromYDelta="0"
    android:toYDelta="0"
  >
</translate>
Copy the code

The Android :toXDelta=”50%p” represents moving 50% of the width of the parent control to the right, starting from the top left corner of the current View

If you change it to Android :toXDelta=”50%”, you move 50% of your width to the right

Now you can just write a number, how much you’re moving

RELATIVE_TO_PARENT parsing

When we use the pan Animation we notice that we have one parameter: animation.relative_to_parent

   TranslateAnimation(
            Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 0.5 f,
            Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 0f
        )
Copy the code

The effect is the same as 50% P used in XML

• ABSOLUTE(default) Coordinate value relative to the zero point of the control
• Animation.relative_to_self The percentage of width or height relative to itself (1.0 means 100%)
• Animation.RELATIVE_TO_PARENT The percentage of width or height relative to the parent control.

The listener

The monitor can be added using the setAnimationListener method

public void setAnimationListener(AnimationListener listener) 
Copy the code

Here’s the add to Translate

val anim = TranslateAnimation(
        Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 0.7 f,
        Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 0f
    )
    anim.repeatCount = ValueAnimator.INFINITE
    anim.repeatMode = ValueAnimator.REVERSE
    anim.duration = 2000
    anim.setAnimationListener(object : Animation.AnimationListener {
        override fun onAnimationStart(animation: Animation?) {
            view_anim.text = "Tween animation begins."
        }

        override fun onAnimationEnd(animation: Animation?) {
            view_anim.text = "End of tween animation."
        }

        override fun onAnimationRepeat(animation: Animation?) {
            view_anim.text = "Tween animation repeat"
        }
    })
    view_anim.startAnimation(anim)

    
    // Click view to trigger the Cancel method
    view_anim.setOnClickListener {
    anim.cancel()
}
Copy the code

The click event is triggered when the View’s original position is clicked, which is also a feature of tween animation