如何创建“添加到阅读列表”动画效果

Question

当您在阅读列表中添加元素时，我正在尝试制作类似于Safari（iPhone）上的动画效果。它与开始从App Store应用程序下载项目时出现的类似：应用程序项目将停止到Dock以开始下载。 首先它反弹然后去码头。这是Apple在他们的操作系统上使用的非常好的效果。

我在屏幕上有一个图像视图，我希望将这种动画放到我的应用程序的工具栏中。

如果有人这样做或知道效果的名称，请告诉我该怎么做。

谢谢。

Answer 1

“添加到阅读列表”显示我的手机上没有动画，但是您的描述听起来像是“在后台打开” - Safari（iPhone）中的动画。我的回答描述了这个动画。

---

几个月前我写了类似的东西，其中大部分是可行的，而有些则不是。你的问题告诉我，更多的人要知道它是如何完成的I wrote a blog post about it。我将在此描述高级方法和挑战，但您可以在该帖子中阅读更多相关信息。

---

获取内容以制作动画

如果您选择将屏幕上的视图设置为（在您的情况下）工具栏中的动画，那么您只需访问其图层。如果您希望原始视图保留并将可视副本（如“在背景中打开”-Safari动画）设置为条形项目，则应创建新图层并将图层内容绘制到图像中并将该图像设置为您要设置动画的图层的内容

计算结束位置

动画的起始位置只是视图的框架。 结束位置非常棘手，因为条形项（工具栏项和标签栏项）不是UIView子类，也没有公共视图属性。 如果您想稍后摇动条形项目，则会出现问题。

我决定使用一些简单的启发式方法对结束位置进行视觉逼近。如果您事先知道只有一个条形项目的动画，那么最终位置可以硬编码到合适的框架。

沿路径制作动画

从开始到结束位置移动，缩放和旋转图层没有什么特别之处。 如果你想了解更多关于我是如何做到的，你可以查看我写的帖子。

摇动条形项

如果没有大量自定义代码或目前使用私有API，则无法完成此操作。由于条形项目没有视图或图层，因此没有可用于动画的可访问图层。 我想你可以有一个自定义的动画图像来完成摇晃并在动画中设置它并在之后设置新图像。绘制成图像的方法和动画效果不佳因为没有可访问的图层可以将其内容绘制到图像中（您希望这对于工具栏项和标签栏项的特殊效果而言）。

...将所有这些放在一起并根据您的特殊需要进行调整，您将拥有一个类似于您正在寻找的动画的动画。