Android动画简介之View Animation

Android动画简介之View Animation

​ 在Android中主要有两种类型的动画，View Animation（视图动画）和Proerty Animation（属性动画）。其中，View Animation包括Tween Animation（补间动画）和Frame Animation（逐帧动画）。Proerty Animation包括Value Animation 和Object Animation 。

视图动画

​ Android的视图动画由五钟类型组成：alpha，scale，translate，rotate，set。

利用xml标签定义Tween Animation

标签

标签	含义
alpha	渐变透明度
scale	渐变尺寸伸缩
translate	位置变换移动
rotate	旋转变换动画
set	动画集

通用的标签属性

标签属性	含义
fillAfter	动画结束时是否保持动画结束时的状态
fillBefore	动画结束时是否还原到初始状态 默认ture
fillEnabled	同fillBefore
repeatCount	动画重复次数
repeatMode	动画重复的类型 restart：重放 reverse：倒放
interpolator	设置插值器
duration	动画运行的时间（以毫秒为单位）
startOffset	动画运行前的延迟（以毫秒为单位）
zAdjustment	允许在动画播放期间，调整播放内容在Z轴方向的顺序。 ①normal（0）：正在播放的动画内容保持当前的Z轴顺序， ②top（1）：在动画播放期间，强制把当前播放的内容放到其他内容的上面； ③bottom（-1）：在动画播放期间，强制把当前播放的内容放到其他内容之下
background	动画背后的特殊背景颜色
detachWallpaper	窗口动画的特殊选项：如果此窗口位于墙纸之上，则不要使用它设置墙纸动画。
showWallpaper	窗口动画的特殊选项：运行此动画时显示后面的墙纸。
hasRoundedCorners	窗口动画的特殊选项：窗口是否应具有圆角

Alpha的标签属性

标签属性	含义
fromAlpha	开始的透明度
toAlpha	结束的透明度

示例：

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

Scale的标签属性

标签属性	含义
fromXScale	动画开始，控件在X轴上相对自身的缩放比例
toXScale	动画结束，控件在X轴上相对自身的缩放比例
fromYScale	动画开始，控件在Y轴上相对自身的缩放比例
toYScale	动画结束，控件在Y轴上相对自身的缩放比例
pivotX	缩放起始点，X坐标 可取50,50%，50%p 表示x=50，控件的一半，父控件的一半的数值
pivotY	缩放起始点，Y坐标 可取50,50%，50%p 表示y=50，控件的一半，父控件的一半的数值

示例

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0"
    android:toXScale="2.0"
    android:fromYScale="0.0"
    android:toYScale="2.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="700"
    android:fillAfter="true"
    android:fillBefore="false"
    android:fillEnabled="false"
    android:repeatCount="2"
    android:repeatMode="reverse"
    />

Translate的标签属性

标签属性	含义
fromXDelta	起始点X的坐标 可取50，50%，50%p
toXDelta	终点X的坐标 可取50，50%，50%p
fromYDelta	起始点Y的坐标 可取50，50%，50%p
toYDelta	终点Y的坐标 可取50，50%，50%p

示例：

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="0"
    android:fromYDelta="0"
    android:toYDelta="500"
    android:duration="3000"
    android:fillAfter="true"
    >
</translate>

Rotate标签属性

标签属性	含义
fromDegrees	动画开始旋转的角度
toDegrees	动画结束旋转的角度
pivotX	旋转中心点X的位置 可取50,50%，50%p 表示X=50，控件的一半，父控件的一半的数值
pivotY	旋转中心点Y的位置 可取50,50%，50%p 表示Y=50，控件的一半，父控件的一半的数值

示例

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

Set标签属性

标签属性	含义
shareInterpolator	共享插值器
fillBefore	同上
fillAfter	同上
duration	同上
startOffset	同上
repeatMode	同上

示例

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="true">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
    <scale
        android:fromXScale="0.0"
        android:toXScale="2.0"
        android:fromYScale="0.0"
        android:toYScale="2.0"
        android:pivotY="50%"
        android:pivotX="50%"
        />
    <rotate
        android:fromDegrees="0"
        android:toDegrees="720"
        android:pivotX="50%"
        android:pivotY="50%"
        />
</set>

使用代码实现Tween Animation

alpha：

