浅析Android动画（一），View动画高级实例探究

594 查看

本猿自诩Android小白，天然呆谷粉米粉，爱开源，更爱漂亮妹纸（(^o^)/~来跟我一起唱：原谅我一生放荡不羁爱自由~~~请自行脑补掌声三分钟^O^）；好了好了说人话：本猿中南大学大三狗一个，每天最快乐的时光都与14寸的DeskTop为伴，曾经我是一个热爱并略懂Java和Android的小白，现在我是一个热爱并熟悉Java和Android的小白，就这样！聊技术谈梦想欢迎私信 @哈皮小猿_wondertwo

视图动画的基本用法

提起 Android 动画很多初学者就会一脸懵逼二阶茫然，当初翻遍图书馆的一大堆入门书籍都找不到一本书在讲 Android 动画机制，好在一颗痴迷技术的心让我自备燃料有始有终，最后总算弄明白了 Android 动画到底是个什么鬼。其实我们有木有经常用手机拍了很多漂亮照片以后，打开相册，点击更多，点击自动播放，这些静态的照片就会连贯的播放起来了有木有？这其实就是逐帧动画，类似于动画片的效果。是不是很简单呢？关于Android动画的分类我查了很多资料，最初只有两种动画即逐帧动画(frame-by-frame animation)和补间动画(tweened animation)，补间动画只需要开发者设置动画的起始值和结束值，中间的动画由系统自动帮我们完成，下面要介绍的视图动画就属于补间动画。但是从Android 3.x开始谷歌引入了一种全新的动画——属性动画，相对于视图动画只能给View对象设置动画效果来说，属性动画要强大的太多，只要是一个Object对象属性动画都能为其设置动画属性，不管这个对象能不能看得见，会不会与用户产生交互。关于属性动画的用法会在下一篇博客中详细介绍，下面的主要以讲解视图动画为主。视图动画即我们常说的 View Animation，有四种效果如下：

透明度变化(AlphaAnimation)；
位移(TranslateAnimation)；
缩放(ScaleAnimation)；
旋转(RotateAnimation)；

可以从Android api文档看到视图动画 Add in api level 1 ，算是 Android 动画家族中的老腊肉了。那我们就从视图动画的基本用法着手，一步步深入学习！这里先放上狂炫酷帅的QQ客户端抖一抖动画和3D旋转&电视关闭画面的自定义动画，哈哈，这都是用视图动画做出来的效果哦！

QQ抖一抖

电视关机画面&3D旋转

哈哈，上面的自定义动画有木有惊艳到你呢？“每一个宅男心中都藏着一个女神”，你看的没错！画面中就是我的女神——张钧甯。上面的动画特效是在四种最基本的视图动画的基础上稍加改进出来的，那么四种基本的视图动画效果如何呢？

AlphaAnimation

ScaleAnimation

RotateAnimation

TranslateAnimation

分别对应着透明度变化(AlphaAnimation)，缩放(ScaleAnimation)，旋转(RotateAnimation)，位移(TranslateAnimation)； View 动画的四种变换效果对应着的 AlphaAnimation ， ScaleAnimation ， RotateAnimation ， TranslateAnimation 这4个动画类都继承自 Animation 类，Animation 类是所有视图动画类的父类，后面讲解的自定义动画类其实也必须继承 Animation 。

并且既可以在代码中动态的指定这四种动画效果，也可以在 xml 文件中定义， xml 文件中视图动画的目录是 res/anim/file_name.xml ，与视图动画不同， xml 文件中属性动画的目录是 res/animator/file_name.xml ，不过属性动画并不推荐在 xml 文件中定义，关于属性动画请关注我的下一篇博客哦。xml 文件中视图动画代码如下，透明度动画对应标签，缩放动画对应标签，旋转动画对应标签，位移动画对应标签，根标签就表示一个动画集合 AnimationSet ；shareInterpolator="true" 表示动画集合中的所有动画共享插值器，反之shareInterpolator="false" 表示不共享插值器，关于插值器会在第二篇博客的属性动画中详细介绍。

<code>

<?xml version="1.0" encoding="utf-8"??>

</set>

</code>

以上代码标签中的属性值，其具体含义如下：

