Android动画攻略—帧动画、补间动画、属性动画

2023-11-09 20:00:34

前言

动画时Android开发中使用频率比较高的功能。
对Android提供的补间动画，帧动画以及属性动画做出归纳总结。

1. 帧动画

帧动画总体实现比较简单，其实现本身是实现一个图片集的连续播放，从而达到动画的效果。

实现帧动画就必须将大量图片资源加入到APK当中，从而增加APK的大小，但是却可以实现比较复杂的动画效果。

帧动画使用比较简单的，具体操作过程如下

将图片集导入到对应目录下
在drawable文件夹下新建文件anim_chat. xml,的代码实现如下

<?xml version="1.0" encoding="UTF-8"?>
<animation-list android:oneshot="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    //duraction字段可以用来设置该图片播放时长，drawable用来设置要显示的图片
    <item android:duration="230" android:drawable="@drawable/ic_chat_recording1" />
    <item android:duration="230" android:drawable="@drawable/ic_chat_recording2" />
    <item android:duration="230" android:drawable="@drawable/ic_chat_recording3" />
    <item android:duration="230" android:drawable="@drawable/ic_chat_recording4" />
    <item android:duration="230" android:drawable="@drawable/ic_chat_recording5" />
    <item android:duration="230" android:drawable="@drawable/ic_chat_recording6" />
</animation-list>

在布局文件activity_main.xml当中添加组件

<Button
        android:id="@+id/frame_animation_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="帧动画测试" />

    <ImageView
        android:id="@+id/frame_animation_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_chat_recording1"
        android:layout_marginTop="20dp"/>

在activity当中加入java代码实现

public class MainActivity extends AppCompatActivity {

    private Button frameButton;
    private ImageView frameImage;
    private AnimationDrawable frameAnimation;
    boolean isStart = false;

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

    private void initFrame() {
        //初始化控件
        frameButton = (Button) findViewById(R.id.frame_animation_test);
        frameImage = (ImageView) findViewById(R.id.frame_animation_img);
        //给ImageView设置drawable
        frameImage.setImageResource(R.drawable.anim_chat_recording);
        //给动画资源赋值
        frameAnimation = (AnimationDrawable) frameImage.getDrawable();
        //给按钮添加点击事件用来控制动画
        frameButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //当isStart=false时表示动画没有在播放，点击按钮开始播放
                if (!isStart) {
                    frameAnimation.start();
                    isStart = true;
                } else {//当isStart=true时表示动画正在播放，点击按钮停止播放
                    frameAnimation.stop();
                    isStart = false;
                }
            }
        });
    }
}

运行代码进行测试

帧动画也存在使用纯java代码的实现方式，但是在应用当中并不多见，有兴趣可以了解一下，这里不做介绍。

2. 补间动画

与按帧播放的帧动画不同，补间动画只需要定义初始和结束时的状态，中间的动画过程将由系统自动补齐。

特点：
- 补间动画作用于View，可以实现视觉上的动画效果，但是并没有真正对视图做出改变。
- 使用简单，可以使用非常简单的方式实现动画效果。
- 实现方式可以有jave代码实现和XML代码实现两种。
分类：补间动画可分为四类

jave	xml	效果
AlphaAnimation	alph	渐变透明度动画效果
ScaleAnimation	scale	渐变尺寸伸缩动画效果
TranslateAnimation1	translate	画面转换位置移动动画效果
RotateAnimation	rotate	画面转移旋转动画效果

后文将对四种补间动画效果做具体说明。

2.1 alph动画

特有属性：

android:fromAlpha:动画开始时的透明度。
android:toAlpha:动画结束时的透明度。

Java代码实现

直接上代码

在activity_main.xml当中定义布局资源

<ImageView
        android:id="@+id/alph_animation_img"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:src="@drawable/animation_test1"/>

后续内容的动画效果基本针对图片涉及到的xml布局都基本类似，将不再进行说明。

在activity当中进行实现

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

    private void initAlphJava() {
        alphImage = (ImageView) findViewById(R.id.alph_animation_img);
        alphImage.setVisibility(View.VISIBLE);
        //构造参数中，第一个参数为动画开始时候透明度,第二个参数toAlpha为 动画结束时候透明度
        //对于fromAlpha和toAlpha,1.0代表完全不透明状态，0.0代表完全透明状态
        AlphaAnimation mAlpha = new AlphaAnimation(1.0f,0.0f);
        //设置动画播放时间，2000MS=2S
        mAlpha.setDuration(2000);
        //设置动画循环次数，-1为一直循环
        mAlpha.setRepeatCount(-1);
        //设置动画循环方式Animation.REVERSE为倒叙播放，Animation.RESTART为重复播放
        mAlpha.setRepeatMode(Animation.REVERSE);
        //alphImage开始播放动画
        alphImage.startAnimation(mAlpha);
    }

