如何在 iOS 中实现这个动画？答案

【问题标题】：how to implement this animation in iOS?如何在 iOS 中实现这个动画？
【发布时间】：2015-06-26 20:46:31
【问题描述】：

我不确定如何提出这个问题，因为我不知道应该使用哪个动画术语。

我需要了解这个树演示动画。因为它从根到顶部出现。

请查看附加的 .gif 文件，如果有人知道此动画，或者您可以举例指导我，请告诉我。

我会很感激的。

感谢您的宝贵时间。

【问题讨论】：

您可以通过使用 imageview 属性 @property(nonatomic, copy) NSArray *animationImages 将多个图像设置为 imageview 来制作此动画
去年我用这个在应用程序github.com/arturogutierrez/Animated-GIF-iPhone中播放动画GIF

标签： ios iphone animation uiimageview core-graphics

【解决方案1】：

对您来说最好的选择是将 gif 拆分为多个图像，然后执行以下操作：

NSArray *gifImagesArray = [NSArray arrayWithObjects:imageOne, imageTwo, imageThree, nil];
imageView.animationImages      = animateImagesArray;
imageView.animationRepeatCount = 1;
imageView.animationDuration    = 1.0f;
[imageView startAnimating];

编辑以下 cmets：

如果您不能使用多个图像，则必须自己编写动画。

一个建议是向 UIImage 添加一个圆形遮罩并为其移除设置动画。此链接说明如何绘制圆形 CALayer：Circular Progress Bars in IOS

这里将向您展示如何在 UIImage 上创建蒙版：Simply mask a UIView with a rectangle

现在您所要做的就是一个简单的动画。

【讨论】：

谢谢米凯尔。但我有限制，我不能使用多个图像。您的答案肯定会起作用，但我无法以这种方式实施。感谢您的快速回答，但我们有什么方法可以通过单张图片来实现吗？
单张图片无法做到这一点，因为树叶与树枝重叠。
对于叶子，我们可以使用不同的图像视图，图像将具有透明背景。这样我们也可以看到树。主要是我需要实现图像出现动画，因为树显示从根到顶部。
所以我实际上有树、树叶、地面工作文本和底部按钮的图像。如果我使用图像数组，那么我需要使用很多图像。由于限制，我不能这样做。
OK 那么你需要添加一个 CAShapeLayer 作为你的树 UIImage 的遮罩，它是圆形的。然后你需要动画半径大小的变化。我将用几个链接编辑答案，但我无法为你编写代码。

【解决方案2】：

我有一个可以解决这个问题的解决方案。我们可以使用 gif 图像并将其转换为 UIImage 对象。所以图像对象将与动画一样工作。

感谢大家的回答。

【讨论】：

【解决方案3】：

在我看来，我会将这个动画分成4个部分：

从中心显示全黑树的动画。
显示文本的动画
显示蓝色叶子的动画。
在底部显示 2 个按钮的动画。

你可以使用这个框架https://github.com/facebook/pop来逐步操作所有的动画甚至是Core Animation。请做更多的研究......我认为你会成功的。

【讨论】：

【解决方案4】：

你可以使用简单的 UIImageView 来实现这个动画，使用 UIImageView 的 animationImages 属性可以加载多个图像。

首先，创建一个 NSMutablerArray 图像。然后将该图像分配给 imageView，并将该图像的 animationDuration 分配给该图像。

UIImageView *animationImageView = [[UIImageView alloc]  initWithFrame:CGRectMake(60, 95, 86, 193)];
animationImageView.animationImages = images;
animationImageView.animationDuration = 0.5;

添加要查看的图像视图。

[self.view addSubview:animationImageView];
[animationImageView startAnimating];

【讨论】：

添加另一个与已经存在的答案相同的答案不是很好的做法