ios - 带有自动反转的 UIView 动画

Question

我在设置 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 ];

问题在于，在动画反转后， View 跳回到动画 block 中设置的帧。我希望 View 增长和“退化”并停在其原始位置。

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

Answer 1

您有三个选择。

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

例如，如果您这样做:

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

你会看到“旧中心”和“新中心”是不同的；新中心将立即反射(reflect) newPoint 的值(value)。但是，隐式创建的 CAAnimation 将导致 View 仍显示 在旧中心并平滑地移动到新中心。动画结束后，它会从 View 中移除，您会切换回只看到实际的模型值。

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

正如我所说，有三种方法可以解决这个问题。第一种是在动画上添加一个完成 block 来反转它，如下所示:

第一个选项

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

第二个选项

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

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

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

第三个选项

最后一个选项是直接创建一个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 做事的方式永远不会改变 View 的实际值；它只是用动画掩盖了实际值。该 View 仍然认为它位于原始位置。 (这意味着，例如，如果您的 View 响应触摸事件，它仍将监视那些触摸事件在原始位置发生。动画仅改变 View 绘制的方式；没有任何变化否则。

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

所以，你去吧。三种不同的方式来反转动画并保持原始值。享受吧!