android动画（十四）

介绍App开发常见的动画显示技术，主要包括如何使用帧动画实现电影播放效果、如何使用补间动画完成视图的4种基本状态变化、如何使用属性动画达成视图各种状态的动态变换效果、如何使用矢量动画展现更加精细的局部炫动特效，以及动画技术常用的3种代表手段。

一、帧动画

介绍帧动画相关的技术实现，首先说明如何通过动画图形与宿主视图播放帧动画，接着阐述播放GIF动画存在的问题和对应的解决思路与技术方案，最后介绍如何使用过渡图形实现两幅图片之间的淡入淡出动画。

1.帧动画的实现

Android的动画分为三大类：帧动画、补间动画和属性动画。

帧动画是最简单的一种动画，跟现实生活中的电影胶卷类似，都是在短时间内连续播放多张图片，从而模拟动态画面的效果。

帧动画播放所需的一系列图片，都在动画图形AnimationDrawable定义，并由动画图形控制帧动画的播放操作。

如何使用动画图形

下面是AnimationDrawable的常用方法。

addFrame：添加一幅图片帧，并指定该帧的持续时间（单位毫秒）。

setOneShot：设置是否只播放一次。

start：开始播放。

stop：停止播放。

isRunning：判断是否正在播放。

有了动画图形，还得有一个宿主视图显示该图形，一般使用图像视图ImageView承载AnimationDrawable。

帧动画的播放效果

2.显示GIF动画

GIF在Windows上是常见的图片格式，主要用来播放短小的动画。

Android并不支持直接播放GIF动图，如果在图像视图中加载一张GIF文件，只会显示GIF文件的第一帧图片。

在手机上显示GIF文件要借助于帧动画技术，实现方式有以下两种：

（1）开发者在电脑上把GIF文件手工分解为一组帧图片，放入工程的资源目录中，再通过动画图形显示帧动画。

（2）在代码中将GIF文件自动分解为一系列图片数据，并获取每帧的持续时间，然后通过动画图形动态加载帧图片。

Android从9.0开始支持直接播放GIF动图。

GIF动画的播放效果

3.淡入淡出动画

帧动画的采用后面一帧直接覆盖前面一帧，这在快速轮播时没什么问题，但是如果每帧的间隔时间比较长（比如超过0.5秒），两帧之间的画面切换就会很生硬。

为了解决这种长间隔切换图片在视觉效果方面的问题，Android提供了过渡图形TransitionDrawable处理两张图片之间的渐变显示。

在两张图片过渡变化的时候，前一张图片逐渐变淡直至消失，也就是所谓的淡出；与此同时，后一张图片从无到有完全呈现，也就是所谓的淡入。于是形成了淡入淡出的动画效果。

如何使用过渡图形

过渡图形同样需要宿主视图显示该图形，即调用ImageView对象的setImageDrawable方法进行图形加载操作。

下面是TransitionDrawable的常用方法说明。

构造函数：指定过渡图形的图形数组。该图形数组大小为2，包含前后两张图形。

startTransition：开始过渡操作。

resetTransition：重置过渡操作。

reverseTransition：倒过来执行过渡操作。

淡入淡出动画的播放效果

二、补间动画

介绍补间动画的原理与用法，首先介绍4种补间动画的基本用法；接着阐述补间动画的原理，基于旋转动画的思想实现摇摆动画；然后介绍如何使用集合动画同时展示多种动画效果；

1.补间动画的种类

Android提供了补间动画，允许开发者实现某个视图的动态变换。

由开发者提供动画的起始状态与终止状态，然后系统按照时间推移自动补充中间状态的视图，于是这种动画就称为“补间动画” 补间动画包括4类动画效果。

1）. 灰度动画AlphaAnimation

2）. 平移动画TranslateAnimation

3）. 缩放动画ScaleAnimation

4）. 旋转动画RotateAnimation

如何使用Animation

补间动画都来自于共同的动画类Animation，下面是Animation的常用方法说明。

setFillAfter：设置是否维持结束画面。