动画效果为:由原图显示渐变为隐藏状态。

XML实现

在res目录中新建anim文件夹。
在anim目录中新建一个alph_anim.xml文件(注意文件名小写)。
在alph_anim.xml文件当中对动画进行定义。

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--透明度控制动画效果 alpha-->
    <!--fromAlpha 属性为动画起始时透明度 0.0表示完全透明 1.0表示完全不透明-->
    <!--toAlpha   属性为动画结束时透明度-->
    <!--duration  属性为动画持续时间-->
    <alpha
        android:duration="2000" //播放时间为2秒
        android:fromAlpha="1.0" //初始透明度为完全显示
        android:toAlpha="0.0"   //结束透明度为完全透明
        android:repeatCount= "-1" />    //重复播放次数为无限循环
</set>

fromAlpha和toAlpha为alph动画的特有属性，1.0代表完全不透明状态，0.0代表完全透明状态

在activity当中对动画资源信息引用。

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

    private void initAlphXml() {
        alphImage = (ImageView) findViewById(R.id.alph_animation_img);
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.alph_anim);
        alphImage.startAnimation(animation);
    }

运行程序，动画效果与上述java实现相同。
补间动画中有一些公共属性，其说明如下：

android:duration: 动画执行的时间，以毫秒为单位
android:fillEnabled:true|false 动画结束时还原到开始动画前的状态
android:fillBefore:true|false 动画结束后视图会停留在动画开始的状态，如果fillEnabled的值为true，它的值才有意义，否则没有意义。默认值是true。
android:fillAfter:true|false 动画结束后是否保留这个动画的最后一帧的效果，它的设置不受fillEnabled的影响
android:repeatMode:reverse|restart 重复类型,reverse:表示倒序回放,restart:表示重新放一遍，这个属性必须与repeatCount联合使用,因为它的前提是重复,即重复播放时的播放类型。
android:repeatCount:动画重复的次数(注意是重复的次数)，设定具体数值，也是可以是infinite，表示无限循环
android:interpolator:设定的插值器，它主要用来为动画设置一些特殊的效果，比方说：加速运动、减速运动等等。

2.2 scale动画

特有属性：

android:fromXScale起始的X方向上相对自身的缩放比例,类型float
android:toXScale:结尾的X方向上相对自身的缩放比例,类型float
android:fromYScale:起始的Y方向上相对自身的缩放比例,类型float
android:toYScale:结尾的Y方向上相对自身的缩放比例,类型float
android:pivotX: 缩放起点X轴坐标，可以是数值、百分数、百分数p。
android:pivotY: 缩放起点Y轴坐标，同pivotX。

java代码实现

在activity_main.xml当中定义布局资源
在java代码当中的代码实现如下:

动画实现效果:以自身中心点为原点，缩放为原大小的两倍。

构造方法

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

参数取值介绍

对于前四个参数：0.0表示收缩到没有 1.0表示正常无伸缩值小于1.0表示收缩值大于1.0表示放大
pivotXType存在三种取值
pivotXType = Animation.ABSOLUTE:缩放轴点的x坐标 = View左上角的原点在x方向 + pivotXValue数值的点(y方向同理)

pivotXType = Animation.RELATIVE_TO_SELF:缩放轴点的x坐标 = View左上角的原点在x方向 + 自身宽度乘上pivotXValue数值的值(y方向同理)

pivotXType = Animation.RELATIVE_TO_PARENT:缩放轴点的x坐标 = View左上角的原点在x方向 + 父控件宽度乘上pivotXValue数值的值 (y方向同理)

例子中所选参数为从原图大小X轴和Y轴缩放到原大小的两倍，缩放参照点为以自身宽高比例的50%处，也就是中心点。

XML实现

在res目录中新建anim文件夹。
在anim目录中新建一个scale_anim.xml文件(注意文件名小写)。
在scale_anim.xml文件当中对动画进行定义。

<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="3000"  //设置播放时长为3秒
        android:fillAfter="false"   //设置不保存播放完毕之后的画面
        android:fromXScale="1.0"    //起始画面X轴缩放倍数
        android:fromYScale="1.0"    //起始画面Y轴缩放倍数
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
        //使用accelerate_decelerate_interpolator加速--减速差值器
        android:pivotX="50%"    //X轴缩放原点为自身宽度的50%
        android:pivotY="50%"    //Y轴缩放原点为自身宽度的50%
        android:toXScale="2.0"  //结束画面X轴缩放倍数
        android:toYScale="2.0"  //结束画面Y轴缩放倍数
        android:repeatCount= "-1"   //动画循环次数为无限循环
        android:repeatMode="reverse"/>  //循环模式为倒播

