Android动画——常见动画实践

对于动画来说，其实就是时间与坐标动态变化的函数。在Android中通常使用ValueAnimator来控制时间，对于坐标可以通过某种函数控制在某一时间点的具体坐标，从而实现动画的绘制效果。如果每一个函数都要自己实现的话是不现实的，所以可以通过Android中给出的便捷的API。我们分析一个动画也是从时间和坐标这两者来考虑的。

动画的时间可能都会比较短，可以通过设置中的开发者选项来控制动画的时间。

设置动画速率.png

下面分析一下市面上一些常见的动画效果。

demo1.gif

• 分析
  可以看出，刚开始点击屏幕之后会在底部生成一个爱心，然后逐渐向上不规则的曲线运动，在顶端爱心的颜色和形状逐渐消失。将动画拆解成不同的部分，第一部分在生成爱心的时候是一个Scale动画从0到1不断变大，第二部分是用Bezier曲线实现轨迹移动动画，第三部分在移动到某一位置之后透明度的渐变从1到0消失。

demo2.gif

• 分析
  此动画也可分为三个部分：第一部分，圆球在做下落的轨迹动画，可以直接利用属性动画来实现；第二部分，在最低点出有变形的效果，通过绘制一个椭圆来实现；第三部分，下落过程中在小球的底部有阴影在变化，通过绘制一条线条实现，并且与小球的运动状态相对应。

demo3.gif

• 分析
  看起来是一个3D的旋转效果，实际上就是两个圆球在做左右的位移变换，在变换的过程中有大小的变化。

demo4.gif

• 分析
  第一个点做圆弧运动移动在最后，其他点想左平移。这个动画可以分为两个部分：第一部分，判断小点是第一个点，并做向上或者向下的圆弧运动，可以利用Bezier曲线来实现；第二部分，其余小点都向左线性平移。

demo5.gif

• 分析
  从一个小球变化成两个小球，并且中间有连接的效果。其中的连接效果可以通过Bezier曲线来实现拟合。

demo6.gif

• 分析
  动画主要是后面的三个点呈三角函数运动。

demo7.gif

• 分析
  简单的波纹动画效果，只是看起来有作用的容器。难点是如何把波纹限制在一个图片中。

demo8.gif

• 分析
  第一部分，绘制一个圆形；第二部分，将圆形编程环形；第三部分，突然绘制出一个五角星；第四部分，在五角星周围有很多小点；第五部分，对小点做一个渐隐动画。

demo9.gif

• 分析
  失败动画
  第一部分，绘制圆形动画，利用Bezier曲线可以实现；第二部分，绘制一个感叹号；第三部分，借助属性动画，让其抖动。
  成功动画
  第一部分，绘制圆形动画；第二部分，下落过程中圆形变成椭圆形；第三部分，绘制一个轨迹动画。

demo10.gif

• 分析
  第一部分，圆形的大小变化动画；第二部分，放大镜手柄变成点，然后进入到圆形里面的轨迹动画；第三部分，从点又变换成放大镜手柄。

总结

1. 分析一个动画，通常从时间和坐标两个维度展开；
2. 坐标的变化，可以通过Bezier曲线、数学函数式或者Android API来简单地、批量地控制；
3. 任何复杂的动画都是由一系列简单的动画拼接而成的。