Andriod动画效果总结以及帧动画实现

---

前言

安卓比较简单和基础的动画效果有三种，分别是帧动画（Drawable Animation）、补间动画（View Animation）、属性动画（Property Animation）。下面对每种动画进行介绍，同时实现利用帧动画实现京东小哥送快递的动画。

一、帧动画

1.1概述

帧动画就是顺序播放一组预先定义好的图片，就类似于我们观看视频，就是一张一张的图片连续播放。

1.2使用步骤（可见文末代码）：

• 在res/drawable目录下定义一个XML文件，根节点为系统提供的animation-list，然后放入定义更好的图片；
• 使用AnimationDrawable类播放第一步定义好的Drawable中的图片，形成动画效果；

1.3属性介绍

• android:oneshot=“false”： 表示是否重复播放动画，还是只播放一次；
• 每个item都有Drawable和duration属性，Drawable表示我们要播放的图片；duration表示这张图播放的时间；

二、补间动画

2.1概述

view动画也称为补间动画，因为我们只需要拿到一个view，设定它开始和结束的位置，中间的view会自动由系统补齐，而不需要帧动画每一幅图都是提前准备好的。

View动画是Android一开始就提供的比较原始的动画，主要支持四种效果：平移、缩放、旋转、透明度变化（渐变） 四种基本效果，我们可以再这四种基础效果的基础上，选择其中的几种进行组合。

2.2使用步骤

xml版本：

<?xml version="1.0" encoding="utf-8"?>
<!--interpolator：差值器，表示动画运行时的时间正常方式，fillAfter：表示动画停留在最后运动的结果-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/decelerate_interpolator">
    <!--透明度标签：表示透明0到不透明1之间的变换-->
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" >
    </alpha>
    <!--旋转标签：fromDegrees:表示旋转角度的起始角度，toDegrees：结束角度。pivotX：表示旋转的X轴坐标；pivotY：表示旋转的Y轴坐标-->
    <rotate
        android:fromDegrees="0.0"
        android:toDegrees="720"
        android:pivotX="50%"
        android:pivotY="50%"/>
    <!--缩放标签：fromXScale，toXScale表示水平缩放的起始值和结束值;fromYScale，toYScale竖直方向的缩放起始值和结束值。
    pivotX，pivotY，表示缩放动画效果的基准点x,y轴
    -->
    <scale
        android:fromXScale="0.4"
        android:fromYScale="0.4"
        android:toXScale="1.2"
        android:toYScale="1.2"
        android:pivotX="50%"
        android:pivotY="50%">
    </scale>
    <!--移动标签：fromXDelta,toXDelta表示x轴移动的像素点；fromYDelta,toYDelta表示Y轴移动的像素点-->
    <translate
        android:fromXDelta="0"
        android:toXDelta="300"
        android:fromYDelta="0"
        android:toYDelta="300"
        >
    </translate>
</set>

代码版本

/*代码实现动画的四个功能*/
    fun blendAnimation(){
        /*
     *  创建一个AnimationSet，它能够同时执行多个动画效果
     *  构造方法的入参如果是“true”，则代表使用默认的interpolator，如果是“false”则代表使用自定义interpolator
     */
        val mAnimationSet = AnimationSet(true)
        //透明度动画，从完全透明到不透明，我们的动画都是float型的，所以，在写数字的时候，要加f
        val alphAnima = AlphaAnimation(0.0f, 1.0f)
        /*
     *  创建一个旋转动画对象
     *  入参列表含义如下：
     *  1.fromDegrees：从哪个角度开始旋转
     *  2.toDegrees：旋转到哪个角度结束
     *  3.pivotXType：旋转所围绕的圆心的x轴坐标的类型，有ABSOLUT绝对坐标、RELATIVE_TO_SELF相对于自身坐标、RELATIVE_TO_PARENT相对于父控件的坐标
     *  4.pivotXValue：旋转所围绕的圆心的x轴坐标,0.5f表明是以自身这个控件的一半长度为x轴
     *  5.pivotYType：y轴坐标的类型
     *  6.pivotYValue：y轴坐标
     */
        val rotateAnim = RotateAnimation(0f, 720f, Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f)
 
        /*
     *  创建一个缩放效果的动画
     *  入参列表含义如下：
     *  fromX：x轴的初始值
     *  toX：x轴缩放后的值
     *  fromY：y轴的初始值
     *  toY：y轴缩放后的值
     *  pivotXType：x轴坐标的类型，有ABSOLUT绝对坐标、RELATIVE_TO_SELF相对于自身坐标、RELATIVE_TO_PARENT相对于父控件的坐标
     *  pivotXValue：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴
     *  pivotYType：y轴坐标的类型
     *  pivotYValue：轴的值，0.5f表明是以自身这个控件的一半长度为y轴
     */
        var scaleAnimation = ScaleAnimation(0f,1f,0f,1f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
/*
     *  创建一个移动动画效果
     *  入参的含义如下：
     *  fromXType：移动前的x轴坐标的类型
     *  fromXValue：移动前的x轴的坐标
     *  toXType：移动后的x轴的坐标的类型
     *  toXValue：移动后的x轴的坐标
     *  fromYType：移动前的y轴的坐标的类型
     *  fromYValue：移动前的y轴的坐标
     *  toYType：移动后的y轴的坐标的类型
     *  toYValue：移动后的y轴的坐标
     */
        var translateAnimation = TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.ABSOLUTE,360f,
                Animation.RELATIVE_TO_SELF,0f,Animation.ABSOLUTE,360f)
 
        mAnimationSet.addAnimation(alphAnima)
        mAnimationSet.addAnimation(rotateAnim)
        mAnimationSet.addAnimation(scaleAnimation)
        mAnimationSet.addAnimation(translateAnimation)
        mAnimationSet.setDuration(2000)//动画持续时间时间
        mAnimationSet.setInterpolator(DecelerateInterpolator()) //添加插值器，下面会有说明
        mAnimationSet.setFillAfter(true)
        photo_id?.startAnimation(mAnimationSet)
    }

