具有自动反转功能的 UIView 动画

Posted 2023-03-13

【中文标题】具有自动反转功能的 UIView 动画

【英文标题】：UIView animations with autoreverse

【发布时间】：2011-02-18 11:02:50

【问题描述】：

UIViewAnimationOptionAutoReverse 的设置有问题。 这是我的代码。

CALayer *aniLayer = act.viewToChange.layer;
[UIView animateWithDuration:2.0 delay:1.0 options:(UIViewAnimationCurveLinear | UIViewAnimationOptionAutoreverse) animations:^
                    viewToAnimate.frame = GCRectMake(1,1,100,100);
                    [aniLayer setValue:[NSNumber numberWithFloat:degreesToRadians(34)] forKeyPath:@"transform.rotation"];
                 completion:nil ];

问题是，动画反转后，视图会跳回到动画块中设置的帧。我希望视图增长和“取消增长”并停在其原始位置。

有没有不编写两个连续动画的解决方案？

【参考方案1】：

你有三个选择。

当您使用-[UIView animateWithDuration:…] 方法时，您在animations 块中所做的更改会立即应用于相关视图。但是，还有一个隐含的CAAnimation 应用于从旧值动画到新值的视图。当CAAnimation 在视图上处于活动状态时，它会更改显示的 视图，但不会更改视图的实际属性。

例如，如果你这样做：

NSLog(@"old center: %@", NSStringFromCGPoint(someView.center));
[UIView animateWithDuration:2.0 animations: ^ someView.center = newPoint; ];
NSLog(@"new center: %@", NSStringFromCGPoint(someView.center));

你会看到'老中心'和'新中心'是不同的；新中心将立即反映 newPoint 的值。但是，隐式创建的CAAnimation 将导致视图仍显示在旧中心并顺利移动到新中心。动画结束后，它会从视图中移除，然后您切换回只查看实际模型值。

当您传递UIViewAnimationOptionAutoreverse 时，它会影响隐式创建的CAAnimation，但不会影响您对值所做的实际更改。也就是说，如果我们上面的示例定义了 UIViewAnimationOptionAutoreverse，那么隐式创建的 CAAnimation 将在 oldCenter 到 newCenter 并返回。然后动画将被删除，我们将切换回查看我们设置的值……仍处于新位置。

正如我所说，有三种方法可以解决这个问题。首先是在动画上添加一个完成块来反转它，像这样：

第一个选项

CGPoint oldCenter = someView.center;
[UIView animateWithDuration:2.0
                 animations: ^ someView.center = newPoint; 
                 completion: 
   ^(BOOL finished) 
       [UIView animateWithDuration:2.0
                        animations:^ someView.center = oldCenter; ];
   ];

第二个选项

第二个选项是像您正在做的那样自动反转动画，并将视图设置回其在完成块中的原始位置：

CGPoint oldCenter = someView.center;
[UIView animateWithDuration:2.0
                      delay:0
                    options: UIViewAnimationOptionAutoreverse
                 animations: ^ someView.center = newPoint; 
                 completion: ^(BOOL finished)  someView.center = oldCenter; ];

但是，这可能会导致动画自动反转完成时间和完成块运行时间之间闪烁，因此它可能不是您的最佳选择。

第三个选项

最后一个选项是直接创建一个CAAnimation。当您实际上不想更改要更改的属性的最终值时，这通常更简单。

#import <QuartzCore/QuartzCore.h>

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.autoreverses = YES;
animation.repeatCount = 1; // Play it just once, and then reverse it
animation.toValue = [NSValue valueWithCGPoint:newPoint];
[someView.layer addAnimation:animation forKey:nil];

注意CAAnimation 的处理方式永远不会改变视图的实际值；它只是用动画掩盖了实际值。视图仍然认为它在原始位置。 （这意味着，例如，如果您的视图响应触摸事件，它仍会观察这些触摸事件是否在原始位置发生。动画仅更改视图的绘制方式；没有否则。

