animation

Introduction:

       Adding some animations to the APP will make our application very dazzling. For example, the simplest way to turn off and on the Activity. Of course, custom control animations are definitely necessary~ And the animations in Android are divided into three categories, frame by frame Animation (Frame) and tween animation (Tween) , as well as property animation (Property) introduced after Android 3.0

1. Frame animation The resource file of frame animation is placed in the drawable folder

1. create project

2. Import resources, put image resources into the mipmap folder

3. Write the resource file cat_gif.xml under the drawable folder

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/img_miao1"
        android:duration="80"/>
    <item android:drawable="@mipmap/img_miao2"
        android:duration="80"/>
    <item android:drawable="@mipmap/img_miao3"
        android:duration="80"/>
    <item android:drawable="@mipmap/img_miao4"
        android:duration="80"/>
	。。。

</animation-list>

   4. On the xml page, add <Imageview> and set its background

<ImageView
    android:id="@+id/im_cat"
    android:layout_width="340dp"
    android:layout_height="340dp"
    android:background="@drawable/cat_gif"/>

   5. In the java file, get the imageview and animate its background

public class MainActivity extends AppCompatActivity {

    private ImageView im_cat;
    private AnimationDrawable anim;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        im_cat = findViewById(R.id.im_cat);

        anim = (AnimationDrawable) im_cat.getBackground();

    }
}

   6. Turn on the animation

public class MainActivity extends AppCompatActivity {

    private ImageView im_cat;
    private AnimationDrawable anim;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        im_cat = findViewById(R.id.im_cat);

        anim = (AnimationDrawable) im_cat.getBackground();

        anim.start();
    }
}

2. The resource file of tween animation tween animation is placed under the anim folder

 2.1 How many types of tween animations are there?

    1. AlphaAnimation (transparency gradient)

       anim_alpha.xml：  

<alpha xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    android:fromAlpha="1.0"  
    android:toAlpha="0.1"  
    android:duration="2000"/>

Attribute explanation:

• fromAlpha : initial transparency

• toAlpha : end transparency

• The range of transparency is: 0-1, completely transparent - completely opaque

        

2.ScaleAnimation (scale gradient)

anim_scale.xml：

<scale xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/accelerate_interpolator"  
    android:fromXScale="0.2"  
    android:toXScale="1.5"  
    android:fromYScale="0.2"  
    android:toYScale="1.5"  
    android:pivotX="50%"  
    android:pivotY="50%"  
    android:duration="2000"/>

 Attribute explanation:

• fromXScale / fromYScale : The starting ratio of scaling along the X-axis/Y-axis

• toXScale / toYScale : end scaling along the X-axis/Y-axis

• pivotX / pivotY : X/Y coordinates of the zoomed central axis point, that is, the position from the left edge of itself, for example, 50% is the center of the image as the central axis point

3.TranslateAnimation (displacement gradient)

anim_translate.xm :

<translate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    android:fromXDelta="0"  
    android:toXDelta="320"  
    android:fromYDelta="0"  
    android:toYDelta="0"  
    android:duration="2000"/>

• fromXDelta / fromYDelta : X/Y coordinates of the animation start position

• toXDelta / toYDelta : X/Y coordinates of the animation end position

4. RotateAnimation (rotation gradient)

anim_rotate.xml：

<rotate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    android:fromDegrees="0"  
    android:toDegrees="360"  
    android:duration="1000"  
    android:repeatCount="1"  
    android:repeatMode="reverse"/>

Attribute explanation:

• fromDegrees / toDegrees : start/end angle of rotation

• repeatCount : The number of rotations, the default value is 0, which means one time, if it is other values, such as 3, it will rotate 4 times. In addition, when the value is -1 or infinite, it means that the animation will never stop

• repeatMode : Set the repeat mode, the default is restart , but it is only valid when the repeatCount is greater than 0 or infinite or -1. It can also be set to reverse , which means that when the animation is displayed for an even number of times, it will move in the opposite direction!

5. AnimationSet (combined gradient)

It's very simple, it's just a combination of the previous animations~

anim_set.xml：

<set xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/decelerate_interpolator"  
    android:shareInterpolator="true" >  
  
    <scale  
        android:duration="2000"  
        android:fromXScale="0.2"  
        android:fromYScale="0.2"  
        android:pivotX="50%"  
        android:pivotY="50%"  
        android:toXScale="1.5"  
        android:toYScale="1.5" />  
  
    <rotate  
        android:duration="1000"  
        android:fromDegrees="0"  
        android:repeatCount="1"  
        android:repeatMode="reverse"  
        android:toDegrees="360" />  
  
    <translate  
        android:duration="2000"  
        android:fromXDelta="0"  
        android:fromYDelta="0"  
        android:toXDelta="320"  
        android:toYDelta="0" />  
  
    <alpha  
        android:duration="2000"  
        android:fromAlpha="1.0"  
        android:toAlpha="0.1" />  

</set>  

Summarize:

The process used by tween animation:

        1. Choose which motion tween to use

        2. Create resource files under anim

        3. Use AnimationUtils to load the effect

        4. Start animation