苹果是如何实现这个动画效果的？

Question

我想要做什么:

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

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

现在这个有用。 但是：当在底部单元格下方或分组样式表中的顶部单元格上方插入单元格时，似乎没有平滑动画。

问题：

我的意思是顶部/底部单元格的角需要从圆形动画到非圆形（因为它们不再是顶部/底部），并且这种情况发生时非常卡顿，不像苹果风格。

苹果是否在应用程序中使用过此功能？如果是，请问他们如何平滑处理？否则，如何正确完成此操作？

NB-我知道这是一个相当小的细节，但我有点完美主义...

- Jordan Smith

---

我认为这可能是SDK中的一个错误。你能在手机上尝试一下并让我知道吗？ - Legolas

我认为在模拟器中的结果很奇怪。同意Legolas的看法。你能否在iPhone或其他设备上尝试一下？ - user1025601

@Legolas 在手机上也确认了。我不太确定你是否理解这个问题。一切都表现得很正常 - 我所说的“卡顿”是指唯一可用的动画选项看起来很卡，因为它们导致从圆角到非圆角的突然转换。 - Jordan Smith

我发现了“设置”应用程序中相同的问题。前往Safari选项>高级>网站数据，然后删除顶部单元格。您会发现顶部角落没有平滑地动画 - 微妙，但是在添加单元格而不是删除时效果略微更明显。 - Jordan Smith

如果在iOS 5中使用新的UITableViewRowAnimationAutomatic选项会发生什么？ - Mark Adams

Answer 1

看一下带有iOS的天气应用程序，在您配置城市的翻转侧面视图中，您将看到一个表格，该表格容纳这些动画。正如马克·亚当斯（Mark Adams）所指出的，在iOS5中，操作系统有一个枚举类型可以自动检测应使用哪个动画。如果要针对早期版本的iOS5，则在提交删除的委托方法上，您应该根据其行位置确定正在删除哪个单元格，如果它是0，则应该使用UITableViewRowAnimationBottom，如果是最后一行，则应该使用UITableViewRowAnimationTop，如果在中间某个地方，则可能会使用UITableViewRowAnimationTop，以便群组随着动画向上移动，但这可能需要进行一些尝试。

- Chris Wagner

---

谢谢你的回答 :) 就我所知，天气应用实际上使用了一种奇怪的tableView - 它看起来实际上是一个普通样式的表视图，而不是分组样式 - 然而，角落是圆形和剪裁的（可能这个剪裁是应用于tableView本身而不是单元格）。此外，在删除时，总是有一个有效的动画，不会导致方形角效果 - 这在插入顶部或底部行时不成立，这是我遇到问题的地方。 - Jordan Smith

Answer 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

- Rab

Answer 3

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

1. 更改您的界面，以便不会出现这种卡顿的动画。这可能意味着使用普通样式的tableView而不是分组样式，或者使用天气应用程序中看到的备选样式（请参见Chris Wagner的答案。谢谢Chris！）。甚至可能意味着使用完全不包含此动画的不同界面 - 这是我采取的解决方案，我设法想出了一种用户体验改变，可能比原来的还要好。

2. 处理它。在操作系统或其应用程序的某些不常用部分中，苹果似乎也这样做。

3. 在bugreport.apple.com上提交错误报告。如果苹果修复了这个问题，那就太好了...我知道这是一个非常小的细节，但这就是我喜欢苹果产品的原因 - 因为他们把小细节做对了！

4. 创建自定义UITableViewCell子类。我已经考虑过这个问题，虽然这是一个编程挑战，但我认为这是可行的。以下是如何实现：编辑：请参见Rab的答案以获取更多详细信息。尚未编写代码，但可能会在有时间时尝试一下。

   • 自定义单元格具有定义单元格是顶部、中间还是底部单元格的属性。这可以由UITableViewController（或其子类等）设置。

   • 自定义单元格的backgroundView属性可以使用石英进行自定义绘制，以实现圆角等效果。

   • 每当更改定义单元格位置的属性时，可以动画显示backgroundView的更改。难点在于动画曲线的圆角...这可行吗？苹果似乎在通知中心的角落里做到了这一点，当它被拉下并推上时 - 所以看起来是可能的。

   • 如果有人真的想这样做，并将代码放在gitHub上...那就太棒了！您将改善苹果的用户界面；）

- Jordan Smith

---

你会不会考虑颁发悬赏奖励呢？看起来你是通过这个帖子中其他答案的帮助找到了问题所在。你可能想要感谢某些人提供的帮助，以帮助你得出结论。否则这些积分将无人获得。 - Chris Wagner

@ChrisWagner 是的 - 我刚刚做了！我在等待是否有更多的最后一刻答案。不幸的是，我无法分割奖励 - 虽然您的答案提供了一个好的解决方案，但Rab的答案提供了一种无需更改所使用的tableView类型的方法。即使答案中没有实际代码，它仍然是这里最好的答案 :) - Jordan Smith

是的，我同意。我认为每个人都提供了很好的方向来得出结论，只是想确保你明白赏金否则会浪费。 - Chris Wagner

Answer 4

你尝试过一次插入两行吗？顶部的一个高度为零，下一个有圆角（你可以使用 Quartz Core 实现）。

- Alex R. R.

Answer 5

如果您查看照片应用程序中“发送到YouTube”部分的标签部分，您将看到苹果的动画与我们其他人一样“卡顿”。（显然，您需要上传到YouTube的视频）

我会假设那就是你所想的...

- Tony Million