Android群英传知识点回顾——第七章：Android动画机制与使用技巧

时间：2018-09-07 14:18:21 阅读：229 评论：0 收藏：0 [点我收藏+]

标签：set mat viewport 图像事件 width 动画特效 google 描述

7.1 Android View动画框架

7.1.1 透明度动画

7.1.2 旋转动画

7.1.3 位移动画

7.1.4 缩放动画

7.1.5 动画集合

7.2 Android属性动画分析

7.2.1 ObjectAnimator

7.2.2 PropertyValuesHolder

7.2.3 ValueAnimator

7.2.4 动画事件的监听

7.2.5 AnimatorSet

7.2.6 在XML中使用属性动画

7.2.7 View的animate方法

7.3 Android布局动画

7.4 Interpolators

7.5 自定义动画

7.6 Android5.X SVG矢量动画机制

7.6.1 <path>标签

7.6.2 SVG常用指令

7.6.3 SVG编辑器

7.6.4 Android中使用SVG

7.6.5 SVG动画实例

7.7 Android动画特效

7.7.1 灵动菜单

7.7.2 计时器动画

7.7.3 下拉展开动画

这篇知识点不多，也容易理解，只是经典代码回顾案例比较多，所以整章篇幅偏长，不过经典代码回顾的案例很nice，建议大家多多实践经典代码回顾

Android 动画分为：

View动画：又称视图动画、又称补间动画、又称Tween动画（常用）

属性动画：通过改变属性值产生动画

View动画中定义了透明度、旋转、缩放和位移动画，其实现原理是：

每次绘制视图时View所在的ViewGroup中的drawChild函数获取该View的Animation的Transformation值，然后调用canvas.concat(transformToApply.getMatrix())，通过矩阵运算完成动画帧

其参数分别为旋转起始角度和旋转中心点的坐标，下面以自身中心点设置旋转动画：

与旋转动画一样，缩放动画也可以设置缩放的中心点，这里以自身中心设置缩放动画：

通过AnimationSet，将动画组合起来：

系统还提供了View动画的监听回调：

通过监听回调，可以获得到动画的开始、结束和重复事件

在Animator框架中使用最多的就是AnimatorSet和ObjectAnimator配合，使用ObjectAnimator进行更精细化的控制，只控制一个对象的一个属性，而使用多个ObjectAnimator组合到AnimatorSet形成一个动画

属性动画通过调用属性的get、set方法来真实地控制了一个View的属性值

创建一个ObjectAnimator只需通过他的静态工厂直接返回一个ObjectAnimator对象

参数包括一个对象和对象的属性名字，这个属性必须有get和set函数，内部会通过Java反射机制来调用set函数修改对象属性值

调用setInterpolator来设置相应的插值器

旧版本的动画所产生的动画，并不能改变事件响应的位置，知识单纯地改变了显示

参数介绍：

第一个参数：被操作的View

第二个参数：要操作的属性

第三个参数：可变数组，需要传递去该属性变化的一个取值过程

在使用ObjectAnimator特别重要的是操纵的属性必须具有get、set方法，不然ObjectAnimator就无法起效，下面介绍一些常用可以直接使用的属性：

translationX和translationY：作为一种增量来控制着View对象从它布局容器的左上角坐标偏移的位置

rotation、rotationX和rotationY：控制View对象围绕支点进行2D和3D旋转

scaleX和scaleY：控制View对象围绕它的支点进行2D缩放

pivotX和pivotY：控制View对象的支点位置，围绕这个支点进行旋转和缩放变换处理，默认情况下，该支点的位置就是View对象的中心点

x和y：它描述了View对象在它的容器中的最终位置，它是最初的左上角坐标和 translationX和 translationY值的累计和

alpha：它表示View对象的alpha透明度，默认值是1(不透明)，0代表完全透明(不可见)

如果属性中没有get、set方法，可以通过下面方法来实现：

通过自定义一个属性或者包装类，间接地给这个属性添加get、set方法

通过ValueAnimator实现

这里以自定义一个属性增加get、set方法为例：

通过代码使用：

类似View动画中的AnimationSet，可以实现多个属性动画的组合：

ObjectAnimator继承自ValueAnimator

ValueAnimator本身不提供任何动画效果，它更像一个数值发生器，用来产生具有一定规律的数字，从而让调用者来控制动画的实现过程，通过AnimatorUpdateListener监听数值的变换：

系统还提供了属性动画的监听回调：

当然，系统还提供了一个可选择性的监听事件，选择需要的事件监听：

AnimatorSet功能和PropertyValuesHolder和AnimationSet是一样的效果，只不过针对不同的动画

AnimatorSet不仅仅通过playTogether()，还有其他方法控制多个效果的协同工作：playSequentially()、animSet.play().with()、before()、after()

属性动画同视图动画一样，也可以在XML文件中编写：

在程序中使用也很简单：

Google给View增加了animate方法来直接驱动属性动画：

所谓布局动画指的是作用在ViewGroup上，给ViewGroup增加View时添加一个动画过度效果

最简单的布局动画在ViewGroup的XML中，系统默认的也是无法替换的：

还可以通过LayoutAnimationController类实现自定义子View的过渡效果：

LayoutAnimationController 第一个参数是需要的动画，第二个参数是每个子View显示的delay时间，若时间不为0，还可以setOrder设置子View的显示顺序：

LayoutAnimationController.ORDER_NORMAL：顺序

LayoutAnimationController.ORDER_RANDOM：随机

