第六单元补间动画以及帧动画使用

动画的详解

介绍总览 https://www.jianshu.com/p/35d25cc205e7

补间动画

介绍 https://www.jianshu.com/p/733532041f46

属性:
在这里插入图片描述
其中AnimationSet是其余几种以及其他AnimationSet的组合
基本属性：

其中，
Duration：持续时间，单位是毫秒
Interpolator：插值器
插值器列表

Alpha属性

Rorate属性

Scale属性

Translate 属性

AnimationSet

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@[package:]anim/interpolator_resource"
    android:shareInterpolator=["true" | "false"] >
    <alpha
        android:fromAlpha="float"
        android:toAlpha="float" />
    <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float" />
    <translate
        android:fromXDelta="float"
        android:toXDelta="float"
        android:fromYDelta="float"
        android:toYDelta="float" />
    <rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />
    <set>
        ...
    </set></set>

示例
alpha.xml

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

</alpha>

rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    >
<!--   fromDegrees 角度 -->
<!--    旋转中心点 pivotX pivotY-->

</rotate>

scale.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromXScale="1"
    android:toXScale="1.5"
    android:fromYScale="1"
    android:toYScale="0.5"
    android:pivotY="50%"
    android:pivotX="50%"
    >
<!--toXScale 放大的倍数 1.5 放大  0.5 缩小-->
</scale>

translate.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromYDelta="0"
    android:toYDelta="200"
    android:fromXDelta="0"
    android:toXDelta="200"
    >
</translate>

activity中的代码

package com.fenghongzhang.anim.tween;

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.fenghongzhang.anim.R;

public class TweenActivity extends AppCompatActivity {
    
    

    private Button btn;
    private Button btn1;
    private Button btn2;
    private Button btn3;
    private ImageView img;

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

    public void btn(View view) {
    
    
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
        img.startAnimation(animation);
    }

    public void btn1(View view) {
    
    
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
        img.startAnimation(animation);
    }

    public void btn2(View view) {
    
    
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
        img.startAnimation(animation);
    }

    public void btn3(View view) {
    
    
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
        img.startAnimation(animation);
    }

    private void initView() {
    
    
        btn = (Button) findViewById(R.id.btn);
        btn1 = (Button) findViewById(R.id.btn1);
        btn2 = (Button) findViewById(R.id.btn2);
        btn3 = (Button) findViewById(R.id.btn3);
        img = (ImageView) findViewById(R.id.img);
    }

    public void btn4(View view) {
    
    
        AnimationSet animationSet = new AnimationSet(true);
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
        Animation animation2 = AnimationUtils.loadAnimation(this, R.anim.scale);

        animationSet.addAnimation(animation);
        animationSet.addAnimation(animation2);

        img.startAnimation(animationSet);
    }

    //动态创建动画
    public void btn5(View view) {
    
    
        TranslateAnimation translateAnimation = new TranslateAnimation(0, 300, 0, 300);
        translateAnimation.setDuration(3000);
        translateAnimation.setAnimationListener(new Animation.AnimationListener() {
    
    
            @Override
            public void onAnimationStart(Animation animation) {
    
    
                Toast.makeText(TweenActivity.this, "start", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationEnd(Animation animation) {
    
    
                Toast.makeText(TweenActivity.this, "end", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
    
    
                Toast.makeText(TweenActivity.this, "重复", Toast.LENGTH_SHORT).show();
            }
        });
        img.startAnimation(translateAnimation);
    }
}

逐帧动画

介绍 https://www.jianshu.com/p/225fe1feba60

方式一

具体使用

步骤1：将动画资源（即每张图片资源）放到 drawable文件夹里

技巧：
找到自己需要的gif动画
用 gif分解软件（如 GifSplitter）将 gif 分解成一张张图片即可

步骤：设置 & 启动动画

设置 & 启动逐帧动画有两种方式：在XML / Java代码。

在 res/drawable的文件夹里创建动画效果.xml文件
设置动画资源（图片资源）

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/a1"></item>
    <item android:drawable="@drawable/a2"></item>
    <item android:drawable="@drawable/a3"></item>
    <item android:drawable="@drawable/a4"></item>
    <item android:drawable="@drawable/a5"></item>
    <item android:drawable="@drawable/a6"></item>
    <item android:drawable="@drawable/a7"></item>
    <item android:drawable="@drawable/a8"></item>
    <item android:drawable="@drawable/a9"></item>
</animation-list>

步骤：在Java代码中载入 & 启动动画

package com.fenghongzhang.anim;

import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.widget.Button;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;


public class MainActivity extends AppCompatActivity {
    
    

    private Button start;
    private Button stop;
    private ImageView img;

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

    public void start(View view) {
    
    
        img.setImageResource(R.drawable.pikaqiu);
        AnimationDrawable drawable = (AnimationDrawable) img.getDrawable();
        drawable.start();


    }

    public void stop(View view) {
    
    
        AnimationDrawable drawable = (AnimationDrawable) img.getDrawable();
        drawable.stop();
    }

    private void initView() {
    
    
        start = (Button) findViewById(R.id.start);
        stop = (Button) findViewById(R.id.stop);
        img = (ImageView) findViewById(R.id.img);
    }
}

方式2：在Java代码中实现

package com.fenghongzhang.anim;

import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.widget.Button;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;


public class MainActivity extends AppCompatActivity {
    
    

    private Button start;
    private Button stop;
    private ImageView img;

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

           //<-- 直接从drawable文件夹获取动画资源（图片） -->
         animationDrawable = new AnimationDrawable();
        for (int i = 1; i <= 9; i++) {
    
    
            int id = getResources().getIdentifier("a" + i, "drawable", getPackageName());
            Drawable drawable = getResources().getDrawable(id);
            animationDrawable.addFrame(drawable, 100);
        }
    }

    public void start(View view) {
    
    
        img.setImageResource(R.drawable.pikaqiu);
        AnimationDrawable drawable = (AnimationDrawable) img.getDrawable();
        drawable.start();


    }

    public void stop(View view) {
    
    
        AnimationDrawable drawable = (AnimationDrawable) img.getDrawable();
        drawable.stop();
    }

    private void initView() {
    
    
        start = (Button) findViewById(R.id.start);
        stop = (Button) findViewById(R.id.stop);
        img = (ImageView) findViewById(R.id.img);
    }

    public void btn1(View view) {
    
    
        //只执行一次. 不会停止就停止了
//        animationDrawable.setOneShot(true);
        img.setImageDrawable(animationDrawable);
//        animationDrawable.stop();
        animationDrawable.start();

    }

    public void btn2(View view) {
    
    
//        animationDrawable.setOneShot(true);
        animationDrawable.stop();
    }
}

第六单元补间动画以及帧动画使用

动画的详解

补间动画

逐帧动画

方式一

方式2：在Java代码中实现

猜你喜欢