如何通过许多子视图保持 iOS 动画流畅

Posted 2023-03-13

【中文标题】如何通过许多子视图保持 iOS 动画流畅

【英文标题】：How to keep iOS animation smooth with many subviews

【发布时间】：2011-12-30 13:08:36

【问题描述】：

我正在尝试我正在编写的一个小游戏的不同外观，以便在 ios 上玩动画。

我的目标是创建一个基于游戏玩法的图块网格，将每个图块的显示更改为一组图像中的一个。我希望每个图块（最大 24x24）在其面发生变化时翻转。随着游戏的进行，越来越多的牌需要同时翻转。在我尝试同时翻转它们的第一个实现中，动画变得非常生涩。

我改变了我的方法，不是一次全部翻转，而是一次只翻转几个，方法是为每个图块安排动画，每个图块的延迟略有增加，这样当说第 10 个图块开始动画时，第一个一个已经完成了。整个过程只需要一点时间即可完成，但也会产生很好的视觉涟漪效果。

但是，仍然存在一个问题：在游戏开始时，当玩家选择一种新颜色时，在动画开始之前，设备需要几分之一秒的时间。随着游戏的进行，这种情况会变得更糟，每次移动都需要安排更多的翻转，直到动画似乎挂起然后几乎立即完成，而中间的任何帧实际上都无法辨认。

这是触发相关图块翻转的代码（在我的UIView 游戏网格子类中）。 （我删除了跳过图块的优化，因为它只在游戏的早期阶段很重要）。

float delay = 0.0f;
for (NSUInteger row=0; row<numRows; row++) 
    for (NSUInteger col=0; col<numCols; col++) 
        delay += 0.03f;
        [self updateFlippingImageAtRow:row col:col delay:delay animated:YES];
    

游戏网格视图有一个 NSArray 的图块子视图，这些子视图在上面的循环中使用 row 和 col 变量进行寻址。

updateFlippingImageAtRow:col:delay:animated 是我的FlippingImageView（也是UIView 的子类）中的一个方法归结为这一点（游戏逻辑省略）：

-(void)animateToShow:(UIImage*)image 
            duration:(NSTimeInterval)time 
               delay:(float)delay 
          completion:(void (^)(BOOL finished))completion 

    [UIView animateWithDuration:time
                          delay:delay
                        options:UIViewAnimationOptionTransitionFlipFromLeft 
                     animations:^
                         [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft
                                                forView:self
                                                  cache:YES];
                         self.frontImage = image;
                     
                     completion:completion
    ];

工作正常，但是，我从 Instruments 测量得出结论，它告诉我我的时间花在动画块上，随着游戏的进行并且要翻转的瓷砖数量增加，获得的动画数量在操作一开始就安排是一个问题，然后系统会尝试通过丢帧来赶上。

有什么建议可以提高它的性能吗？动画的确切时间并不重要。

【问题讨论】：

是的，实际分析！ （顺便说一句，这真的是 Instruments 中不一致的本地化数字吗？如果是，请提交错误！）

【参考方案1】：

您可以考虑使用 CoreAnimation 和 CALayers 而不是 UIViews 来执行此操作。它是一个功能强大且经过优化的框架。

这不是一件容易的事，您必须至少重新编码一些类（视图层次结构和命中测试是我想到的第一件事），但值得一试，而且过程相当轻松，因为CALayer 与 UIView 非常相似。

下一步是 OpenGL。它绝对可以实时操作数百个对象，但它需要做更多的工作。

【讨论】：

是的，我认为您的 UIView 数量已经达到了该考虑其他 API 的时候了。最多 100 应该没问题。

【参考方案2】：

您可能想尝试改用 CoreAnimation。进行翻转动画的一种方法是：

创建一个CABasicAnimation，为翻转的前半部分设置动画（沿 y 轴旋转）。 在delegate method animationDidStop:finished: 中设置新图像，然后创建一个新动画，为后半部分设置动画。 您只需将动画应用到视图的layer 属性即可。 请注意，您可以使用setValue:forKey: 来“注释”动画（记住动画是关于什么对象的）。当您将动画添加到图层时，它会被复制而不是保留，因此您无法通过简单地比较指针值来识别它。