Android动画之视图动画

2020-12-09 本文已影响0人 code希必地

视图动画View Animation包括补间动画（Tween Animation）和帧动画（Frame Animation）。

1、补间动画（Tween Animation）

Android补间动画主要有alpha、scale、translate、rotate、set。下面看下如何使用xml标签来实现这几种动画。

1.1、配置XML动画标签

在配置一个XML动画文件时，主要用到如下几个标签：

alpha：透明度动画
scale：缩放动画
translate：平移动画
rotate：旋转动画
set：定义动画集
下面看下如何使用这些标签在XML文件中配置动画，注意这些动画文件存放在res/anim文件夹下的，在使用时使用R.anim.XXX：

1.1.1、scale标签

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50%p"
    android:pivotY="50%p"
    android:toXScale="1.0"
    android:toYScale="0.5"
    android:duration="1000">

</scale>

该标签有如下几个属性：

fromXScale：动画起始时，控件在X轴上相对于自身的缩放比例，浮点值。
fromYScale：动画起始时，控件在Y轴上相对于自身的缩放比例，浮点值。
toXScale：动画结束时，控件在X轴上相对于于自身的缩放比例，浮点值。
toYScale：动画结束时，控件在Y轴上相对于于自身的缩放比例，浮点值。
pivotX：缩放起始点X轴的坐标，可以为数值、百分数、百分数p。当为50时，缩放起始点X轴坐标为原点+50；如果为50%，缩放起始点X轴坐标为原点+自身宽度的一半；如果为50%p，缩放起始点X轴坐标点为原点+父控件宽度的一半。
pivotY：同pivotX
在MainActivity中的使用

val animation = AnimationUtils.loadAnimation(this, R.anim.anim_alpha)
iv_girl.animation = animation
iv_girl.startAnimation(animation)

1.1.2、Animation继承属性

动画都是继承Animation，Animation没有对应的标签，但是它内部实现了一些共用的属性，所以派生自Animation类的动画也具有这些属性。

android:duration：设置完成一次动画的时间。
android:fillAfter：设置为true，则保持动画结束时的状态
android:fillBefore：设置为true，动画结束后恢复到初始状态
android:fillEnable：与fillBefore效果相同
android:repeatCount：用于指定重复的次数，设置为infinite，则无限重复。
android:repeatMode：设置重复模式，取值为reverse和restart，reverse表示倒序回放，restart表示重放。需与repeatCount一起使用才有效。
android:interpolator：设置动画插值器，指定动画效果。

1.1.3、alpha标签

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="1.0"
    android:toAlpha="0.5">
</alpha>

fromAlpha：表示动画开始时的透明度，取值范围为0.0~1.0,
toAlpha:表示动画结束时的透明度，取值范围为0.0~1.0

1.1.3、rotate标签

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="50"
    android:duration="3000">
</rotate>

fromDegrees:动画开始时的旋转角度，正值表示顺时针，负值表示逆时针
toDegrees：动画结束时的旋转角度，正值表示顺时针，负值表示逆时针
pivotX：旋转中心点X轴的坐标，可为数值、百分数、百分数p
pivotY:旋转中心点Y轴的坐标，可为数值、百分数、百分数p

1.1.4、translate标签

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="100"
    android:toYDelta="100">
</translate>

fromXDelta:起始点X轴的坐标，可以是数值、百分数、百分数p。
fromYDelta：起始点Y轴的坐标，可以是数值、百分数、百分数p。
toXDelta：终点X轴的坐标，可以是数值、百分数、百分数p。
toYDelta：终点X轴的坐标，可以是数值、百分数、百分数p。

1.1.5、set标签

set是一个动画集，可以实现多个动画同时执行

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:repeatCount="infinite"
    android:repeatMode="restart">
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.2" />
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />

    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.2"
        android:toYScale="0.2" />
</set>

1.2、视图动画的代码实现

使用XML实现动画可以提高复用性，如果只是临时创建一个动画，我们可以使用代码方式来实现，下表是标签对应的动画类。

