【问题标题】:UIView animations with autoreverse具有自动反转功能的 UIView 动画
【发布时间】:2017-11-06 17:02:25
【问题描述】:

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

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

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

【问题讨论】:

    标签: ios cocoa-touch animation uiviewanimation


    【解决方案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) 
    })
    

    【讨论】:

      猜你喜欢
      • 2011-11-19
      • 2023-04-05
      • 1970-01-01
      • 1970-01-01
      • 2014-01-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多