LayoutAnimationController.ORDER_REVEESE：反序

插值器是一个可以控制动画变换速率的一个属性值，有点类似于物理的中的加速度，常见的插值器有：

LinearInterpolator：线性插值器，匀速运动

AccelerateDecelerateInterpolator：加速减速插值器，动画两头慢中间快

DecelerateInterpolator：减速插值器，动画越来越慢

BounceInterpolator：弹跳插值器，动画结束时有个弹跳效果

需要实现它的applyTransformation的逻辑

需要覆盖父类的initalize方法实现一些初始化工作

第一个参数是插值器的时间因子，由动画当前完成的百分比和当前时间所对应的插值所计算得来的，取值范围为0到1.0

第二个参数是矩阵封装类，一般使用该类获取矩阵对象

通过对matrix的变换操作就可以实现动画效果，我们以模拟电视机关闭的效果为例：

android.graphics.Camera中的Camera类，它封装了openGL的3D动画，从而可以风场方便地创建3D动画效果，只要移动Camera就能拍摄到具有立体感的图像：

点击后开始动画，这样一个Button会在设置的时长内，使用相应的插值器来完成动画：

技术分享图片

什么是SVG：

可伸缩矢量图形（Scalable Vector Graphics）

定义用于网络的基于矢量的图形

使用XML格式定义图形

图片在放大或改变尺寸的情况下其图形质量不会有所损失

万维网联盟的标准

与诸多DOM和XSL之类的W3C标准是一个整体

Android5.X之后添加了对SVG的<path>标签的支持，其优点是：

放大不会失真

bitmap需要为不同分辨率设计多套图标，而矢量图则不需要

使用<path>标签有以下指令：

M=moveto(M X,Y)：将画笔移动到指定的坐标位置，但未发生绘制

L=lineto(L X,Y)：画直线到指定的坐标位置

H=horizontal lineto( H X)：画水平线到指定的X坐标位置

V=vertical lineto(V Y )：画垂直线到指定的Y坐标

C=curveto(C ,X1,Y1,X2,Y2,ENDX,ENDY)：三次贝塞尔曲线

S=smooth curveto(S X2,Y2,ENDX,ENDY)：三次贝塞尔曲线

Q=quadratic Belzier curve(Q X Y,ENDX,ENDY)：二次贝塞尔曲线

T=smooth quadratic Belzier curvrto(T,ENDX,ENDY)：映射前面路径的终点

A=elliptical Are(A RX,RY,XROTATION,FLAG1FLAG2,X,Y)：弧线

Z=closepath()：关闭路径

使用上面指令时，需要注意以下几点：

坐标轴以（0，0）位中心，X轴水平向右，Y轴水平向下

所有指令大小写均可，大写绝对定位，参照全局坐标系，小写相对定位，参照父容器坐标系

指令和数据间的空格可以无视

同一指令出现多次可以只用一个

L
绘制直线的指令是“L”，代表从当前点绘制直线到给定点，“L”之后的参数是一个点坐标，同时，还可以使用“H”和“V”指令来绘制水平、竖直线，后面的参数是x坐标或y坐标

M
M指令类似Android绘图中的path类moveto方法，即代表画笔移动到某一点，但并不发生绘图动作

A
A指令是用来绘制一条弧线，且允许弧线不闭合，可以把A指令绘制的弧度想象成椭圆的某一段，A指令一下有七个参数

RX,RY：所在的椭圆的半轴大小

XROTATION：椭圆的X轴与水平方向顺时针方向的夹角，可以想象成一个水平的椭圆饶中心点顺时针旋转XROTATION 的角度

FLAG1：只有两个值，1表示大角度弧度，0为小角度弧度

FLAG2：只有两个值，确定从起点到终点的方向1顺时针，0逆时针

X，Y轴：终点坐标

在线可视化SVG编辑器官网：http://editor.method.ac/

优秀的离线SVG编辑器：Inkscape

Android5.X提供了两个API来支持SVG：

VectorDrawable：在XML中可以创建一个静态的SVG图形

AnimatedVectorDrawable：给VectorDrawable提供动画效果

VectorDrawable的使用是通过<vector>标签来声明的：

如果做过Web的应该对viewport应该很熟悉

height：表示SVG的高度200dp

width：表示SVG的宽度200dp

viewportHeight：表示SVG图形被划分成100份

viewportWidth：表示SVG图形被划分成100份

如果在绘图中使用坐标（50,50），则意味着该坐标为正中间

接下来，给<vector>标签增加显示path：

然后就可以在布局文件中直接使用：

效果图：这是一个填充的图形，因为我们用的是fillColor

技术分享图片

如果要绘制一个非填充的图形，使用下面的代码：

效果图：

技术分享图片

AnimatedVectorDrawable使用：Google工程师将其比喻为一个胶水，通过其连接静态的VectorDrawable和动态的objectAnimator

首先在XML文件中通过<animated-vector>标签来声明对AnimatedVectorDrawable的使用：

特别注意的是：这个target里面的name要和VectorDrawable的name对应，animation要和动画资源文件对应

对应的VectorDrawable文件：

对应的animation文件：

特别注意的是：在<group>标签和<path>标签中添加了rotate、fillColor、pathData等属性，那么可以通过objectAnimator指定android:propertyName=”XXXX”属性来控制哪一种属性，如果指定属性为pathData，那么需要添加一个属性——android:valueType=”pathType”来告诉系统进行pathData的变换

在布局文件中使用：