如何创建“添加到阅读列表”动画效果
当您将元素添加到阅读列表时，我试图制作类似于 Safari(iPhone) 上的动画效果。它类似于开始从 App Store 应用程序下载项目时出现的情况：应用程序项目掉落到 Dock 上以开始下载。 首先它弹起来，然后到达码头。苹果在他们的操作系统上使用了一个非常好的效果。
我在屏幕上有一个图像视图，我想将其与这种动画一起拖放到应用程序中的工具栏上。
如果有人做过或知道效果的名称是什么，请告诉我该怎么做。
谢谢。
I'm trying to make an animation effect similar to the one on Safari(iPhone) when you add an element to the reading list. It's similar to the one that appears when starting to download an item from App Store application: the application item drops to the dock to start downloading.
First it bounces up and then goes to the dock. It's a very nice effect that Apple uses on their OS.
I have an image view on screen that I want to drop with this kind of animation to my toolbar in my application.
If there is someone who did it or know what's the name of the effect, could please tell me how to do it.
Thank you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
“添加到阅读列表”在我的手机上没有显示动画，但根据您的描述，它听起来像 Safari (iPhone) 中的“在后台打开”动画。我的回答描述了那个动画。
几个月前我写了一篇类似的文章，其中大部分是可行的，但有些则不然。你的问题告诉我，更多的人知道它是如何做到的，所以 我写了一篇关于它的博客文章。我将在这里描述高级方法和挑战，但您可以在那篇文章中阅读更多相关信息。
获取动画内容
如果您选择将屏幕上的视图动画化到（在您的情况下）工具栏，那么您只需访问其图层。如果您希望保留原始视图并将视觉副本（如“在后台打开”-Safari 动画）动画化到栏项目，那么您应该创建一个新图层并将图层的内容绘制到图像中并将该图像设置为要制作动画的图层的内容
计算结束位置
动画的开始位置就是视图的帧。 结束位置非常棘手，因为栏项（工具栏项和选项卡栏项）不是 UIView 子类，并且没有公共视图属性。 当您稍后想要摇动栏项目时，这会导致问题。
我决定使用一些简单的启发式方法对最终位置进行视觉近似。如果您事先知道您只会对单个条形项目进行动画处理，则可以将结束位置硬编码到合适的框架。
沿着路径制作动画
从开始位置到结束位置移动、缩放和旋转图层没有什么特别的。 如果您想了解更多关于我是如何做到这一点的信息，您可以查看我写的帖子。
摇动栏项目
如果没有大量自定义代码或在 由于栏项目没有视图或图层，因此没有可供您制作动画的可访问图层。 我猜你可能有一个自定义的动画图像，它可以在动画过程中进行抖动和设置，然后再设置新图像。绘制图像并进行动画处理的方法效果不太好要么因为没有可访问的图层可以将其内容绘制到图像中（您希望这样做是为了工具栏项目和选项卡栏项目的特殊效果）。
...将所有这些放在一起并根据您的特殊需求进行调整，您将拥有一个类似于您正在寻找的动画的动画。
"Add to reading list" shows no animation on my phone but of your description it sounds like the "Open in background"-animation in Safari (iPhone). My answer describes that animation.
I wrote a thing like that a few months ago and much of it is doable while some of it is not. Your questions showed me that more people are to know how it is done so I wrote a blog post about it. I will describe the high level approach and challenges here but you can read more about it in that post.
Getting to content to animate
If you choose to animate the view that is on screen down to the (in your case) tool bar then you will only have to access its layer. If you want the original view to remain and animate a visual copy (like the "open in background"-Safari animation) down to the bar item then you should create a new layer and draw the content of your layer into an image and set that image as the content of the layer that you are animating
Calculating the end position
The start position of the animation is simply the frame of the view. The end position is very tricky since bar items (both tool bar items and tab bar items) are not UIView subclasses and doesn't have a public view property. This causes problems when you want to shake the bar item later on.
I decided to make a visual approximation of the end position using some simple heuristics. If you know before hand that you will only animate to a single bar item then the end position can be hard coded to a suitable frame.
Animating along a path
There is nothing special to moving, scaling and rotating the layer from the start to the end position. If you want to read more about how I did it you can look at the post I wrote.
Shaking the bar item
This cannot be done without a lot of custom code or using private API at the moment. Since bar items doesn't have a view or a layer there is no accessible layer for you to animate. I guess that you could have a custom animating image that does the shake and set that during the animation and set the new image afterwards. The approach of drawing into an image and animating that doesn't work that well either since there is no accessible layer who can draw its content into the image (you want this for the special effect of the tool bar item and tab bar item).
...put all this together and tweak it to your special needs and you will have an animation that resembles the animation you are looking for.