Android动画学习（二）之补间动画实现

Android动画学习（二）之补间动画实现

补间动画概述

概述：

补间动画就是程序员只需要指定动画开始、结束等属性，而动画的变换过程由系统计算并补齐的动画

Tween 动画，可以使视图组件移动、放大、缩小以及产生透明度的变化。

特点：

补间动画是只能够作用在View上

对View进行移动、缩放、旋转和淡入淡出

通过配置Interpolator来控制动画的播放速度

借助AnimationSet来将这些动画效果组合起来使用

分类：

Java类名	XML关键字	实现效果
ScaleAnimation	scale	渐变尺寸伸缩动画效果
TranslateAnimation	translate	画面转换位置移动动画效果
AlphaAnimation	alpha	渐变透明度动画效果
RotateAnimation	rotate	画面转移旋转动画效果

补间动画的实现

Animation的公用功能

常用API：

start()：开启动画

setAnimationListener(AnimationListener listener)：设置动画监听

setDuration(long durationMillis) : 设置持续时间(单位ms)

setStartOffset(long startOffset) : 设置开始的延迟的时间(单位ms)

setFillBefore(boolean fillBefore) : 设置最终是否固定在起始状态

setFillAfter(boolean fillAfter) : 设置最终是否固定在最后的状态

setAnimationListener(AnimationListener listener) : 设置动画监听

setRepeatCount(int repeatCount)：设置动画重复次数

setInterpolator(Interpolator i)：设置使用插值器

cancel()：取消动画

reset()：重置动画为初始化状态

startAnimation(animation)：启动动画(控件)

clearAnimation()：结束动画(控件)

坐标类型:

Animation.ABSOLUTE 绝对值数值(默认以px为单位) 100

Animation.RELATIVE_TO_SELF 相对于自己 百分数,如:50% (以当前视图的宽度或高度其为基数来计算)

Animation.RELATIVE_TO_PARENT 相对于父控件 百分数+p,如:50%p (以父视图的宽度或高度其为基数来计算)

动画监听器 : AnimationListener

onAnimationStart(Animation animation) : 动画开始的回调

onAnimationEnd(Animation animation) :
4000
动画结束的回调

onAnimationRepeat(Animation animation) : 动画重复执行

缩放动画(ScaleAnimation)

可以对View大小进行的动画。创建该动画需要指定的参数包括缩放中心坐标（pivotXValue，pivotYValue）、动画开始时缩放比（fromX，fromY）、动画结束时缩放比（toX，toY）和坐标类型值（pivotXType，pivotYType（可参考坐标类型）），以及其它的动画属性。

代码实现

1、源码解析

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

第一个参数fromX为动画起始时 X坐标上的伸缩尺寸
第二个参数toX为动画结束时 X坐标上的伸缩尺寸
第三个参数fromY为动画起始时Y坐标上的伸缩尺寸
第四个参数toY为动画结束时Y坐标上的伸缩尺寸
说明:
以上四种属性值
0.0表示收缩到没有
1.0表示正常无伸缩
值小于1.0表示收缩
值大于1.0表示放大
第五个参数pivotXType为动画在X轴相对于物件位置类型
第六个参数pivotXValue为动画相对于物件的X坐标的开始位置
第七个参数pivotXType为动画在Y轴相对于物件位置类型
第八个参数pivotYValue为动画相对于物件的Y坐标的开始位置

2、代码

public void scale(View view) {

ation_Scale = new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation_Scale.setDuration(2000);
iv.startAnimation(animation_Scale);
}

XML实现

1、配置xml动画属性

在res下新建anim文件夹，新建AAA.xml文件。在set属性下新建设置动画属性.

<scale
android:duration="1000"
android:fillAfter="false"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.4"
android:toYScale="1.4" />

2、代码引用xml文件

/**
* 渐变尺寸伸缩动画效果
*
* @param view
*/
public void scale(View view) {
animation = AnimationUtils.loadAnimation(this, R.anim.scale);
iv.startAnimation(animation);
}

动画效果

旋转动画(RotateAnimation)

旋转动画，创建时需要指定动画开始的旋转角度（fromDegrees）、结束时旋转角度（toDegrees）、缩放中心坐标（pivotXValue，pivotYValue）和坐标类型值（pivotXType，pivotYType（可参考坐标类型）），以及其它的动画属性。

代码实现

1、源码解析

