带有约束的动画立即完成

Question

我有一些动画，我试图转换为约束。它背后的想法是当出现错误时登录提示会反弹。

我的方法是，视图控制器上的所有内容都在bounceView中，而bounceView本身也在主视图中。

BounceView使用居中约束和前导空间约束绑定到主视图。为了使布局在设计时明确无误，还有一个前导空间和顶部空间约束。不过，这些只是占位符，在运行时被等高/宽约束替换。

没有其他约束与主视图相关联。

现在，一些细节…

我使用这些约束来定义反弹：

enum {animationDone, bounceStart, bounceLeft, bounceRight, bounceReturn};
static const NSTimeInterval BounceDuration = 20.0;
static const int NumberOfBounces = 3;
static const CGFloat BounceDistance = 16.0f;

（20秒的延迟通常要短得多；我加大了延迟以证明这不起作用。）

额外的运行时约束是这样设置的：

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:_bounceView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:_bounceView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0]];
}

我用以下代码开始动画：

_animateCount = NumberOfBounces;
_animateStage = bounceStart;
[self animationStep];

实际代码非常简单：

- (void)animationStep {
    CGFloat bounceTo = 0;
    BOOL half = NO;
    switch (_animateStage) {
        case bounceStart:
            _animateStage = bounceLeft;
            bounceTo = -BounceDistance;
            half = YES;
            break;
        case bounceLeft:
            _animateStage = bounceRight;
            bounceTo = BounceDistance;
            break;
        case bounceRight:
            if ( --_animateCount > 0 ) {
                _animateStage = bounceLeft;
                bounceTo = -BounceDistance;
            } else {
                _animateStage = bounceReturn;
                bounceTo = 0;
            }
            break;
        case bounceReturn:
            half = YES;
            _animateStage = animationDone;
            break;
    }

    BOOL finishedAnimation = ( ( _animateStage == animationDone ) || ( self.view == nil ) );

    if ( !finishedAnimation ) {
        [_bounceView layoutIfNeeded];
        _centerX.constant = bounceTo;
        [_bounceView setNeedsUpdateConstraints];

        NSTimeInterval duration = half ? BounceDuration / 2.0f : BounceDuration;
        [UIView animateWithDuration:duration delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            NSLog(@"Bouncing to %f over %f seconds.", bounceTo, duration);
            [_bounceView layoutIfNeeded];
        } completion:^(BOOL finished) {
            [self animationStep];
        }];
    }
}

然而，这一切都将立即完成：

2013-10-29 10:59:43.852 App[9151:907] Bouncing to -16.000000 over 20.000000 seconds.
2013-10-29 10:59:43.864 App[9151:907] Bouncing to 16.000000 over 20.000000 seconds.
2013-10-29 10:59:43.865 App[9151:907] Bouncing to -16.000000 over 20.000000 seconds.
2013-10-29 10:59:43.866 App[9151:907] Bouncing to 16.000000 over 20.000000 seconds.
2013-10-29 10:59:43.866 App[9151:907] Bouncing to -16.000000 over 20.000000 seconds.
2013-10-29 10:59:43.867 App[9151:907] Bouncing to 16.000000 over 20.000000 seconds.
2013-10-29 10:59:43.867 App[9151:907] Bouncing to 0.000000 over 20.000000 seconds.

有什么想法吗？

使现代化

对于后代，这是由在子视图上调用setNeedsUpdateConstraint和layoutIfNeed引起的。尽管Apple的留档暗示并非如此，但您需要在超级视图上调用它。我在下面的答案中详细说明了这一点。

然而，我接受了@nielsbot的回答。尽管这不是我问题的直接答案，但这是一个比修复我试图做的事情更好的解决方案。

Answer 1

您必须在superview上调用setNeedsUpdateConstraints和layoutIfNeeded。尽管苹果的文档中说需要布局（layoutIfNeeded），但事实似乎并非如此。

为了将来参考，Apple当前为layoutIfNeed留档：

使用此方法在绘图前强制子视图的布局。从接收器开始，只要超级视图需要布局，此方法就会向上遍历视图层次结构。然后它会在该祖先下方布局整个树。因此，调用此方法可能会强制整个视图层次结构的布局。

Answer 2

这篇文章中建议的模式有帮助吗？

我知道你在动画中使用的是比那篇文章中简单的更细粒度的控制方法，但我认为底层的setneedsupdatelayoutstraints和后续的layoutIfNeeded调用在这里仍然适用。

Answer 3

不能使用核心动画临时设置视图的动画吗？

请参见我的答案：https://stackoverflow.com/a/9371196/210171

基本上，在要设置动画的视图上，获取其层并向其添加动画。如果通过设置层变换的动画来执行此操作，则不会更改视图的大小或位置，也不会触发布局循环。

CAKeyframeAnimation * anim = [ CAKeyframeAnimation animationWithKeyPath:@"transform" ] ;
anim.values = @[ [ NSValue valueWithCATransform3D:CATransform3DMakeTranslation(-5.0f, 0.0f, 0.0f) ], [ NSValue valueWithCATransform3D:CATransform3DMakeTranslation(5.0f, 0.0f, 0.0f) ] ] ;
anim.autoreverses = YES ;
anim.repeatCount = 2.0f ;
anim.duration = 0.07f ;

[ viewToShake.layer addAnimation:anim forKey:nil ] ;