</set>

pivotX与pivotY相同，有三种取值方式：

取值为数值：当为数值时，表示在当前View的左上角，加上参数值即原点处，做为旋转点X坐标，单位为px。

取值为百分数：如果是50%表示在当前控件的左上角加上自己宽度的50%做为旋转点X坐标。

取值为百分数p：如果是50%p，那么就是表示在当前的左上角加上父控件宽度的50%做为旋转点X坐标。

在activity当中对动画资源信息引用。

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

    private void initAlphXml() {
        private void initScaleXML() {
        mImage = (ImageView) findViewById(R.id.animation_img);
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.scale_anim);
        mImage.startAnimation(animation);
    }
    }

运行程序，动画效果与上述java实现相同。

2.3 translate动画

特有属性：

android:fromXDelta:起始点X轴坐标。
android:fromYDelta：起始点Y坐标。
android:toXDelta：结束点X坐标
android:toYDelta:结束点Y坐标

java代码实现

在activity_main.xml当中定义布局资源
在java代码当中的代码实现如下:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initTranslateJava();
    }
 
    private void initTranslateJava() {
        mImage = (ImageView) findViewById(R.id.animation_img);
        TranslateAnimation translateAnimation = new TranslateAnimation(0,300,0,300);
        //fromXDelta:起始点X轴的坐标
        //toXDelta:终止点X轴的坐标
        //fromYDelta:起始点Y轴的坐标
        //toYDelta:终止点Y轴的坐标
        translateAnimation.setDuration(2000);
        translateAnimation.setRepeatMode(Animation.REVERSE);
        //Animation.INFINITE与-1取值相同，为无限重播
        translateAnimation.setRepeatCount(Animation.INFINITE);
        mImage.startAnimation(translateAnimation);
    }

上述代码实现效果：View向右下角45°移动，最终坐标为原左上角坐标的X轴正方向300，Y轴正方向300.
动画效果如下

对于构造方法

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

参数类型可大体分为两种： value和type

Type参数取值介绍

fromXType = Animation.ABSOLUTE:缩放轴点的x坐标 = View左上角的原点在x方向加上 pivotXValue数值的点(y方向同理) 默认为这种方式。

fromXType = Animation.RELATIVE_TO_SELF:缩放轴点的x坐标 = View左上角的原点在x方向加上自身宽度乘上pivotXValue数值的值(y方向同理)

fromXType = Animation.RELATIVE_TO_PARENT:缩放轴点的x坐标 = View左上角的原点在x方向加上父控件宽度乘上pivotXValue数值的值 (y方向同理)

Value取值介绍：

取值为数值：当为数值时，表示在当前View的左上角，即原点处加上参数值，做为旋转点X坐标，单位为px。

取值为百分数：如果是50%表示在当前控件的左上角加上自己宽度的50%做为原点X坐标。

取值为百分数p：如果是50%p，那么就是表示在当前的左上角加上父控件宽度的50%做为原点X坐标。

XML实现

在res目录中新建anim文件夹。
在anim目录中新建一个translate_anim.xml文件(注意文件名小写)。
在translate_anim.xml文件当中对动画进行定义。

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="300"
        android:toYDelta="300" />

</set>

参数值类型介绍

整型值:
fromXDelta 属性为动画起始时 X坐标上的位置
toXDelta 属性为动画结束时 X坐标上的位置
fromYDelta 属性为动画起始时 Y坐标上的位置
toYDelta 属性为动画结束时 Y坐标上的位置

注意:
没有指定fromXType toXType fromYType toYType 时候，默认是以自己为相对参照物
长整型值：
duration 属性为动画持续时间
说明: 时间以毫秒为单位

在activity当中对动画资源信息引用。

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

    private void initTranslateXML() {
        mImage = (ImageView) findViewById(R.id.animation_img);
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.translate_anim);
        mImage.startAnimation(animation);
    }

运行程序，动画效果与上述java实现相同。

作者：銀灬楓
链接：https://www.jianshu.com/p/1fac598febc1
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

码农公寓

前言

目录

1. 帧动画

2. 补间动画

2.1 alph动画

Java代码实现

XML实现

2.2 scale动画

java代码实现

XML实现

2.3 translate动画

java代码实现

XML实现

相关文章