标签	对应的动画类
scale	ScaleAnimation
rotate	RotateAnimation
translate	TranslateAnimation
alpha	AlphaAnimation

1.2.1、ScaleAnimation

ScaleAnimation 对应scale标签，先来看下其构造函数

public ScaleAnimation(Context context, AttributeSet attrs)
public ScaleAnimation(float fromX, float toX, float fromY, float toY)
 public ScaleAnimation(float fromX, float toX, float fromY, float toY,float pivotX, float pivotY)
public ScaleAnimation(float fromX, float toX, float fromY, float toY,int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

scale标签中pivotX和pivotY，可取具体数值、百分数、百分数p，对应ScaleAnimation中的pivotXType和pivotYType，取值为Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF和Animation.RELATIVE_TO_PARENT。如果传入的是具体值，则对应pivotXType的取值为Animation.ABSOLUTE，如果传入的是百分比，则对应pivotXType的取值为Animation.RELATIVE_TO_SELF，如果传入的是百分比配，则pivotXType的取值为Animation.RELATIVE_TO_PARENT。
示例：
下面看下如何实现下面标签的功能。
标签实现

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50"
    android:pivotY="50"
    android:toXScale="2.4"
    android:toYScale="2.4"
    android:duration="3000">
</scale>

用代码实现相同的功能

  val scaleAnimation = ScaleAnimation(
    1.0f,
    2.4f,
    1.0f,
    2.4f,
    Animation.ABSOLUTE,
    50f,
    Animation.ABSOLUTE,
    50f
)
scaleAnimation.duration=3000
iv_girl.animation = scaleAnimation
iv_girl.startAnimation(scaleAnimation)

1.2.2、AlphaAnimation

alpha标签包含的属性有fromAlpha和toAlpha，下面同样适用其构造来实现。

 public AlphaAnimation(float fromAlpha, float toAlpha)

下面看下实现下面标签的功能

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="1.0"
    android:toAlpha="0.5">

</alpha>

用代码构造实现如下

  val alphaAnimation=AlphaAnimation(1.0f,0.5f)
alphaAnimation.duration=1000
iv_girl.animation = alphaAnimation
iv_girl.startAnimation(alphaAnimation)

1.2.3、RotateAnimation

rotate标签对应的属性有fromDegrees、toDegrees、pivotX和pivotY，可以使用RotateAnimation对应的构造函数实现。

 public RotateAnimation(float fromDegrees, float toDegrees)
public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
 public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,int pivotYType, float pivotYValue)

和ScaleAnimation相同pivotXType和pivotYType的取值依然是三个：
Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF、
Animation.RELATIVE_TO_PARENT。
下面看下rotate标签的动画

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="50"
    android:duration="3000">

</rotate>

使用代码实现相同的功能

val rotateAnimation = RotateAnimation(
    0f,
    50f,
    Animation.RELATIVE_TO_SELF,
    0.5f,
    Animation.RELATIVE_TO_SELF,
    0.5f
)
rotateAnimation.duration = 3000
iv_girl.animation = rotateAnimation
iv_girl.startAnimation(rotateAnimation)

1.2.4、TranslateAnimation

translate标签对应的属性有：fromXDelta、fromYDelta、toXDelta、toYDelta，同样可以使用构造函数来实现。

public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)

先来看下使用标签实现的动画

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="50"
    android:fromYDelta="50"
    android:toXDelta="200%"
    android:toYDelta="200%">

</translate>

使用代码实现相同的功能

val translateAnimation = TranslateAnimation(
    Animation.ABSOLUTE,
    50f,
    Animation.RELATIVE_TO_SELF,
    20f,
    Animation.ABSOLUTE,
    50f,
    Animation.RELATIVE_TO_SELF,
    20f
)
translateAnimation.duration = 1000
iv_girl.animation = translateAnimation
iv_girl.startAnimation(translateAnimation)

1.2.5、AnimationSet

AnimationSet对应set标签，它的构造函数如下：

public AnimationSet(boolean shareInterpolator)