2.3相关属性

• Animation属性

• TranslateAnimation属性
  
• ScaleAnimation属性

• RotateAnimation属性
  
• AlphaAnimation属性

三、属性动画

3.1概述

属性动画，属性动画只对Android 3.0（API 11）以上版本的Android系统才有效，
这种动画可以设置给任何Object，包括那些还没有渲染到屏幕上的对象。这种动画是可扩展的，可以让你自定义任何类型和属性的动画。

属性动画的运行机制是通过不断地对值进行操作来实现的，而初始值和结束值之间的动画过渡就是由ValueAnimator这个类来负责计算的。它的内部使用一种时间循环的机制来计算值与值之间的动画过渡，我们只需要将初始值和结束值提供给ValueAnimator，并且告诉它动画所需运行的时长，那么ValueAnimator就会自动帮我们完成从初始值平滑地过渡到结束值这样的效果。除此之外，ValueAnimator还负责管理动画的播放次数、播放模式、以及对动画设置监听器等。

3.2使用步骤

• 创建 ValueAnimator 或 ObjectAnimator 对象 —— 即可以从 XML 资源文件加载该动画也可以直接调用
  ValueAnimator 或者 ObjectAnimator 的静态工厂方法创建动画。
• 根据需要为 Animator 对象设置属性。
• 如果需要监听 Animator
  的动画开始事件，动画结束事件、动画重复事件、动画值改变事件，并根据事件提供响应处理代码，需要为Animator 对象设置监听器。
• 如果有多个动画需要同时播放，需要使用 AnimatorSet 组合这些动画。
• 调用 Animator 对象的 start 启动动画。

3.3相关属性

• android:duration ：动画持续时间。默认为 300ms
• android:interploator：动画插值方式。通过 指定。
• android:repeatCount ：动画重复次数。
• android:repeatMode：重复行为。
• 帧刷新率。指定多长时间播放一帧。默认为 10 ms。

四.京东小哥送快递的帧动画实现

4.1 导入图片资源，将其放在drawable文件夹下面

4.2创建animation_list的xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/frame_0" android:duration="200"/>
    <item android:drawable="@drawable/frame_1" android:duration="200"/>
    <item android:drawable="@drawable/frame_2" android:duration="200"/>
</animation-list>

4.3修改总的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="实现帧动画"
        android:textSize="20sp"
        android:textColor="#9C27B0"
        android:textStyle="bold"
        />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="296dp">
    </ImageView>

</LinearLayout>

4.4 通过动画对象的start(),stop()方法来开启或者是停止动画

package com.example.donghua;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.TransitionDrawable;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private ImageView imageView1;//图片框
    private AnimationDrawable AD;

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

        imageView1 = findViewById(R.id.imageView1);
        imageView1.setImageResource(R.drawable.anim_frame); //设置资源

        AD = (AnimationDrawable) imageView1.getDrawable();
        AD.setOneShot(false);

    }
    @Override
    protected void onStart(){
        startAnimation();
        super.onStart();
    }

    private void startAnimation() {
        AD.start();
        Animation trans = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0,
                Animation.RELATIVE_TO_SELF,0,
                Animation.RELATIVE_TO_SELF,0,
                Animation.RELATIVE_TO_SELF,0);
        trans.setDuration(1000);
        trans.setRepeatCount(Animation.INFINITE);
        imageView1.startAnimation(trans);
    }

}

4.5 效果图

作者名：罗思维
原文链接：https://editor.csdn.net/md/?articleId=121895046