alpha
- fromAlpha —- 透明度起始值，0表示完全透明
- toAlpha —- 透明度最终值，1表示不透明
scale
- fromXScale —- 水平方向缩放的起始值，比如0
- fromYScale —- 竖直方向缩放的起始值，比如0
- toXScale —- 水平方向缩放的结束值，比如2
- toYScale —- 竖直方向缩放的结束值，比如2
- pivotX —- 缩放支点的x坐标
- pivotY —- 缩放支点的y坐标（支点可以理解为缩放的中心点，缩放过程中这点的坐标是不变的;支点默认在中心位置）
translate
- fromXDelta —- x起始值
- toXDelta —- x结束值
- fromYDelta —- y起始值
- toYDelta —- y结束值
rotate
- fromDegrees —- 旋转起始角度
- toDegrees —- 旋转结束角度

除此之外，还有一些常见的属性值，如下：

android:duration —- 动画的持续时间
android:fillAfter —- true表示保持动画结束时的状态，false表示不保持

上面就是通过 xml 文件定义的 View 动画，那怎么应用上面的动画呢？也很简单，通过 View 对象在代码中动态加载即可，代码如下。值得注意的是，AnimationUtils.loadAnimation(this, R.anim.ani_view) 方法接收两个参数，第一个是当前的上下文环境，第二个就是我们通过 xml 定义的动画啦。代码如下：

ImageView ivAni = (ImageView) findViewById(R.id.iv_ani);

Animation ani = AnimationUtils.loadAnimation(this, R.anim.ani_view);

ivAni.startAnimation(ani);

OK那么问题来了，怎样直接通过代码动态定义 View 动画呢？也很简单，先上代码如下：

AlphaAni—-透明度动画代码如下，相信你经过前面的部分已经能很容易就看懂这些代码了，在 beginAnimation() 方法中，我们在3000ms的时间内把一个 LinearLayout 对象 llAlpha 的透明度从0到1，即从完全透明渐变到完全不透明，然后在 onCreate() 方法中调用 beginAnimation() 方法就能以透明度渐变动画的方式跳转到 AlphaAni :

package com.wondertwo.viewani;

import android.app.Activity;

import android.os.Bundle;

import android.view.animation.AlphaAnimation;

import android.widget.LinearLayout;

import com.wondertwo.R;

/**

* AlphaAni----透明度动画

* Created by wondertwo on 2016/3/11.

public class AlphaAni extends Activity {

private LinearLayout llAlpha;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_alpha);

llAlpha = (LinearLayout) findViewById(R.id.ll_alpha);

beginAnimation();

}

// 启动动画

private void beginAnimation() {

AlphaAnimation alpha = new AlphaAnimation(0, 1);// 0---->1从透明到不透明

alpha.setDuration(3000);// 设置动画持续时间

llAlpha.startAnimation(alpha);// 启动动画

}

ScaleAni—-缩放动画代码如下，与上面的透明度渐变动画类似，通过 ctrl+左键 查看源码可以知道，在创建 ScaleAnimation 缩放动画的对象的时候， ScaleAnimation(0, 2, 0, 2) 接受的四个参数分别是 ScaleAnimation(float fromX, float toX, float fromY, float toY) ：

package com.wondertwo.viewani;

import android.app.Activity;

import android.os.Bundle;

import android.view.animation.ScaleAnimation;

import android.widget.LinearLayout;

import com.wondertwo.R;

/**

* ScaleAni----缩放动画

* Created by wondertwo on 2016/3/11.

public class ScaleAni extends Activity {

private LinearLayout llScale;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_scale);

llScale = (LinearLayout) findViewById(R.id.ll_scale);

beginAnimation();

}

// 启动动画

private void beginAnimation() {

ScaleAnimation scale = new ScaleAnimation(0, 2, 0, 2);

scale.setDuration(3000);

llScale.startAnimation(scale);

}

RotateAni—-旋转动画代码如下，表示把一个 View 对象从起始角度0旋转到360度，后面的四个参数 RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f 表示以中心位置为旋转支点：

package com.wondertwo.viewani;

import android.app.Activity;

import android.os.Bundle;

import android.view.animation.RotateAnimation;

import android.widget.LinearLayout;

import com.wondertwo.R;

/**

* RotateAni----旋转动画

* Created by wondertwo on 2016/3/11.

public class RotateAni extends Activity {

private LinearLayout llRotate;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_rotate);

llRotate = (LinearLayout) findViewById(R.id.ll_rotate);

beginAnimation();

}

// 启动动画

private void beginAnimation() {

RotateAnimation rotate = new RotateAnimation(0, 360,

RotateAnimation.RELATIVE_TO_SELF, 0.5f,

RotateAnimation.RELATIVE_TO_SELF, 0.5f);

rotate.setDuration(3000);

llRotate.startAnimation(rotate);

}

TranslateAni—-位移动画代码如下，表示把 View 对象从起始坐标 (0, 0) 位移到 (200, 300) ，是不是很简单呢：