shareInterpolator表示set动画集中的动画是否共享一个插值器。
使用set标签实现动画

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:repeatCount="infinite"
    android:repeatMode="restart">
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.2" />
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />

    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.2"
        android:toYScale="0.2" />
</set>

使用代码实现

  val alphaAnimation = AlphaAnimation(1.0f, 0.2f)
val roateAnimation = RotateAnimation(
    0f,
    360f,
    Animation.RELATIVE_TO_SELF,
    0.5f,
    Animation.RELATIVE_TO_SELF,
    0.5f
)
val scaleAnimation = ScaleAnimation(
    1.0f,
    0.2f,
    1.0f,
    0.2f,
    Animation.RELATIVE_TO_SELF,
    0.5f,
    Animation.RELATIVE_TO_SELF,
    0.5f
)
setAnimation.addAnimation(alphaAnimation)
setAnimation.addAnimation(roateAnimation)
setAnimation.addAnimation(scaleAnimation)
setAnimation.duration = 2000
setAnimation.repeatMode = Animation.RESTART
setAnimation.repeatCount = Animation.INFINITE
iv_girl.animation=setAnimation
iv_girl.startAnimation(setAnimation)

从上面代码中可看出使用setAnimation.addAnimation()进行添加动画

1.3、Animation

Animation除了提供了一个公用的属性外，还提供了一些公用的方法：

public void cancel() 
public void reset()
public void setAnimationListener(Animation.AnimationListener listener)

cancel()：取消动画
reset()：将控件重置到动画开始状态
setAnimationListener()：设置动画状态的监听，其中Animation.AnimationListener中回调函数如下：

void onAnimationStart(Animation var1); //动画开始时回调

void onAnimationEnd(Animation var1);//动画结束时回调

void onAnimationRepeat(Animation var1);//动画重复时回调

2、帧动画(Frame Animation)

帧动画顾名思义就是一帧一帧的播放动画，就像放电影一样，可以通过XML实现，也可以通过代码来实现。

2.1、XML实现

实现步骤如下：
1、创建XML文件
在res/drawable文件夹下(也能在res/anim文件夹下，但不建议)，创建文件

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@mipmap/tiger" android:duration="60"/>
    <item android:drawable="@mipmap/ic_launcher" android:duration="60"/>
</animation-list>

oneshot 为true表示动画只运行一次，为false则一直循环。
item表示帧动画中的元素，drawable表示这一帧对应的图片资源，duration表示这一帧持续的时间。
2、设置给ImageView
可以通过android:src或android:background设置给ImageView。

 <ImageView
        android:id="@+id/iv_bak"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:background="@drawable/frame_anim"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

3、开启动画*

/**
 *  如果通过src设置给ImageView，则使用ImageView.getDrawable()来获取动画
 *  如果通过background设置给ImageVIew，则使用ImageView.getBackground()获取动画
 */
val anim:AnimationDrawable=iv_bak.background as AnimationDrawable
//val anim:AnimationDrawable=iv_bak.drawable as AnimationDrawable
anim.start()

2.2、AnimationDrawable

帧动画需要使用AnimationDrawable类，而它是Drawable的一个子类，它有如下几个常用的方法：

void start()：开始播放动画
void stop()：停止播放动画
int getDuration(int index)：获取指定帧动画的持续时长
Drawable getFrame(int index)：获取指定帧对应的Drawable对象
int getNumberOfFrames()：获取AnimationDrawable所有帧数量
boolean is Running()：判断当前帧动画是否正在播放
void setOneShot(boolean oneShot)：设置AnimationDrawable是否播放一次
boolean isOneShot()：判断帧动画是否只播放一次
void addFrame(Drawable frame,int duration)：为帧动画添加一帧，并设置其持续时间

2.3、代码实现帧动画

val anim=AnimationDrawable()
anim.addFrame(ContextCompat.getDrawable(this,R.mipmap.ic_launcher)!!,60)
anim.addFrame(ContextCompat.getDrawable(this,R.mipmap.tiger)!!,60)
iv_bak.background=anim
anim.isOneShot=false
anim.start()

代码很简单就是利用addFrame()添加帧动画，并设置给ImageView。