[Android] animation

1. understand

Animation has the following two situations

Transparency, scaling, rotation, and translation of the same graphic can be changed on the interface through the view (View animation)

Continuously switch and display different pictures at the same position on the interface (Drawable animation)

Classification of animation

View Animation
Drawable Animation

Android provides two ways to implement animation

pure coding
The way of xml configuration

2. Use animation

1) Classification of View animation

single animation

Scale animation (ScaleAnimation)
Rotate Animation (RotateAnimation)
Transparency animation (AlphaAnimation)
Translation animation (TranslateAnimation)

composite animation

Animations composed of multiple single animations

2) The use of View animation

Common functions of Animation

setDuration(long durationMillis): set the duration (in ms)
setStartOffset(long startOffset): Set the duration of the start (in ms)
setFillBefore (boolean fillBefore): Set whether to fix the initial state at the end
setFillAfter (boolean fillAfter): Set whether to fix the final state
setAnimationListener (AnimationListener listener): set animation listening
coordinate type

Animation.ABSOLUTE: value (default in px)
Animation.RELATIVE_TO_SELF: percentage, such as 50% (calculated based on the width and height of the current view)
Animation.RELATIVE_TO_PARENT: percentage + p, such as: 50% p (calculated based on the width and height of the parent view)

boot animation

view.startAnimation(animation)

end animation

view.clearAnimation()

Animation listener: AnimationListener

onAnimationStart(Animation animation): callback for animation start
onAnimationEnd(Animation animation): The callback for the end of the animation
onAnimationRepeat(Animation animation): The animation is repeated

2. How to specify coordinates (center point, starting point, target point)

a. The origin of the coordinate system: the upper left corner of the view

b. code n

Absolute: n px

Relative to itself: viewWidth*n px

Relative to parent: parentViewWidth*n px

c.xml

n: absolute type, n px

n%: relative to its own type, viewWidth*n% px

n%p: relative to the parent type: parentViewWidth*n% px

Animating with Drawables

1. Scale Animation (ScaleAnimation)