setRepeatMode：设置重播模式。

setRepeatCount：设置重播次数。

setDuration：设置动画的持续时间，单位毫秒。

setInterpolator：设置动画的插值器。

setAnimationListener：设置动画事件的监听器。

如何播放补间动画

补间动画的宿主视图可以是派生自View类的任意视图。

（1）调用宿主的startAnimation方法，即可开始播放动画；

（2）调用宿主的clearAnimation方法，即可清除动画播放。

下面是每种补间动画对应的初始化方式：

（1）初始化灰度动画：在构造函数中指定视图透明度的前后数值。

（2）初始化平移动画：在构造函数中指定视图左上角在平移前后的坐标值。

（3）初始化缩放动画：在构造函数中指定视图横纵坐标的前后缩放比例。

（4）初始化旋转动画：在构造函数中指定视图的旋转角度。

补间动画的播放效果（上）

补间动画的播放效果（下）

2.补间动画的原理

补间动画只提供了基本的动态变换，如果想要复杂的动画效果，比如像钟摆一样左摆一下再右摆一下，补间动画就无能为力了。

查看旋转动画的源码发现：applyTransformation方法内部根据插值时间计算当前所处的角度degrees，最后使用转换器把视图旋转到该角度。

于是补间动画对中间状态的视图变换处理不外乎以下两个步骤：

（1）根据插值时间计算当前的状态值。

（2）在宿主视图上使用该状态值进行变换操作。

摇摆动画的实现思路

钟摆的左右摆动其实由以下3段旋转动画构成。

（1）以上面的端点为圆心，钟摆以垂直向下的状态向左旋转，转到左边的某个角度停住（比如左转60度）。

（2）钟摆从左边向右边旋转，转到右边的某个角度停住（比如右转120度，与垂直方向的夹角为60度）。

（3）钟摆从右边再向左旋转，当其摆到垂直方向时，完成一个周期的摇摆动作。

摇摆动画的播放效果

3.集合动画

把几个补间动画组装起来，让某视图同时呈现多种动画的效果，这便成了集合动画。

集合动画与补间动画一样继承自Animation类，所以拥有补间动画的基本方法。

但集合动画不像一般补间动画那样提供构造函数，而是通过addAnimation方法把别的补间动画加入本集合动画中。

集合动画的播放效果

4在飞掠横幅中使用补间动画

飞掠横幅切换前后Banner时有些生硬，后面的广告图一下子把前面的广告图覆盖，显得十分突兀。

现在利用补间动画技术，可给飞掠横幅加上动画翻页变换。

ViewFlipper有以下4个操作动画的方法：

setInAnimation：设置视图的移入动画。

getInAnimation：获取移入动画的动画对象。

setOutAnimation：设置视图的移出动画。

getOutAnimation：获取移出动画的动画对象。

飞掠横幅切换动画的实现步骤

（1）首先定义4个动画定义文件，用来描述移入动画和移出动画的行为。

1）向左移入动画，用来描述Banner向左翻页时右边页面的移入行为。

2）向左移出动画，用来描述Banner向左翻页时左边页面的移出行为。

3）向右移入动画，用来描述Banner向右翻页时左边页面的移入行为。

4）向右移出动画，用来描述Banner向右翻页时右边页面的移出行为。

（2） Banner轮播下一张图片时，对当前图片播放向左移出动画，对下一张图片播放向左移入动画。

（3）Banner轮播上一张图片时，对当前图片播放向右移出动画，对上一张图片播放向右移入动画。

飞掠横幅切换动画的播放效果

三、属性动画

介绍属性动画的应用场合与进阶用法，首先说明为何属性动画是补间动画的升级版，以及属性动画的基本用法；接着说明如何运用属性动画组合实现多个属性动画的同时播放与顺序播放效果；最后对动画技术中的插值器和估值器进行分析，并演示不同插值器的动画效果。

1.属性动画的用法

视图View有许多状态属性，4种补间动画只对其中6种属性进行操作，这6种属性的说明见下表。

