Tag: Ui动画

在Swift中使用二次曲线进行动画处理

在 Github 上可以找到该项目的完整代码 如果浏览移动UX / UI设计网站时发现了任何东西，那么流畅的动画就是设计师展示其才能的最喜欢的方式。 在完成了一些需要从After Effects文件转换动画曲线（定时和坐标值）的项目后，我可以体会这种转换带来的难度和断开连接的程度。 在最近的iOSoho Meetup上，谷歌的Adrian Secord（iOS UI框架技术负责人）讲述了为解决将 曲线 转换为代码这一问题的解决方案。 从他的讲话中 看来我对困难的理解是正确的！ 尽管快速发展的设计标准已成为移动开发的标志，但似乎无法忍受流体动力学过时的那一天。 因此，我决定真正倾身并拥抱流畅的动画。 挥手？ 还是杰洛？ 也许至少是牛顿？ 这是今天在星巴克玩贝塞尔曲线约两个小时的最终结果。 是否像您在iOS中遇到的一些流畅的交互一样酥脆和干净？ 不，一点也没有。 但这无疑是一个很好的例子，说明了在iOS中添加动画曲线而无需吊舱很简单。 二次曲线 这很困难，但是当我刷二次曲线时，我能够阻止自己迷失在Wikipedia反馈循环中。 这是一个非常有趣的话题，有许多分支节点值得进一步探讨。 但就目前而言，足以知道向UIBezierPath添加二次曲线将使两个端点之间的线向第三点（称为控制点）弯曲。 一个有助于理解这些曲线的现实世界模拟方法包括在您的拇指和食指之间拉伸橡皮筋，然后用另一只手拉动拉伸的一侧。 您的食指和拇指充当线条的端点 ，而无用的手（拉动乐队）充当控制点 。 在您的脑海中，您仍然必须想象实际的曲线，但是当您将自由手（ 控制点 ）移动到拇指和食指（ 端点 ）之间的不同点时，应该能够更轻松地可视化该曲线的变化。 句法糖 为了使我的视觉神经平静，我在项目中添加了一些语法糖，以减少必须编写的CGRectGetXXX的数量。 我创建了RectFramer来包含每个CGPoint或CGFloat值的自动完成属性 我可能需要在给定的CGRect（UIView.bounds）上进行访问： 动画波峰 就iOS动画而言，wave的动画实现是相当标准的，因此我决定不做进一步介绍。 而是以下是负责动画的代码： 简洁的iOS动画代码 波浪“低谷” 将波动画完成到其周期的下一个部分，即波谷，与波峰几乎完全相同，而只是使用反转的控制点值。 有关此部分的更多详细信息，请查看该项目的Github。 结论 一旦我在纸上画出动画的不同阶段，就很容易将其转录为代码。 这就是在iOS中制作动画的秘密。 因为插值是“免费的”，所以您只需要知道动画需要命中的不同阶段。 如果您可以考虑然后绘制出这些不同的阶段，将它们链接在一起将变得更加容易管理。 >思想