如何使用自定义动画将一个 UI 元素替换为另一个？答案

【问题标题】：How to replace one UI element by another with custom animation?如何使用自定义动画将一个 UI 元素替换为另一个？
【发布时间】：2012-06-28 13:45:10
【问题描述】：

我想在我自己的文档查看器中实现嵌套评论（如贴纸）。一开始应该是UITextView，但是当resignFirstResponder执行时，它应该变成了一个小按钮。主要问题是：如何制作动画？我已经阅读了 Apple 的 Quartz 2d 编程指南，但它没有给我任何想法。我不要求准确或现成的解决方案：关键字、文章或文档的链接就足够了。感谢您以后的回复。

【问题讨论】：

交叉淡入淡出是一种选择。
问题是我想尝试手工制作这样的动画。
交叉淡入淡出有什么问题，例如动画控件（UIView）的 alpha 值的变化？
是的，我读过关于交叉淡入淡出的文章。但我想要一些不那么静态的东西。例如。就像从相册中删除照片一样。

标签： ios animation core-animation quartz-graphics

【解决方案1】：

你可以用这个方法

[UIView animateWithDuration: delay: options: animations: completion:];

因此，如果您想淡入按钮并淡出文本字段，那就是

//Starting properties
myButton.alpha = 0;
myTextField.alpha = 1;

//Do the animation
[UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationCurveEaseInOut animations:^{
    myButton.alpha = 1;
    myTextField.alpha = 0;   
} completion:^(BOOL finished) {
    if (finished) {
        NSLog(@"finished animating");
    }
}];

这将在 300 毫秒内将 2 个对象的不透明度从 0 - 1 / 1 - 0 更改

您可以通过这种方式为许多属性设置动画，例如大小、位置、不透明度等。

【讨论】：

谢谢，但我知道怎么做这么简单的动画。我不知道如何创建自定义。
@folex 请用更多的词来描述你所谓的自定义动画。
我的意思是手工动画。例如。当您指定每个转换或类似的东西时。我无法更正式地描述它，因为如果可以的话，我会用谷歌搜索它:) 也许没有办法这样做？无论如何，我会在阅读 Core Animation 编程指南后尝试弄清楚。
@folex 你应该首先检查该指南，因为几乎所有标准转换都可以使用核心动画进行动画处理。当事情变得更复杂时，您可能最终不得不使用预渲染的帧动画（例如，使用 UIImageView 的动画功能）。

【解决方案2】：

您可以像 Apple 在 QuickLook 中的两个不同元素之间淡入淡出一样做到这一点。您可以通过在 Finder 中选择一个项目按 shift+space 以慢动作自己查看效果。

动画基本上是在帧变化的同时交叉淡入淡出。您可能应该将按钮和文本视图都渲染为图像，并使用两个图像视图（仅在动画期间存在）进行动画处理，以便能够在帧更改时随着纵横比的变化拉伸图像。

您将需要 Core Animation 将视图渲染为图像，但其余图像仅是帧和 alpha/opacity 动画，因此您应该能够使用 UIView 动画来完成它们（如果 Core Animation 对您来说似乎很复杂）。尽管在调整动画时 Core Animation 会给你一些更细粒度的控制。

【讨论】：