RotateAnimation(float fromDegrees, float toDegrees,int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
第一个参数fromDegrees为动画起始时的旋转角度
第二个参数toDegrees为动画旋转到的角度
第三个参数pivotXType为动画在X轴相对于物件位置类型
第四个参数pivotXValue为动画相对于物件的X坐标的开始位置
第五个参数pivotXType为动画在Y轴相对于物件位置类型
第六个参数pivotYValue为动画相对于物件的Y坐标的开始位置

2、代码

 public void rotate(View view) {
/*
RotateAnimation(float fromDegrees, float toDegrees,int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
第一个参数fromDegrees为动画起始时的旋转角度
第二个参数toDegrees为动画旋转到的角度
第三个参数pivotXType为动画在X轴相对于物件位置类型
第四个参数pivotXValue为动画相对于物件的X坐标的开始位置
第五个参数pivotXType为动画在Y轴相对于物件位置类型
第六个参数pivotYValue为动画相对于物件的Y坐标的开始位置
*/
animation_Rotate = new RotateAnimation(0.0f, +350.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation_Rotate.setDuration(2000);
iv.startAnimation(animation_Rotate);
}

XML实现

1、配置xml动画属性

在res下新建anim文件夹，新建AAA.xml文件。在set标签下新建设置动画属性.

<rotate
android:duration="3000"
android:fromDegrees="0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="+350" />

2、代码引用xml文件

/**
* 画面转移旋转动画效果
*
* @param view
*/
public void rotate(View view) {
animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
iv.startAnimation(animation);
}

动画效果

平移动画(TranslateAnimation)

可以改变位置的位移动画。创建动画需要指定动画开始的位置（fromXDelta，fromYDelta）和结束的位置（toXDelta，toYDelta），以及其它的动画属性。

代码实现

1、源码解析

TranslateAnimation(float fromXDelta, float toXDelta,float fromYDelta, float toYDelta)
第一个参数fromXDelta为动画起始时 X坐标上的移动位置
第二个参数toXDelta为动画结束时 X坐标上的移动位置
第三个参数fromYDelta为动画起始时Y坐标上的移动位置
第四个参数toYDelta为动画结束时Y坐标上的移动位置

TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
int fromYType, float fromYValue, int toYType, float toYValue)
fromXType : 坐标类型
fromXValue : 开始时X轴的坐标
toXType :坐标类型
toXValue : 结束时X轴的坐标
fromYType :坐标类型
fromYValue : 开始时Y轴的坐标
toYType :坐标类型
toYValue : 结束时Y轴的坐标

2、代码

public void translate(View view) {
/*
TranslateAnimation(float fromXDelta, float toXDelta,float fromYDelta, float toYDelta)
第一个参数fromXDelta为动画起始时 X坐标上的移动位置
第二个参数toXDelta为动画结束时 X坐标上的移动位置
第三个参数fromYDelta为动画起始时Y坐标上的移动位置
第四个参数toYDelta为动画结束时Y坐标上的移动位置
*/

animation_Translate = new TranslateAnimation(30, 30, -80, 300);
animation_Translate.setDuration(2000);
iv.startAnimation(animation_Translate);

}

XML实现

1、配置xml动画属性

在res下新建anim文件夹，新建AAA.xml文件。在set标签下新建设置动画属性.

性.

<translate
android:duration="2000"
android:fromXDelta="30"
android:fromYDelta="30"
android:toXDelta="-80"
android:toYDelta="300" />

2、代码引用xml文件

/**
* 画面转换位置移动动画效果
*
* @param view
*/
public void translate(View view) {
animation = AnimationUtils.loadAnimation(this, R.anim.translate);
iv.startAnimation(animation);
}

动画效果

透明度动画(AlphaAnimation)

透明度改变的动画。创建该动画需要指定动画开始的透明度（fromAlpha）和结束的透明度（toAlpha），以及其它的动画属性。

代码实现

1、方法解析

AlphaAnimation(float fromAlpha, float toAlpha)
第一个参数fromAlpha为 动画开始时候透明度(开始时的缩放比例)
第二个参数toAlpha为 动画结束时候透明度（结束时的缩放比例）

2、代码

public void alph(View view) {
/*
AlphaAnimation(float fromAlpha, float toAlpha)
第一个参数fromAlpha为 动画开始时候透明度
第二个参数toAlpha为 动画结束时候透明度
*/
animation_Alpha = new AlphaAnimation(0.1f, 1.0f);//说明:0.0表示完全透明,1.0表示完全不透明
animation_Alpha.setDuration(2000);
iv.startAnimation(animation_Alpha);
}

XML实现

1、配置xml动画属性

在res下新建anim文件夹，新建AAA.xml文件。在set标签下新建设置动画属性.

<alpha
android:duration="1000"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
说明:
0.0表示完全透明
1.0表示完全不透明
以上值取0.0-1.0之间的float数据类型的数字

2、代码引用xml文件

/**
* 渐变透明度动画效果
*
* @param view
*/
public void alph(View view) {
/**
* 使用XML中的动画效果 第一个参数Context为程序的上下文 第二个参数id为动画XML文件的引用
*/
animation = AnimationUtils.loadAnimation(this, R.anim.alpha);

animation.setDuration(2000);
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animatio
cfa3
n) {
//动画开始时调用
}

@Override
public void onAnimationEnd(Animation animation) {
//动画结束时调用
}

@Override
public void onAnimationRepeat(Animation animation) {
//动画重复时调用
}
});
iv.startAnimation(animation);
}