CAAnimation 方式还要求您将其添加到视图的底层CALayer。如果这让您感到害怕，请随意使用 -[UIView animateWithDuration:…] 方法。使用CAAnimation 可以使用其他功能，但如果您不熟悉它，链接 UIView 动画或在完成块中重置它是完全可以接受的。事实上，这是完成块的主要目的之一。

那么，就这样吧。反转动画并保持原始值的三种不同方法。尽情享受吧！

【讨论】：

不错的答案。关于第二个选项的完成块，您能解释一下如何避免在执行someView.center = oldCenter; 时出现的“闪光”效应吗？动画完成后，视图会定位在newPoint，然后很快又移回oldCenter，导致不希望出现的“闪光”效果。你知道如何避免吗？

我目前没有测试平台，但我突然想到，在调用 animateWithDuration... 之后立即设置 someView.center = oldCenter 实际上可能解决这个问题。然后你就不需要完成处理程序了。你可以试试，让我知道吗？如果可行，我将编辑答案。

如果我在animateWithDuration:... 方法之后设置someView.center = oldCenter;，动画根本不会发生。请注意，在设备中运行动画时，我只注意到上面评论的不良效果（在模拟器中动画顺利进行）。

顺便说一句，动画 1.5 倍并自己完成其余部分怎么样？检查我的答案。

这是一个很棒的答案！感谢您的解释和“CAAnimation”选项

【参考方案2】：

这是我的解决方案。对于 2x 重复，动画 1.5x 并自己完成最后 0.5x 部分：

[UIView animateWithDuration:.3
                      delay:.0f
                    options:(UIViewAnimationOptionRepeat|
                             UIViewAnimationOptionAutoreverse)
                 animations:^
                     [UIView setAnimationRepeatCount:1.5f];

                     ... animate here ...

                  completion:^(BOOL finished) 
                         [UIView animateWithDuration:.3 animations:^

                             ... finish the animation here ....

                         ];
                 ];

没有闪烁，很好用。

【讨论】：

绝妙的答案！！！我不敢相信你可以将所谓的动画重复 1.5 次。

【参考方案3】：

CAMediaTiming 上有一个 repeatCount 属性。我认为您必须创建一个明确的 CAAnimation 对象，并正确配置它。 grow 和 ungrow 的 repeatCount 为 2，但您可以对此进行测试。

这句话很长。不过，您需要两个 CAAnimation 对象，一个用于框架，一个用于旋转。

CABasicAnimation *theAnimation;

theAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation"];
theAnimation.duration=3.0;
theAnimation.repeatCount=1;
theAnimation.autoreverses=YES;
theAnimation.fromValue=[NSNumber numberWithFloat:0.0];
theAnimation.toValue=[NSNumber numberWithFloat:degreesToRadians(34)];
[theLayer addAnimation:theAnimation forKey:@"animateRotation"];

AFAIK 无法避免对两个动画对象进行编程。

【讨论】：

设置 autoreverses = YES 和 repeatCount = 2 将导致动画增长、缩小，然后再次增长和缩小。动画的每次重复都会发生自动反转。

感谢您的洞察力。我不确定它是如何计算的。

【参考方案4】：

这是@Rudolf Adamkovič 答案的 Swift 版本，您将动画设置为运行 1.5 次，并在完成块中最后一次运行“反向”动画。

在下面的 sn-p 中，我将我的视图在 y 轴上平移了 -10.0 点 1.5 倍。然后在完成块中，我最后一次将我的视图动画化回其原始 y 轴位置 0.0。

UIView.animate(withDuration: 0.5, delay: 0.5, options: [.repeat, .autoreverse], animations: 

    UIView.setAnimationRepeatCount(1.5)
    self.myView.transform = CGAffineTransform(translationX: 0.0, y: -10.0)
            
, completion:  finished in
            
    UIView.animate(withDuration: 0.5, delay: 0, options: [], animations: 

        self.myView.transform = CGAffineTransform(translationX: 0.0, y: 0.0)

    , completion: nil) 
)