1. 前言

Android三种动画中的第二种——补间动画(Tween)，和帧动画不同，帧动画是通过连续播放图片来模拟动画效果，而补间动画开发者只需指定动画开始，以及动画结束"关键帧"，而动画变化的"中间帧"则由系统计算并补齐。如下为示意图：

对于补间动画而言，开发者无需“逐一”定义的过程中的每一帧，他只需要定义动画的开始和结束的关键帧，并指定动画的持续时间即可。

2. 补间动画的分类

AlphaAnimation：透明度渐变效果，创建时许指定开始以及结束透明度，还有动画的持续时间，透明度的变化范围(0,1)，0是完全透明，1是完全不透明；对应<alpha/>标签！

ScaleAnimation：缩放渐变效果，创建时需指定开始以及结束的缩放比，以及缩放参考点，还有动画的持续时间；对应<scale/>标签！

TranslateAnimation：位移渐变效果，创建时指定起始以及结束位置，并指定动画的持续时间即可；对应<translate/>标签！

RotateAnimation：旋转渐变效果，创建时指定动画起始以及结束的旋转角度，以及动画持续时间和旋转的轴心；对应<rotate/>标签

AnimationSet：组合渐变，就是前面多种渐变的组合，对应<set/>标签

3. Interpolator

在开始讲解各种动画的用法之前，我们先要来讲解一个东西：Interpolator

用来控制动画的变化速度，可以理解成动画渲染器，当然我们也可以自己实现Interpolator 接口，自行来控制动画的变化速度，而Android中已经为我们提供了五个可供选择的实现类：

LinearInterpolator：动画以均匀的速度改变

AccelerateInterpolator：在动画开始的地方改变速度较慢，然后开始加速

AccelerateDecelerateInterpolator：在动画开始、结束的地方改变速度较慢，中间时加速

CycleInterpolator：动画循环播放特定次数，变化速度按正弦曲线改变： Math.sin(2 * mCycles * Math.PI * input)

DecelerateInterpolator：在动画开始的地方改变速度较快，然后开始减速

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

AnticipateOvershootInterpolator：开始的时候向后然后向前甩一定值后返回最后的值

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

OvershottInterpolator：回弹，最后超出目的值然后缓慢改变到目的值

而这个东东，我们一般是在写动画xml文件时会用到，属性是：android:interpolator，而上面对应的值是：@android:anim/linear_interpolator，其实就是驼峰命名法变下划线而已 AccelerateDecelerateInterpolator对应：@android:anim/accelerate_decelerate_interpolator！

4. 动画详解

4.1 AlphaAnimation 透明度渐变

anim_alpha.xml：

<alpha xmlns:android="http://schemas.android.com/apk/res/android"  android:interpolator="@android:anim/accelerate_decelerate_interpolator"  android:fromAlpha="1.0"  android:toAlpha="0.1"  android:duration="2000"/>

属性解释：

fromAlpha :起始透明度
toAlpha:结束透明度
透明度的范围为：0-1，完全透明-完全不透明

4.2 ScaleAnimation(缩放渐变)

anim_scale.xml：

<scale xmlns:android="http://schemas.android.com/apk/res/android"  android:interpolator="@android:anim/accelerate_interpolator"  android:fromXScale="0.2"  android:toXScale="1.5"  android:fromYScale="0.2"  android:toYScale="1.5"  android:pivotX="50%"  android:pivotY="50%"  android:duration="2000"/>

属性解释：

fromXScale/fromYScale：沿着X轴/Y轴缩放的起始比例

toXScale/toYScale：沿着X轴/Y轴缩放的结束比例

pivotX/pivotY：缩放的中轴点X/Y坐标，即距离自身左边缘的位置，比如50%就是以图像的中心为中轴点

4.3 TranslateAnimation(位移渐变)

anim_translate.xml：

<translate xmlns:android="http://schemas.android.com/apk/res/android"  android:interpolator="@android:anim/accelerate_decelerate_interpolator"  android:fromXDelta="0"  android:toXDelta="320"  android:fromYDelta="0"  android:toYDelta="0"  android:duration="2000"/>

属性解释：

fromXDelta/fromYDelta：动画起始位置的X/Y坐标

toXDelta/toYDelta：动画结束位置的X/Y坐标

4.4 RotateAnimation(旋转渐变)

anim_rotate.xml：

<rotate xmlns:android="http://schemas.android.com/apk/res/android"  android:interpolator="@android:anim/accelerate_decelerate_interpolator"  android:fromDegrees="0"  android:toDegrees="360"  android:duration="1000"  android:repeatCount="1"  android:repeatMode="reverse"/>

