Apple 如何（或如何）制作这个动画？答案

【问题标题】：How does (or how would) Apple do this animation?Apple 如何（或如何）制作这个动画？
【发布时间】：2012-01-03 15:23:52
【问题描述】：

我想要做什么：

“分组样式”UITableView 的底部（和顶部）单元格具有圆角 - 这是许多 Apple iOS 和非 Apple 应用程序中的默认设置。有时单元格是通过动画插入的，即：

[tableView insertRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationTop];

现在这工作正常。 例外：当单元格插入底部单元格下方或顶部单元格上方（对于分组样式表）时 - 似乎没有流畅的动画。

问题：

我的意思是顶部/底部单元格的角需要从圆形动画到不圆形（因为它们不再是顶部/底部） - 这发生在非常生涩且与 Apple 风格不同。

Apple 是否曾在 App 中做到这一点？如果有，他们是如何顺利做到这一点的？不然怎么可能做对呢？

注意 - 我知道这是一个很小的细节，但我有点完美主义......！

【问题讨论】：

我假设这可能是 SDK 中的一个错误。你能在手机上尝试一下并告诉我吗？
我认为在模拟器中结果很奇怪。同意莱戈拉斯。你能在 iPhone 或任何其他设备上试一试吗？
@Legolas 也通过电话确认。我不太确定你是否理解这个问题。一切都按预期运行 - “生涩”是指唯一可用的动画选项看起来生涩，因为它们会导致从圆角突然过渡到非圆角。
@NavSoft 我刚刚在“设置”应用中发现了同样的问题。转到 Safari 选项 > 高级 > 网站数据，然后删除顶部单元格。您可以看到顶角的动画效果并不流畅 - 微妙，但添加单元格而不是删除单元格时效果会稍微明显一些。
如果在 iOS 5 中使用新的 UITableViewRowAnimationAutomatic 选项会发生什么？

标签： iphone objective-c ios ipad uitableview

【解决方案1】：

看看 iOS 附带的天气应用程序，在您配置城市的另一侧视图中，您会看到一个包含这些动画的表格。正如 Mark Adams 所指出的，在 iOS5 中有一个枚举供操作系统自动检测应该使用哪个动画。如果您想针对 pre-iOS5，那么在您提交删除的委托方法上，您应该根据其行位置确定要删除的单元格，如果它是 0，您将使用 UITableViewRowAnimationBottom，如果它是您将使用的最后一行 @ 987654322@，如果它在中间的某个地方，您可能会使用UITableViewRowAnimationTop，以便该组随着动画向上移动，但您可能想要玩这个。

【讨论】：

感谢您的回答 :) 据我所知，Weather 应用程序实际上使用了一种奇怪的 tableView - 它实际上看起来像是一个普通样式的表格视图，而不是分组样式- 但是，角是圆角和剪裁的（可能这种剪裁应用于 tableView 本身而不是单元格）。此外，在删除时，总会有一个不会产生方角效果的有效动画 - 在插入顶行或底行时情况并非如此，我遇到了麻烦。

【解决方案2】：

抱歉，我没有时间写出实际的代码并对其进行测试，但也许我可以为您提供指导。您基本上要求仅在单元格的两个角上设置角半径，然后在它们向表格中心移动时将它们流畅地设置为尖角。

一种方法可能是使用 CAShapeLayer 作为背景定义您的自定义 UITableViewCell。 CAShapeLayer 是从 Quartz 路径绘制的：参见 http://developer.apple.com/library/IOS/#documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_paths/dq_paths.html#//apple_ref/doc/uid/TP30001066-CH211 。 CAShapeLayer 的路径是可动画的，但不能使用隐式动画。您需要使用 CAPropertyAnimation 或执行您自己的插值。以我的经验，例如在http://itunes.apple.com/us/app/blaster-through-asteroid-field/id414827482?mt=8 中，进行自己的插值更快、更可靠（但除了插值和碰撞检测之外，大部分游戏都依赖于quartzcore，所以我认为你不会有表现问题）。

总结：自定义单元格有 CAShapeLayer 支持。 CAShapeLayer 的路径带有 2 个圆角。当单元格的位置向屏幕上的某个点移动时，您可以为路径属性设置动画。完成，平滑动画圆角到方角。如果您尝试一下，请告诉我:-)

其他参考： http://developer.apple.com/library/IOS/#documentation/GraphicsImaging/Reference/CAShapeLayer_class/Reference/Reference.html#//apple_ref/doc/uid/TP40008314

http://developer.apple.com/library/IOS/#documentation/GraphicsImaging/Reference/CGPath/Reference/reference.html

【讨论】：

【解决方案3】：

由于目前没有真正的（代码完整）答案，这里列出了最好的解决方法。

改变你的界面，让这个生涩的动画永远不会发生。这可能意味着使用普通样式的 tableView 而不是分组样式，或使用在天气应用程序中看到的替代样式（请参阅克里斯瓦格纳的回答。谢谢克里斯！）。这甚至可能意味着使用完全不同的界面，不包含这个动画 - 这是我寻求的解决方案，我设法解决了可能比原版更好的用户体验改动。
处理它。苹果似乎在一些较少使用的部分操作系统或其应用。
在 bugreport.apple.com 上提交错误报告。如果苹果就好了修复了这个...我知道这是一个很小的细节，但这就是为什么我就像 Apple 产品一样——因为他们把小细节做得对！
创建一个自定义 UITableViewCell 子类。我考虑了一下这个，虽然它有点编程挑战，但我认为这是可行的。方法如下：编辑：有关更多详细信息，请参阅 Rab 的答案。还没写出来，等我有空的时候试试看。
- 自定义单元格具有定义单元格是顶部、中间还是底部单元格的属性。这可以由 UITableViewController（或子类等）设置。
- 自定义单元格的 backgroundView 属性可以使用石英为圆角等进行自定义绘制。
- 只要定义单元格位置的属性发生更改，对 backgroundView 的更改就可以动画化。困难的部分这里是动画角落的曲线......这是可行的吗？苹果似乎是在通知中心的角落里做的，当它是
  拉下并推上去——看来这是可能的。
- 如果有人真的想这样做，并将代码放在 gitHub 上......你会很棒！你会更好苹果的用户界面；）

【讨论】：

你有机会获得赏金吗？您似乎通过此线程中的其他答案的帮助找到了问题。您可能想感谢某人为帮助您得出结论所提供的帮助。否则积分不会给任何人。
@ChrisWagner 是的 - 我刚刚做到了！我一直在等待，以防最后一刻还有答案。不幸的是，我无法分配赏金 - 虽然您的回答确实提供了一个很好的解决方案，但 Rab 的回答提供了一种无需更改所使用的 tableView 类型的方法。即使答案中没有实际代码，它仍然是这里最好的答案:)
是的，我同意。我认为每个人都为结论提供了很好的方向，只是想确保您了解赏金会浪费掉。

【解决方案4】：

您是否尝试过一次插入两行？顶部的高度为零，下一个带有圆角（您可以使用石英芯）

【讨论】：

【解决方案5】：

如果您查看照片应用程序“发送到 Youtube”部分的标签部分，您会发现苹果动画与我们其他动画一样“生涩”。（显然你需要一个视频上传到 youtube）

我猜你就是这么想的......

【讨论】：