属性动画突破了补间动画的局限，允许视图的所有属性都能实现渐变的动画效果，例如背景颜色、文字颜色、文字大小等。

如何使用属性动画（上）

下面是ObjectAnimator的常用方法。

ofInt：定义整型属性的属性动画。

ofFloat：定义浮点型属性的属性动画。

ofArgb：定义颜色属性的属性动画。

ofObject：定义对象属性的属性动画。

setRepeatMode：设置重播模式。

setRepeatCount：设置重播次数。

setDuration：设置动画的持续时间，单位毫秒。

setInterpolator：设置动画的插值器。

setEvaluator：设置动画的估值器。

如何使用属性动画（下）

start：开始播放动画。

cancel：取消播放动画。

end：结束播放动画。

pause：暂停播放动画。

resume：恢复播放动画。

reverse：倒过来播放动画。

isRunning：判断动画是否在播放。

isPaused：判断动画是否被暂停。

isStarted：判断动画是否已经开始。

addListener：添加动画监听器。

removeListener：移出指定的动画监听器。

属性动画的播放效果

2. 属性动画组合

补间动画可以通过集合动画AnimationSet组装多种动画效果，属性动画也有类似的做法，即通过属性动画组合 AnimatorSet组装多种属性动画。

集合动画AnimatorSet虽然与属性动画组合ObjectAnimator都是继承自Animator，但是两者的使用方法略有出入，主要是属性动画组合少了部分方法。

如何使用属性动画组合

下面是AnimatorSet的常用方法。

setDuration：设置动画组合的持续时间，单位毫秒。

play：设置当前动画。该方法返回一个AnimatorSet.Builder对象，可对该对象调用组装方法添加新动画。下面是Builder的组装方法说明。

with：指定该动画与当前动画一起播放。

before：指定该动画在当前动画之前播放。

after：指定该动画在当前动画之后播放。

start：开始播放动画组合。

pause：暂停播放动画组合。

resume：恢复播放动画组合。

cancel：取消播放动画组合。

end：结束播放动画组合。

属性动画组合的播放效果

3.插值器和估值器

插值器用来控制属性值的变化速率，也可以理解为动画播放的速度，默认是匀速播放。插值器实现类的说明见下表。

什么是估值器

估值器专用于属性动画，主要描述该属性的数值变化要采用什么单位，比如整型数的渐变数值要取整，颜色的渐变数值为ARGB格式的颜色对象，矩形的渐变数值为Rect对象等。

估值器实现类的说明见下表。

震荡插值器的播放效果

四、矢量动画

介绍了矢量动画的基础知识与实现过程，首先描述了矢量图形的XML文件格式，然后详细解释了可缩放矢量图形SVG标记的标准定义，接着阐述了如何利用属性动画的手段来实现矢量动画，最后演示了如何通过矢量技术仿照支付宝的支付成功动画。

1. 矢量图形

矢量是一种既有大小又有方向的几何对象，它通常被标示为一个带箭头的线段。若干个矢量拼接在一起，便形成了矢量图形。

矢量图不同于一般的图形，它是由一系列几何曲线构成的图像，这些曲线又以数学上定义的坐标点连接而成。

Android从5.0开始引入矢量图形VectorDrawable，现已兼容到4.*系统。需修改模块的build.gradle，在文件内部的 defaultConfig节点之下添加下面一行配置，表示开启矢量图形的支持库：

vectorDrawables.useSupportLibrary = true // 矢量图形的XML定义文件需要

矢量图形的结构定义

安卓的矢量图形由XML文件定义，xml文件结构可分为三个层次：

1). 根标签vector

vector标签表示当前定义的是一个完整的矢量图形。

2). 组标签group

group标签定义了一组路径的共同行为（如一起旋转、一起缩放、一起平移等等）。

3). 路径标签path

path标签定义了一个路径的几何描述，既可以表示一根曲线，也可以表示一块平面区域。

2. 可缩放矢量图形SVG标记