属性解释：

fromDegrees/toDegrees：旋转的起始/结束角度

repeatCount：旋转的次数，默认值为0，代表一次，假如是其他值，比如3，则旋转4次另外，值为-1或者infinite时，表示动画永不停止

repeatMode：设置重复模式，默认restart，但只有当repeatCount大于0或者infinite或-1时才有效。还可以设置成reverse，表示偶数次显示动画时会做方向相反的运动！

4.5 AnimationSet(组合渐变)

就是前面几个动画组合到一起而已， anim_set.xml：

<set xmlns:android="http://schemas.android.com/apk/res/android"  android:interpolator="@android:anim/decelerate_interpolator"  android:shareInterpolator="true" >  <scale  android:duration="2000"  android:fromXScale="0.2"  android:fromYScale="0.2"  android:pivotX="50%"  android:pivotY="50%"  android:toXScale="1.5"  android:toYScale="1.5" />  <rotate  android:duration="1000"  android:fromDegrees="0"  android:repeatCount="1"  android:repeatMode="reverse"  android:toDegrees="360" />  <translate  android:duration="2000"  android:fromXDelta="0"  android:fromYDelta="0"  android:toXDelta="320"  android:toYDelta="0" />  <alpha  android:duration="2000"  android:fromAlpha="1.0"  android:toAlpha="0.1" />  </set>

5. Demo

布局文件 activity_main.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><Buttonandroid:id="@+id/btn_alpha"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="透明度渐变" /><Buttonandroid:id="@+id/btn_scale"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="缩放渐变" /><Buttonandroid:id="@+id/btn_tran"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="位移渐变" /><Buttonandroid:id="@+id/btn_rotate"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="旋转渐变" /><Buttonandroid:id="@+id/btn_set"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="组合渐变" /><ImageViewandroid:id="@+id/img_show"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginTop="48dp"android:src="@mipmap/ic_launcher" /></LinearLayout>

接着到我们的MainActivity.java，同样非常简单，只需调用AnimationUtils.loadAnimation() 加载动画，然后我们的View控件调用startAnimation开启动画即可

public class MainActivity extends AppCompatActivity implements View.OnClickListener{private Button btn_alpha;private Button btn_scale;private Button btn_tran;private Button btn_rotate;private Button btn_set;private ImageView img_show;private Animation animation = null;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);bindViews();}private void bindViews() {btn_alpha = (Button) findViewById(R.id.btn_alpha);btn_scale = (Button) findViewById(R.id.btn_scale);btn_tran = (Button) findViewById(R.id.btn_tran);btn_rotate = (Button) findViewById(R.id.btn_rotate);btn_set = (Button) findViewById(R.id.btn_set);img_show = (ImageView) findViewById(R.id.img_show);btn_alpha.setOnClickListener(this);btn_scale.setOnClickListener(this);btn_tran.setOnClickListener(this);btn_rotate.setOnClickListener(this);btn_set.setOnClickListener(this);}@Overridepublic void onClick(View v) {switch (v.getId()){case R.id.btn_alpha:animation = AnimationUtils.loadAnimation(this,R.anim.anim_alpha);img_show.startAnimation(animation);break;case R.id.btn_scale:animation = AnimationUtils.loadAnimation(this,R.anim.anim_scale);img_show.startAnimation(animation);break;case R.id.btn_tran:animation = AnimationUtils.loadAnimation(this,R.anim.anim_translate);img_show.startAnimation(animation);break;case R.id.btn_rotate:animation = AnimationUtils.loadAnimation(this,R.anim.anim_rotate);img_show.startAnimation(animation);break;case R.id.btn_set:animation = AnimationUtils.loadAnimation(this,R.anim.anim_set);img_show.startAnimation(animation);break;}}
}

两个比较重要的方法：

1. AnimationUtils.loadAnimation(this,R.anim.anim_scale);

/*** Loads an {@link Animation} object from a resource** @param context Application context used to access resources* @param id The resource id of the animation to load* @return The animation object reference by the specified id* @throws NotFoundException when the animation cannot be loaded*/public static Animation loadAnimation(Context context, @AnimRes int id)throws NotFoundException {XmlResourceParser parser = null;try {parser = context.getResources().getAnimation(id);return createAnimationFromXml(context, parser);} catch (XmlPullParserException ex) {NotFoundException rnf = new NotFoundException("Can't load animation resource ID #0x" +Integer.toHexString(id));rnf.initCause(ex);throw rnf;} catch (IOException ex) {NotFoundException rnf = new NotFoundException("Can't load animation resource ID #0x" +Integer.toHexString(id));rnf.initCause(ex);throw rnf;} finally {if (parser != null) parser.close();}}

