Loading动画外篇·圆的不规则变形

首页 > 娱乐前沿 > 热点

Loading动画外篇·圆的不规则变形

佚名 2016-01-16 19:20:26

一款Loading动画的实现思路系列已经结束了，非常感谢大家的捧场。

看过本系列的同学可能还记得，我对原动效做了简化，为了让大家回忆一下，也让新来的同学有点印象，我先贴一下原动画效果图：

可以看到，圆被上方的竖线压扁的时候，发生了不规则的变形，具体来说，圆的顶部比底部变形明显。

这个很好理解，我们把球放到地上，拿手指去按它，手指按下的地方，肯定要比球和地面接触的地方变形更明显。

在Loading系列中我做了简化，圆只是简单的变成了椭圆，如下图：

虽然效果也不错，但还是有点遗憾，所以今天我们一起看一下，圆的不规则变形的一种实现方案，效果如图：

好，我们开始吧。

看上去，这个动画就是从一个形状变成了另一个形状。熟悉CAShapeLayer的同学，可能想到了它的path属性，没错，path属性是支持动画的，那我们用UIBezierPath分别画出动画初始、结束的形状，作为path动画的from、to值，应该就可以了吧。

思路看上去没有问题，我们来测试一下，示意代码如下：
（p.s. 从本篇开始，我在文章示例中使用swift代码，GitHub上会上传Swift、OC两个版本）

@IBActionfuncstartAnimation(sender:AnyObject){
//reset
animationLayer.removeAllAnimations()
//初始
letfromPath=...//圆
//结束
lettoPath=...//圆变形后的形状
//endstatus
animationLayer.path=toPath.CGPath
//animation
letanimation=CABasicAnimation(keyPath:"path")
animation.duration=3
animation.fromValue=fromPath.CGPath
animation.toValue=toPath.CGPath
animationLayer.addAnimation(animation,forKey:nil)
}

测试之前我们最好有个用例，或者有个非正式的预期。

比如我对这段代码的预期是这样的：

测试一下，结果是这样的：

很明显，测试结果和我们的预期不一样;
由此，我们得出一个不严谨的结论：path动画的效果是不可控的。

也许有的同学会说，换一种绘制方式，动画效果可能就达到要求了，这是可能的，大家可以试一试，但本篇中，我就不去猜怎么绘制才能达到要求了，我尝试找一个可控的方案。所谓可控，就是动画的每一步，形状的样子我们都知道。

如果我们能建立起形状和动画进度（用progress代替，取值0.0~1.0）的关系，那么progress变化时，我们重绘形状，应该就可以了。

思考一下，形状和progress建立关系的难点在哪？

初始我们绘制了一个圆，结束时我们绘制了一个不规则的形状，它们的绘制逻辑是不一样的，从代码层面讲，它们各自有一套绘制代码。两套绘制代码，听着不太符合直觉。

比较符合直觉的是，我们只有一套绘制代码，progress是这套代码的参数，progress为0时，绘制的是圆，progress为1时，绘制的是不规则图形。

一套代码可以做到吗？
可以的，前提是我们要将形状进行分解，看上去不一样的东西，经过分解后，很可能发现共同点。

请看下面的两张图：

可以看出，两图中的形状都可以认为是由两条平滑曲线（贝塞尔曲线）构成的。
（本篇不深入贝塞尔曲线，大家只要知道贝塞尔曲线由起点、终点和N个控制点决定就好）

假设蓝线和红线都以顶部为起点，以底部为终点，动画过程，其实就是两条曲线的起点下移，终点不动，控制点适当变化的过程。结合前面所说的，我们可以得到初步的方案：一套绘制代码：绘制两条贝塞尔曲线。

动画：贝塞尔曲线的起点、终点、控制点随progress值变化

大思路有了，但是贝塞尔曲线的起点、终点、控制点是如何随progress值变化，才能实现不规则变形呢？

对我而言，这个问题还是太复杂了。觉得复杂，接着分解。

规则的东西实现起来，总会简单一些，我们先想一想，如何实现规则变形，打破规则，也不难，我们在规则变形的基础上，破坏一些规则变形的条件，应该就能实现不规则变形。

在进行下一步的思考之前，我们要先处理一个问题，上述思路，分析是合理的，但存在一个技术问题：两条贝塞尔曲线，是没法完美模拟一个圆的（没有深入调研，有兴趣的同学请搜索“贝塞尔曲线拟合圆”）。

目前的结论是，四条贝塞尔曲线可以比较完美的模拟一个圆。