path标签的android:pathData属性，取值需符合SVG标准。SVG全称为“Scalable Vector Graphics”，意即可缩放的矢量图形，它是一种图形格式，专门用于描述矢量图形的定义。

下面是个pathData取值的例子：

android:pathData="

M 30,50

L 75 35“

上述例子的意思是：先把画笔移动到坐标点(30,50)的位置，字母M代表move；再从当前位置画一根线段到坐标点(75,35)，字母L代表line。

详细的SVG标记定义说明

SVG标记的几个要点

（1）每个命令都有大小写形式，大写表示后面的参数是绝对坐标，小写表示相对坐标。

（2）参数之间用空格或逗号隔开，两种分隔符的效果是一样的。

（3）画椭圆圆弧的时候，用到的参数说明如下：

radius-x和radius-y：表示椭圆的横轴半径和纵轴半径。

x-axis-rotation：表示圆弧的旋转角度。

large-arc-flag：表示大弧标志，为0时表示取小弧度，1时取大弧度。

sweep-flag：表示轨迹标志，为0表示逆时针方向，为1表示顺时针方向。

x1和y1：表示圆弧经过某点，该点的横坐标为x1，纵坐标为y1。

large-arc-flag和sweep-flag的组合对比

心形矢量图的展示效果

3.利用属性动画实现矢量动画

矢量图形真正的意义在于矢量动画，通过动态计算几何路径的坐标，从而实现局部或整体的动画效果。

Android提供了AnimatedVectorDrawable这么一个矢量动画类，但开发者还得通过属性动画及其xml标签方可实现动画定义。下面是AnimatedVectorDrawable的常用方法：

registerAnimationCallback：注册动画监听器。

start：开始播放动画。

stop：停止播放。

reverse：倒过来播放。

矢量图形可用于播放动画的属性

矢量图形只有三类属性可用作动画：

1). 变换类属性

该类属性包括vector标签的android:alpha，以及group标签的android:rotation、android:scaleX、 android:scaleY、android:translateX、android:translateY。

2). 路径类属性

指path标签的android:pathData，通过设置几何路径的起始状态与终止状态，可实现两个形状之间的渐变。

3). 修剪类属性

该类属性包括path标签的android:trimPathStart和android:trimPathEnd，可实现矢量图形逐步展开或者逐步消失的动画效果。

路径变换的矢量动画播放效果

4.仿支付宝的支付成功动画

修剪类属性也可用来展示矢量动画，即一开始显示较少的路径，接着逐步显示越来越多的路径，直至最后显示所有的路径。

常见的支付宝支付成功动画，便是通过修剪类属性来实现的。完整的支付成功动画包含两个形状，首先在外面画个圆圈，然后在圆圈里面画个打勾符号。

因为圆圈和打勾两个图案并不相连，如果按照普通的处理方式，就会一边画圆圈一边画打勾。所以要想让圆圈动画和打勾动画按顺序播放，得分别定义圆圈的矢量图形和打勾的矢量图形，然后等圆圈动画播放完毕，再开始播放打勾动画。

支付成功动画的实现步骤

（1）分别定义外侧圆圈图案的矢量图形文件，以及添加打勾图案的完整矢量图形文件（含圆圈图形）。

（2）接着定义支付成功的属性动画文件，其中指定通过修剪类属性trimPathEnd来渲染动画。

（3）最后定义两个矢量动画描述文件，其中一个用来播放圆圈动画，另一个用来播放圆圈动画后继的打勾动画。

支付成功动画的播放效果

五、动画的实现手段

介绍动画技术常见的3种实现手段，包括以帧动画为代表的延时重绘方式、以补间动画和属性动画为代表的设置状态参数方式以及为解决拖曳卡顿问题而采用的滚动器。

1.使用延时重绘

延时重绘是最基本的动画实现手段，代表技术为帧动画，每隔若干毫秒就用新图片换掉原图片，人眼看过去仿佛画面动起来了。除了帧动画，还有不少地方采用延时重绘技术，比如圆弧进度动画、Banner指示器等，它们都是连续调用onDraw或dispatchDraw方法实现动画效果。下面再以饼图动画演示一下延时重绘的技术实现。