AlphaAnimation alphaAnimation = new AlphaAnimation(1.0F,0.1F);
alphaAnimation.setDuration(3000);
alphaAnimation.setFillBefore(true);
findViewById(R.id.tv).startAnimation(alphaAnimation);

scale：

ScaleAnimation scaleAnimation = new ScaleAnimation(0.0F,1.4F,0.0F,1.4F,
        Animation.RELATIVE_TO_PARENT,0.5F, Animation.RELATIVE_TO_PARENT,0.5F);
scaleAnimation.setDuration(700);
findViewById(R.id.tv).startAnimation(scaleAnimation);

translate：

TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE,0,Animation.ABSOLUTE,-80,Animation.ABSOLUTE,0,Animation.ABSOLUTE,-80);
translateAnimation.setDuration(2000);
translateAnimation.setFillBefore(true);
findViewById(R.id.tv).startAnimation(translateAnimation);

rotate：

RotateAnimation rotateAnimation = new RotateAnimation(0,-650,Animation.RELATIVE_TO_SELF,0.5F,Animation.RELATIVE_TO_SELF,0.5F);
rotateAnimation.setDuration(2000);
rotateAnimation.setFillBefore(true);
findViewById(R.id.tv).startAnimation(rotateAnimation);

set：

RotateAnimation rotateAnimation = new RotateAnimation(0,-650,Animation.RELATIVE_TO_SELF,0.5F,Animation.RELATIVE_TO_SELF,0.5F);

TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE,0,Animation.ABSOLUTE,-80,Animation.ABSOLUTE,0,Animation.ABSOLUTE,-80);

AnimationSet animationSet = new AnimationSet(true);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(translateAnimation);
animationSet.setDuration(3000);
animationSet.setFillAfter(true);
findViewById(R.id.tv).startAnimation(animationSet);

从上面的例子来看，基本上View Animation动画都可以根据里面的构造方法进行简单的创建，实际使用上并不难理解。

Frame Animation的实现

xml：

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/image01" android:duration="500"/>
    <item android:drawable="@drawable/image02" android:duration="500"/>
    <item android:drawable="@drawable/image03" android:duration="500"/>
</animation-list>

java：

imageView_2 = findViewById(R.id.image_2);
AnimationDrawable animationDrawable1 = new AnimationDrawable();
animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_1 ),200);
animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_2 ),200);
//...
animationDrawable1.setOneShot(true);
imageView_2.setImageDrawable(animationDrawable1);
animationDrawable1.start();

运行：

    Button button = (Button) findViewById(R.id.bt_001);
    button.setBackgroundResource(R.drawable.frame_animation);//把Drawable设置为button的背景
    //拿到这个我们定义的Drawable，实际也就是AnimationDrawable
    AnimationDrawable animationDrawable = (AnimationDrawable) button.getBackground();
    animationDrawable.start();//开启动画

由上可见，逐帧动画简单来说就是一帧一帧地播放图片，总体来说比较简单。值得注意的是由于是一张张图片进行播放，所以建议图片不要太多太大。

值器

​ 从上面的视图动画的效果来看，我们已经能够实现动画的播放，但是有时候我们看见别人的动画播放的时候，播放的速度并不是线性的，而是有的开始快然后慢慢减速到停止。这种又是如何实现的呢？这就是这一章主角–Interpolator（插值器）

​ 插值器的设置可以通过代码setInterpolator()设置可以通过xml中的interpolator标签属性进行设置。下面我们来看看Android都有哪些插值器供我们选择。

插值器	xml引用	效果
AccelerateDecelerateInterpolator	@android:anim/accelerate_decelerate_interpolator	加速减速插值器
AccelerateInterpolator	@android:anim/accelerate_interpolator	加速插值器
DecelerateInterpolator	@android:anim/decelerate_interpolator	减速插值器
BounceInterpolator	@android:anim/bounce_interpolator	弹跳插值器
OvershootInterpolator	@android:anim/overshoot_interpolator	结束偏移插值器
AnticipateInterpolator	@android:anim/anticipate_interpolator	初始偏移插值器
LinearInterpolator	@android:anim/linear_interpolator	线性差值器
AnticipateOvershootInterpolator	@android:anim/anticipate_overshoot_interpolator	初始结束都偏移插值器
CycleInterpolator	@android:anim/cycle_interpolator	循环插值器