使用SnapKit可视化斐波纳契序列

处理约束是用户界面编程中最普通，最挑剔和不可避免的方面之一。 作为新开发人员，我绝对需要以编程方式设置和处理约束的经验。 用代码全部写出来提高了我的效率，提高了我对如何最合理地安排视图和子视图的理解。

话虽这么说，但是如果您仅依靠UIKit功能来进行约束，那么就会有局限性，并且不乏烦恼。 我的一位讲师向我介绍了一种非常用户友好的CocoaPod，名为SnapKit，它可以简化并简化过程。 SnapKit通过消除对约束规则和视图本身进行单独操作的需求，使您可以更动态地设置和更新约束。 它在语法上也更加简洁。 由于这些原因及其他原因，SnapKit有助于避免常见错误，例如在应用程序生命周期中的任何给定时刻将过多或过少的约束应用于视图。

我决定制作斐波那契序列的可视化动画作为起点，以测试SnapKit的实用性和便利性。 资深的数学书呆子会同意：斐波那契数列非常有趣，因为它在整个自然和人类文化中表现出许多模式。 一个示例是金色矩形，其侧面的比率为〜1.618。 在铌酸钴的磁共振中，从量子水平到帕台农神庙设计的巨大规模，这一比例是显而易见的。

这是我想生成的图像：

首先，我编写了一些函数来生成斐波那契数，并创建具有相应尺寸的方形UIView。 我为每个正方形应用了随机的背景色，并将初始alpha值设置为零，以便以后实现淡入动画。

我希望约束正方形将是棘手的部分。 我首先编写伪代码来定义它们的排列算法：

1. 将第一个正方形固定在超级视图的中心。
2. 将第二个正方形的顶部和左侧边缘分别与第一个正方形的顶部和右侧边缘对齐。
3. 将第三个正方形的右边缘和上边缘分别与第二个正方形的右边缘和下边缘对齐。
4. 将第四个正方形的底部和右侧边缘分别与第三个正方形的底部和左侧边缘对齐。
5. 将第五个正方形的左边缘和下边缘分别与第四个正方形的左边缘和上边缘对齐。
6. 对系列中的其余正方形重复前四个步骤。

使用SnapKit，将这些步骤转换为Swift实际上非常容易。 您可以使用switch语句实现重复，该语句为索引模4的每个可能值指定一组不同的约束：

现在，该让它看起来很酷了！ 我使用了关键帧动画来使正方形逐渐淡入。 使用.CalculationMode Paced会使每个正方形的渐变以渐进的方式发生，而不是从透明变为不透明。

这是最终产品：

我想添加一个滚动视图，以便您可以查看任意数量的斐波那契正方形的迭代模式的完整范围。 这将增进我对SnapKit的理解，特别是因为滚动视图是在约束方面要实现的更具挑战性的UIView类型之一。