原文地址：Drip Into A River · Part I

原文地址效果要更好些，由于简书不支持LaTeX，所以部分行内文字未使用数学符号，请谅解

Sweet iOS Animation Plan

给自己制定了一个很长远的动效学习计划，Sweet-iOS-Animation。其实就是促进喜欢写动效的同学，多多实现dribbble上的优秀作品。我也会定期更新原型图作品表单，收集优秀的原型图。如果大家对此学习计划也有兴趣，可以从这里查看内容。

以上是对于学习计划的简介，下面开始这次动效分析。

“水滴汇集”下载按钮概念图

在dribbble上发现一个创意很好的下载按钮的创意，首先要感谢原型图作者SamuraiChen分享原型图Animation on a concept draft downloads。我将这个特效起名为Drip Into a River【水滴汇集】。以下是原型图效果：

 

动画拆解

这个动画我们主要关注的是水滴汇集部分，和下载完成后按钮的震动波扩散两个部分。先来说说水滴汇集动画。

一、水滴汇集

• 内部的下载状态实心圆要逐渐增大；
• 外部水滴要以一个弧度飞入内部圆的圆心，并且接触时最好有粘黏效果；
• 外部水滴的起始位置大概分布在内部圆最大轮廓线环形半径的2倍左右；
• 外部水滴在飞行时，会有忽大忽小的效果。

二、震动波扩散

• 整体按钮先略微缩小，准备突然增大并抖动；
• 按钮变大，并带有弹簧效果，最终回复原大小；
• 抖动最猛烈时，向四周发散“振动波”效果。

我从中再次抽取主要的一些效果，进行实现。在制作的过程中，我遇到了很多问题，在本文最后部分进行讨论。

利用贝塞尔曲线绘制水滴路径

我绘制了一张静态描述图如下：

在图中，我们在最外围有一个有圆环，被称为水滴生成区。我们所有的水滴，为了保证在汇集飞行时候弯曲轨迹，所以OC的距离（即水滴生成区圆环半径），我们需要保证。在OC上，取中点A，并且选取长度为h的距离，确定B点，得到BA = h。这里的h距离需要我们去尝试，B点也就是轨迹曲线的Control Poiont。

在我们写代码的时候，我们会已知圆心O(x1, y1)，以及水滴圆心C(x2, y2)，以及一些距离OC = radius · k（这里的k，我定义为主半径的倍数系数，只用于描述外围半径和内部圆的一个半径关系）。我们设待求点坐标为B(x, y)，对以上问题进行建笛卡尔坐标系求解。

当然这之中，我们需要使用欧几里得距离法，将d求出。

在推导公式后，也许你会发觉一个问题：水滴飞行轨迹在确定起始点后，可能会有两种。是的，这种想法是正确的，因为这两种贝塞尔轨迹是关于OC对称的。在图中，我也给出了另外一种轨迹的Congrol Point位置。其实，我们发现，我们仅需要修改h的符号，就是另外一种轨迹的计算方法。

我在实例代码中，建立了一个DGDownloaderMath.m文件，这里就是存储在绘制贝塞尔曲线时，所用到的公式算法。下面代码片段是关于以上水滴飞行贝塞尔轨迹的实现方式：

为了生成不同轨迹效果的样式，我使用了方法arc4random()来生成一个二进制随机数。剩下计算方法，严格遵循以上推导公式。

之后，我们要在视图层为水滴制作layer样式、设计动画并提供触发动画的入口方法。

Github【Desgard_Duan】

Objc中国·动画解释