public ScaleAnimation(float fromX, float toX, float fromY, float toY,
        int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {

 /*ScaleAimation缩放动画（代码）
    * 1.创建动画对象
    * 2.设置
    * 3.启动动画
    * */
    fun startCodeScale(){
        textView.text="Code缩放动画：宽度从0.0到1.0，高度从0.0到1.0，缩放的圆心为顶部中心点，延迟1s开始，持续5s，最终还原"
        var animation=ScaleAnimation(0f,1f,0f,1f,Animation.ABSOLUTE,
            (img.width/2).toFloat(),Animation.ABSOLUTE,0f)
        animation.startOffset=1000
        animation.duration=5000
        animation.fillBefore=true
        img.startAnimation(animation)

    }

/*ScaleAimation缩放动画（xml文件方式）
    * 1.定义动画文件
    * 2.加载动画文件得到动画对象
    * 3.启动动画
    * */
    @SuppressLint("ResourceType")
    fun startXmlScale(){
        textView.text="Xml缩放动画：宽度从0.0到1.0，高度从0.0到1.0，缩放的圆心为右下角，延迟1s开始，持续5s，最终还原"
        var animation:Animation=AnimationUtils.loadAnimation(this,R.xml.scale)
        img.startAnimation(animation)
    }

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
  android:fromXScale="0"
    android:fromYScale="0"
    android:toXScale="1"
    android:toYScale="1"
    android:startOffset="1000"
    android:duration="3000"
    android:pivotX="100%"
    android:pivotY="100%"
    android:fillAfter="true">
</scale>
<!--Xml缩放动画：宽度从0.0到1.0，高度从0.0到1.0，缩放的圆心为右下角，延迟1s开始，持续2s，最终还原-->

2. Rotate Animation (RotateAnimation)

public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
        int pivotYType, float pivotYValue) {

/*
    * RotateAnimation旋转动画（代码）
    * */
    fun startCodeRotate(){
        textView.text="Code旋转动画：以图片中心点为中心，从负90度到正90度，持续5s"
        var animation:RotateAnimation=RotateAnimation(-90f,+90f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f)
        animation.duration=5000
        img.startAnimation(animation)
    }
    /*
    * RotateAnimation旋转动画（xml）
    * */
    @SuppressLint("ResourceType")
    fun startXmlRotate(){
        textView.text="Xml旋转动画：以左顶点为坐标，从负90度到正90度，持续5s"
        var animation:Animation=AnimationUtils.loadAnimation(this,R.xml.rotate)
        img.startAnimation(animation)
    }

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="-90"
    android:duration="5000"
    android:pivotX="0%"
    android:pivotY="0%"
    >

</rotate>
<!--Xml旋转动画：以左顶点为坐标，从负90度到正90度，持续5s-->

3. Transparency animation (AlphaAnimation)

public AlphaAnimation(float fromAlpha, float toAlpha)

/*
    * AlphaAnimation透明度动画（代码）
    * */
    fun startCodeAlpha(){
        textView.text="Code透明度动画：从完全透明到完全不透明，持续5s"
        var animation:Animation=AlphaAnimation(0f,1f)
        animation.duration=5000
        img.startAnimation(animation)
    }
    @SuppressLint("ResourceType")
    fun startXmlAlpha(){
        textView.text="Xml透明度动画：从完全不透明到完全透明，持续5s"
        var animation=AnimationUtils.loadAnimation(this,R.xml.alpha)
        img.startAnimation(animation)

    }

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1"
    android:toAlpha="0"
    android:duration="5000"
    >
</alpha>

4. Translation animation (TranslateAnimation)

public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
        int fromYType, float fromYValue, int toYType, float toYValue)

 /*TranslateAnimation平移动画(代码)
    * */
    fun startCodeTranslate(){
        textView.text="Code移动动画：向右移动一个自己的宽度，向下移动一个自己的高度，持续2s"
        var animation=TranslateAnimation(Animation.ABSOLUTE,0f,Animation.RELATIVE_TO_SELF,1f,Animation.ABSOLUTE,0f,Animation.RELATIVE_TO_SELF,1f)
        animation.duration=5000
        img.startAnimation(animation)
    }
    /*TranslateAnimation平移动画(xml)
    * */
    @SuppressLint("ResourceType")
    fun startXmlTranslate(){
        textView.text="Xml移动动画：从屏幕的右边逐渐回到原来的位置，持续2s"
        var animation=AnimationUtils.loadAnimation(this,R.xml.translate)
        img.startAnimation(animation)
    }

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="100%f"
    android:toXDelta="0f"
    android:fromYDelta="0f"
    android:toYDelta="0f"
    android:druation="2000"
    >

</translate>
<!--从屏幕的右边逐渐回到原来的位置，持续2s-->

5. Composite animation

/*AnimationSet复合动画(代码)
    * 1.创建透明动画并设置
    * 2.创建旋转动画并设置
    * 3.创建复合动画并设置
    * 4.添加两个动画
    * 5.启动复合动画对象
    * */
    private fun startCodeAnimationSet(){
        textView.text="Code复合动画：通明度从透明到不透明，持续2s，接着进行旋转360度的动画，持续1s"
         var alphaAnimation=AlphaAnimation(0f,1f)
        alphaAnimation.duration=2000
        var rotateAnimation=RotateAnimation(0f,360f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f)
        rotateAnimation.duration=1000
        rotateAnimation.startOffset=2000
        var animationSet=AnimationSet(true)
        animationSet.addAnimation(alphaAnimation)
        animationSet.addAnimation(rotateAnimation)
        img.startAnimation(animationSet)
    }
    @SuppressLint("ResourceType")
    fun startXmlAnimationSet(){
        textView.text="Code复合动画：通明度从透明到不透明，持续2s，接着进行旋转360度的动画，持续1s"
        var animation=AnimationUtils.loadAnimation(this,R.xml.set)
        img.startAnimation(animation)
    }

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:druation="2000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
    />
    <rotate
        android:druation="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360"
    />
</set>

6. Animation monitoring

@SuppressLint("ResourceType")
    fun test(){
        textView.text="Xml旋转动画：以左顶点为坐标，从负90度到正90度，持续5s"
        var animation:Animation=AnimationUtils.loadAnimation(this,R.xml.rotate)
        animation.repeatCount=3//重复三次
        img.startAnimation(animation)
    }

7. Constantly switch and display different pictures at the same position on the interface

<?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/img1" android:duration="500"/>
    <item android:drawable="@drawable/img2" android:duration="500"/>
    <item android:drawable="@drawable/img3" android:duration="500"/>
    <item android:drawable="@drawable/img4" android:duration="500"/>
</animation_list>

   <ImageView
        android:id="@+id/nv_dv"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="160dp"
        android:background="@drawable/animation_list"/>

1. understand

2. Use animation

Animating with Drawables

Guess you like