2. View.startAnimation(animation)

    /*** Start the specified animation now.** @param animation the animation to start now*/public void startAnimation(Animation animation) {animation.setStartTime(Animation.START_ON_FIRST_FRAME);setAnimation(animation);invalidateParentCaches();invalidate(true);}

6. 动画状态的监听

我们可以对动画的执行状态进行监听，调用动画对象的：

setAnimationListener(new AnimationListener())方法，重写下面的三个方法：

onAnimationStart()：动画开始

onAnimtaionRepeat()：动画重复

onAnimationEnd()：动画结束

即可完成动画执行状态的监听~

7. 为View动态设置动画效果

如本文中的静态加载方式：先调用AnimationUtils.loadAnimation(动画xml文件)，然后View控件调用startAnimation(anim) 开始动画。

Android 动画系列二之补间动画相关推荐

安卓动画全解：补间动画（视图动画）、布局动画、属性动画、逐帧动画。动画Animation属性、Alpha属性、Scale属性、Translate属性、Rotate属性，动画集AnimationSet
全栈工程师开发手册 (作者:栾鹏) 安卓教程全解安卓动画全解:补间动画(视图动画).布局动画.属性动画.逐帧动画. 主要内容包含:动画Animation属性.Alpha属性.Scale属性.Tran ...
android 获取动画资源,Android动画资源（二）——补间动画资源
Android animations.png Android动画资源系列文章:Android动画资源文件总结 Tween animation 用XML定义的动画,在图形上执行诸如旋转.透明度变化.移动 ...
Android动画案例（二）补间动画
补间动画可以使用xml文件或者java代码进行定义,但是官方推荐xml,但两个同样重要移动: TranslateAnimation 缩放:ScaleAnimation 旋转:RotateAnima ...
基础动画-（1）-补间动画
一.补间动画 1.基本介绍基本的补间动画分为四个(透明度,缩放,位移,旋转) (1)AnimationSet <set>标签对应表示动画集合,对应AnimationSet,他可以包含若干 ...
flash 不显示旋转补间动画_关于flash补间动画
2006-04-09 flash如何创建补间动画我在第你在第十针的位置插入关键针以后就不要动了,然后在第一针加入补间动画~在后在在第10针的位置改变图片的位置或者形状就OK了如果你要做渐变动画的话 ...
android 动画多次使用,Android动画使用（二）——补间（View）动画
1.Android动画简介 1.1 分类 Android系统提供了很多丰富的API去实现UI的2D与3D动画,最主要的划分可以分为如下几类: Drawable Animation: 这种动画(也叫Fr ...
Android逐帧动画和补间动画
本篇博客来看一下Android中的逐帧动画和补间动画. 一.逐帧动画逐帧动画也叫Drawable Animation. 在Android中实现逐帧动画,就是由设计师给出一系列状态不断变化的图片, 开 ...
android动画之帧动画（drawable animation）和补间动画（view animation）
帧动画 drawable animation使用比较简单,而且支持市场上所以API版本,下面简单贴下代码.帧动画,就像GIF图片,通过一系列Drawable依次显示来模拟动画的效果. 直接代码贴上 x ...
Android帧动画和补间动画
目录 1.帧动画 (帧动画的资源文件,放在drawable文件夹下) 1.创建一个项目 2.导入资源, 将图片资源放入 mipmap 文件夹下 3.编写资源文件在drawable文件夹创建 4.在x ...
Android开发总结之动画(帧动画+补间动画)
一.概述动画的概念动画的概念不同于一般意义上的动画片,动画是一种综合艺术,它是集合了绘画.漫画.电影.数字媒体.摄影.音乐.文学等众多艺术门类于一身的艺术表现形式. 动画的英文有很多表述, ...

Android 动画系列二之补间动画

1. 前言

2. 补间动画的分类

3. Interpolator

4. 动画详解

4.1 AlphaAnimation 透明度渐变

4.2 ScaleAnimation(缩放渐变)

4.3 TranslateAnimation(位移渐变)

4.4 RotateAnimation(旋转渐变)

4.5 AnimationSet(组合渐变)

5. Demo

6. 动画状态的监听

7. 为View动态设置动画效果

Android 动画系列二之补间动画相关推荐

最新文章

热门文章