动画效果

复合动画(AnimationSet)

代码实现

1、方法解析

在代码中添加多个动画属性，使用AnimationSet.addAnimation方法添加动画。

2、代码

public void setGroupAnimation(View v) {
animation_Alpha = new AlphaAnimation(0.1f, 1.0f);
animation_Scale = new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation_Translate = new TranslateAnimation(30, 30, -80, 300);
animation_Rotate = new RotateAnimation(0.0f, +350.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
AnimationSet animationset = new AnimationSet(true);
animationset.addAnimation(animation_Alpha);
animationset.addAnimation(animation_Rotate);
animationset.addAnimation(animation_Scale);
animationset.addAnimation(animation_Translate);
animationset.setDuration(10000);
iv.startAnimation(animationset);
}

XML实现

1、配置xml动画属性

在res下新建anim文件夹，新建AAA.xml文件。在set标签下新建多个动画标签设置动画属性.

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

<alpha
android:duration="1000"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
<rotate
android:duration="3000"
android:fromDegrees="0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="+350" /><scale
android:duration="1000"
android:fillAfter="false"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.4"
android:toYScale="1.4" />
<translate
android:duration="2000"
android:fromXDelta="30"
android:fromYDelta="30"
android:toXDelta="-80"
android:toYDelta="300" />
</set>

2、代码引用xml文件

animation = AnimationUtils.loadAnimation(this, R.anim.groupanimation);
animation.setDuration(10000);
iv.startAnimation(animation);

动画效果

补间动画插值器——Interpolator

概述：

插值器只是一个概念，系统中与之相关的类叫做 TimeInterpolator ，其只是一个接口，定义了所有Interpolator都需要实现的方法，准确来说叫做“时间插值器”。

意思是：该时间插值器定义了动画的变化率，允许动画做非线性的运动，比如加速、减速。

先简单介绍，在属性动画中会详细介绍。

Android中为Interpolator提供的几个实现类。分别用于实现不同的动画变化速度。

Accelerate_decelerate_interpolator   加速-减速 动画插入器

Accelerate_interpolator   加速-动画插入器

Decelerate_interpolator    减速- 动画插入器

AccelerateInterpolator 加速，开始时慢中间加速

DecelerateInterpolator 减速，开始时快然后减速

AccelerateDecelerateInterolator 先加速后减速，开始结束时慢，中间加速

AnticipateInterpolator 反向，先向相反方向改变一段再加速播放

AnticipateOvershootInterpolator 反向加超越，先向相反方向改变，再加速播放，会超出目的值然后缓慢移动至目的值

BounceInterpolator 跳跃，快到目的值时值会跳跃，如目的值100，后面的值可能依次为85，77，70，80，90，100

CycleIinterpolator 循环，动画循环一定次数，值的改变为一正弦函数：Math.sin(2* mCycles* Math.PI* input)

LinearInterpolator 线性，线性均匀改变

使用

XMl中配置

android:interpolator="@android:anim/accelerate_decelerate_interpolator"

Java中设置

animation.setInterpolator(）添加插值器。可以添加固定状态的Interpolator，也可以自定义Interpolator。

public void listen(View view){
//1. 定义动画文件
//        旋转动画: 以左顶点为坐标, 从正90度到负90度, 持续5s
//2. 加载动画文件得到动画对象
Animation animation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(1000);
//插值器设置线性变化
animation.setInterpolator(new LinearInterpolator());
//设置动画重复次数
animation.setRepeatCount(Animation.INFINITE);//重复3次
//设置动画监听
animation.setAnimationListener(new Animation.AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {
Log.e("TAG", "动画开始");
}

@Override
public void onAnimationRepeat(Animation animation) {
Log.e("TAG", "动画重复");

}

@Override
public void onAnimationEnd(Animation animation) {
Log.e("TAG", "动画结束");
}
});

//3. 启动动画
iv.startAnimation(animation);

}

效果



说明：

效果可能不明显，没办法看出来。插值器使第一次动画结束后流畅的过渡到第二次动画开始。

补间动画优缺点

优点：

使用简单，效果流畅

缺点：

拓展性太差，仅支持四种动画及其组合动画

只能够作用在View上

不支持自定义View的拓展

只是改变了View的显示效果，而不会真正去改变View的属性

总结

补间动画的学习到此结束，下一篇介绍补间动画几个经常使用的实例。

写博客是为了帮助开发者学习使用技术，同时巩固自己所学技术。如果此篇博客有助于您的学习，那是我的荣幸！如果此篇博客有任何瑕疵，请多多指教!在此感谢您的学习和指教！