frame animation

What is frame animation?

Frame animation is very easy to understand. In fact, it is simply collected from N static pictures, and then we display these pictures in sequence through control. Because of the "visual residue" of the human eye, it will cause us the "illusion" of animation, and play the movie The principle is the same!

Frame animation using:

create project
Import resources, put image resources into the mipmap folder

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>

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"/>

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();

    }
}

turn on 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();
    }
}

Tween animation The resource file of the tween animation, placed in the anim folder

What is motion tweening?

Frame animation is to simulate the animation effect by continuously playing pictures, while the tween animation developer only needs to specify the animation start and animation end "key frames", and the "intermediate frame" of the animation change is calculated and completed by the system!

The process used by tween animation:

Classification of motion tweens:

AlphaAnimation : Transparency gradient effect, specify the start and end transparency when creating, as well as the duration of the animation, the range of transparency (0,1), 0 is completely transparent, 1 is completely opaque; corresponding to the < alpha /> tag !

<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"  


- fromAlpha :起始透明度
- **toAlpha**:结束透明度
- 透明度的范围为：0-1，完全透明-完全不透明

ScaleAnimation : Scale gradient effect. When creating, you need to specify the start and end zoom ratios, as well as the zoom reference point, and the duration of the animation; corresponding to the < scale /> tag!

<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"/>


- **fromXScale**/**fromYScale**：沿着X轴/Y轴缩放的起始比例
- **toXScale**/**toYScale**：沿着X轴/Y轴缩放的结束比例
- **pivotX**/**pivotY**：缩放的中轴点X/Y坐标，即距离自身左边缘的位置，比如50%就是以图像的 中心为中轴点

TranslateAnimation : Displacement gradient effect, specify the start and end positions when creating, and specify the duration of the animation; corresponding to the < translate /> tag!

<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坐标
- **toXDelta**/**toYDelta**：动画结束位置的X/Y坐标

RotateAnimation : Rotation gradient effect, when creating, specify the start and end rotation angles of the animation, as well as the duration of the animation and the axis of rotation; corresponding to the < rotate /> tag

<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"/> 

fromDegrees/toDegrees：旋转的起始/结束角度
repeatCount：旋转的次数，默认值为0，代表一次，假如是其他值，比如3，则旋转4次 另外，值为-1或者infinite时，表示动画永不停止
repeatMode：设置重复模式，默认restart，但只有当repeatCount大于0或者infinite或-1时 才有效。还可以设置成reverse，表示偶数次显示动画时会做方向相反的运动！

AnimationSet : Combined gradient, which is the combination of the previous gradients, corresponding to the < set /> tag

<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>

use:

//                Animation animation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.anim_alpha);
//                iv_babi.startAnimation(animation);
//                Animation animation1=AnimationUtils.loadAnimation(MainActivity.this,R.anim.alpha_scale);
//                iv_babi.startAnimation(animation1);
//                Animation animation2=AnimationUtils.loadAnimation(MainActivity.this,R.anim.anim_translate);
//                iv_babi.startAnimation(animation2);
//                Animation animation3=AnimationUtils.loadAnimation(MainActivity.this,R.anim.anim_rotate);
//                iv_babi.startAnimation(animation3);
//                Animation animation4=AnimationUtils.loadAnimation(MainActivity.this,R.anim.anim_set);
//                iv_babi.startAnimation(animation4);

cutscene

Intent intent=new Intent(MainActivity.this,MainActivity2.class);
startActivity(intent);
overridePendingTransition(R.anim.anim_translate1,R.anim.anim_translate);

You only need to call the overridePendingTransition method when jumping, the first parameter is the entry effect, and the second parameter is the exit effect

Android: frame animation and tween animation