所以我们的方案调整一下，如下图：

为了让大家看的更清晰，我给形状加上辅助点和辅助线（p.s. 辅助点和辅助线的思路来自Kitten的A-GUIDE-TO-iOS-ANIMATION），如下图：

每条曲线的起点、终点和两个控制点，应该比较清晰了。

在处理变形之前，我们先看下，四条贝塞尔曲线怎么模拟出一个圆，如图：

贝塞尔曲线拟合圆

有兴趣的同学可以去找下相关的数学知识，可以搜“贝塞尔曲线拟合圆”。
此处我们直接引用别人的结论，如图所示，第一个控制点和起点在连线与圆相切方向上，距离为半径r的1/1.8，第二个控制点和终点也是类似的。

代码中定义的下述常量，大家就知道是什么意思了：

letcontrolPointFactor:CGFloat=1.8

圆模拟出来了，现在我们来看一下如何规则变形，

简化一下，先考虑竖直方向的变形，我们以圆的底部为原点(0, 0)，竖直变形，可以认为是各曲线的起点、终点和有需要的控制点的y坐标均乘于一个系数，本例中取0.8（竖直方向压扁），那么变形如下图：

只竖直方向变形

水平方向也类似，假设x方向系数为1.2（水平方向拉长），那么变形如下图：

只水平方向变形

两者结合起来就得到了圆的规则变形，如图（本篇中的规则变形可以认为是对称变形，圆未必变成了数学意义上的椭圆）：

规则变化实现了，接下来就该破坏规则变形的条件了。

大家跑的一样快，队形很整齐，想破坏队形，只要让一个人跑的比大家快或慢就行了。我们的动效中是顶部变形更明显，所以，我们让顶点y方向乘的系数小于0.8就可以了，也就说，顶点相对于其他点，y值变化的幅度更大，比0.8时的位置更接近原点（底点），如图：

至此，我们的效果就实现了。发散一下，顶点跑的慢：

左点不向左跑，反而向右跑：

不多举例了，大家可以看到，这种方案还是比较灵活的。

复杂的形状可以由更多的贝塞尔曲线组成，只要我们找到贝塞尔曲线的起点、终点、控制点和progress的关系，就可以实现复杂可控的形状动画。

具体代码实现，和本系列主线第一篇是类似的，采用的重绘方案，示意代码如下：

//创建CALayer子类
classCircleIrregularTransformLayer:CALayer
//progress变化时，告知layer重绘自己
overridestaticfuncneedsDisplayForKey(key:String)->Bool{
switchkey{
case"progress":
returntrue
default:
break
}
returnsuper.needsDisplayForKey(key)
}
//绘制代码
overridefuncdrawInContext(ctx:CGContext){
letpath=UIBezierPath()
//以底点为原点
letbottom=...
//控制点偏移距离
letcontrolOffsetDistance=radius/1.8
//各点变化系数
letxFactor=...//根据progress计算
letyFactor=...//根据progress计算
//顶点特殊的变化系数（破坏规则变形）
lettopYFactor=...//根据progress计算
//右上弧
path.addCurveToPoint(dest0,controlPoint1:control0A,controlPoint2:control0B)
//左上弧
path.addCurveToPoint(dest1,controlPoint1:control1A,controlPoint2:control1B)
//左下弧
path.addCurveToPoint(dest2,controlPoint1:control2A,controlPoint2:control2B)
//右下弧
path.addCurveToPoint(dest3,controlPoint1:control3A,controlPoint2:control3B)
CGContextAddPath(ctx,path.CGPath)
CGContextSetLineWidth(ctx,lineWidth)
CGContextSetStrokeColorWithColor(ctx,UIColor.blueColor().CGColor)
CGContextStrokePath(ctx)
//辅助点
//辅助线
}

大家在看代码的时候，可能感觉各点的计算和文中提到的不完全一致，文中侧重思路，是以底点为坐标系原点(0, 0)、常规坐标系（x轴向右为正方向，y轴向上为正方向）来描述的，而代码中实现时，会使用UIKit的坐标系，底点在superView的坐标系中也不会是(0, 0)，因此，请放心看代码，思路是一样的，不一样的只是实现上的细节。

本篇作为一款Loading动画系列的补充，到这就这结束了，非常感谢大家的捧场！

大家，下个系列见。

完整代码

请参考GitHub上OneLoadingAnimation工程中Swift、OC目录下的CircleIrregularTransform。

本系列的传送门