饼图动画的播放效果

2.设置状态参数

设置状态参数是最常见的动画实现手段，代表技术为补间动画和属性动画，通过持续改变视图的状态属性数值让该视图动起来。属性动画要求有明确的初始状态值和结束状态值，如果这些起止状态值无法确定，中间还要加入其他运算，属性动画就无法胜任如此复杂的要求。

譬如一段朋友圈动态文字的展开动画，想看完整文字时点击展开动态，看完后再点击收缩动态。这里的展开与收缩动画其实是不停地变更视图高度。

展开动画的播放效果

3.滚动器Scroller

如何使用Scroller

下面是Scroller的常用方法说明。

startScroll：设置开始滑动的参数，包括起始的横纵坐标、横纵偏移量和滑动的持续时间。

computeScrollOffset：计算滑动偏移量。

getCurrX：获得当前的横坐标。

getCurrY：获得当前的纵坐标。

getDuration：获得滑动的持续时间。

forceFinished：强行停止滑动。

isFinished：判断滑动是否结束。

滚动器的滑动效果

Scroller只是一个运算模拟器，要想让视图真正动起来，还得调用视图的两个滑动方法处理滑动操作：

scrollTo：将视图滑动到指定坐标位置。

scrollBy：将视图滑动指定偏移量。

下面是使用滚动器的效果图。

android动画（十四）相关推荐

Android 动画（四）---逐帧动画
1创建逐帧动画资源---文件res/drawable/animated_rocket.xml <?xml version="1.0" encoding="utf-8 ...
Android 第十四课使用LitePal添加数据（更新数据）
我们注意到当你登录一个app,是不是需要先注册呢?,所谓注册,简单地来理解是不是就是把输入框中地数据传入数据库中呢? 这里我们设置简单一点,注册的信息只包括两项,一项是用户名,另一项是密码.我们干脆建 ...
[android]android自动化测试十四之dumpsys性能测试
dumpsys 用来给出手机中所有应用程序的信息,并且也会给出现在手机的状态. dumpsys [Option]meminfo 显示内存信息cpuinfo 显示CPU信息account 显示accou ...
Android第十四期 - 可扩展选项卡
代码已经整理好了,修复了下面区域不显示的BUG,如图:
Android第二十四期 - 游戏公告跑马灯效果
代码已经整理好,效果如下: 地址:http://down.51cto.com/data/1887395 本文转自吴雨声 51CTO博客,原文链接:http://blog.51cto.com/lian ...
Android 天气APP（十四）修复UI显示异常、优化业务代码逻辑、增加详情天气显示
上一篇:Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果).自定义背景图片.UI优化调整添加管理城市新版------------------- 一.添加管理城市页面二.沉浸式 ...
Xamarin.Android开发实践（十四）
原文:Xamarin.Android开发实践(十四) Xamarin.Android之ListView和Adapter 一.前言如今不管任何应用都能够看到列表的存在,而本章我们将学习如何使用Xama ...
精通Android自定义View(十四)绘制水平向右加载的进度条
1引言 1 精通Android自定义View(一)View的绘制流程简述 2 精通Android自定义View(二)View绘制三部曲 3 精通Android自定义View(三)View绘制三部曲综合 ...
Android中SlidingDrawer介绍【安卓进化三十四】
Android中SlidingDrawer介绍[安卓进化三十四] 安卓中1.5后加入了SlidingDrawer[隐藏式抽屉],设计原理在你的UI布局有限的情况下,放不下太多的控件的时候,可以考虑用这 ...
Android 天气APP（三十四）语音搜索
上一篇:Android 天气APP(三十三)语音播报语音搜索前言正文一.权限配置二.用户体验优化三.配置语音识别听写四.语音搜索五.地图天气添加语音搜索功能六.城市搜索添加语音搜索功 ...

android动画（十四）

android动画（十四）相关推荐

最新文章

热门文章