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 ];

问题在于，在动画反转后，视图会跳回到动画块中设置的帧。我希望视图能够成长并“不受限制地”并停在原来的位置。

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

Answer 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动画或在完成块中重置它是完全可以接受的。事实上，这是完成块的主要目的之一。

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

Answer 2

这是我的解决方案。对于2x重复，动画1.5倍并自己完成最后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 ....

                         }];
                 }];

没有闪烁，效果很好。

Answer 3

repeatCount上有CAMediaTiming个属性。我认为你必须创建一个显式的CAAnimation对象，并正确配置它。成长和不适应的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无法避免编程两个动画对象。

Answer 4

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

在下面的代码片段中，我将我的视图在 y 轴上平移了 1.5 次 -10.0 pts。然后在完成块中，我最后一次将视图动画回其原始 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) 
})

使用自动反转的UIView动画

4 个答案:

第一个选项

第二选项

第三选项