iOS开发之——从零开始完成页面切换形变动画

前言

某天我接到了UI发给我的两张图：

需求图.png

看到图的时候我一脸懵逼，显然我需要做一个页面切换的指示动画。老实说，从大三暑假开始做iOS开发也一年有余了，但是遇到复杂动画总是唯恐避之不及，只做过一些简单的位移动画。大脑中的舒适区总是让我下意识避开麻烦的问题选择简单的解决方式。UI很善解人意得告诉我，你可以先用图片替代动画，以后有空慢慢完善。我突然不知哪里来的底气拍了拍胸脯：“没问题，包在我身上”。装出去的b泼出去的水，没办法，我只好下定决心趁此机会好好钻研一下形变动画。（就在写这篇文章的时候，UI看到了我最终的成果并点赞，顿时成就感爆棚）。

最终成果如图：

demo.gif

具体代码详见：https://github.com/lfny2580832/NYTubeAnimation

需求分析

打定主意要搞定这个动画，我首先在脑海中一遍遍模拟了整体效果。想象这是一个封闭光滑的管道，管道两端是两个可伸缩变形的白块，当点击下一步滑动到第二个页面时，管道左边的白块被一股向右的力推动，逐步压缩进管道中，最后从右边释放出来。这种感觉很抽象，只能隐隐约约想象出大概的效果。我在纸上一遍遍得模拟每一个细节，开始进行简化和分解。

简化

如果只看设计图，显然中间管道过窄，白块无法通过。于是我尝试着将中间管道变宽，并用keynote利用圆弧与矩形画出了简化图：

需求简化图.png

思路是不是立即清晰很多！实际上简化的过程我花了很长时间。一开始我并没有用圆形，而是用贝塞尔曲线来拟合图形，但是在拟合过程后中遇到了重重困难。比如要根据角度来确定某段弧线中贝塞尔点的控制点的长度（一小段曲线中至少需要计算五个点的坐标，计算非常复杂，且拟合效果不是很好），以及多个贝塞尔曲线UIBeizerPath闭合时各种错位等等问题。多次尝试无果后，我退而求其次，使用了UIBeizerPath 自带圆弧方法来构造整体图形以及动画。这段时间我花了整整两天。

简化图画出来之后，心中有了思路，即用UIBeizerPath拟合图形构造CAShapeLayer，然后使用CADisplayLink完成帧动画。对CAShapeLayer和CADisplayLink做动画不太熟悉的同学可以参考我之前的一个水波动画，github地址：https://github.com/lfny2580832/NYWaterWave