【问题标题】: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个部分:

    1. 从中心显示全黑树的动画。
    2. 显示文本的动画
    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];
      

      【讨论】:

      • 添加另一个与已经存在的答案相同的答案不是很好的做法
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-02-03
      • 1970-01-01
      • 1970-01-01
      • 2022-12-23
      • 1970-01-01
      • 2021-05-26
      • 1970-01-01
      相关资源
      最近更新 更多