iOS - 使用自动布局执行多个同步动画

Question

我想同时执行两个运动动画。 firstView 上的第一个动画立即开始。 secondView 上的第二个动画在第一个动画仍在运行时略有延迟后开始。 secondView 约束与firstView 相关。该代码在 iOS 8 上运行良好。

firstView 和 secondView 是 view 的 subview

view  
    |--- firstView  
    |--- secondView    

代码:

UIView *firstView = ...;
UIView *secondView = ...;    

[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
    NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:firstView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.topLayoutGuide attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
    [self.view addConstraint:constraint];
    [self.view layoutIfNeeded];
} completion:^(BOOL finished) {
}];

[UIView animateWithDuration:0.5 delay:0.15 options:UIViewAnimationOptionCurveEaseInOut animations:^{
    NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:secondView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:firstView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
    [self.view addConstraint:constraint];
    [self.view layoutIfNeeded];
} completion:^(BOOL finished) {
}];

在 iOS 7 上，一旦第二个 layoutIfNeeded 被调用，第一个动画停止，只有第二个动画动画。

有什么建议吗？

Answer 1

回答我自己的问题。

我最终用两步(三步，取决于你如何计算)解决方案来制作动画。首先在不调用 layoutIfNeeded 的情况下添加约束。然后更新 firtView 和 secondView 框架。最后在最后一个动画的完成 block 中调用 layoutIfNeeded。

代码:

UIView *firstView = ...;
UIView *secondView = ...;    

/* first step */
NSLayoutConstraint *constraint1 = [NSLayoutConstraint constraintWithItem:firstView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.topLayoutGuide attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
[self.view addConstraint:constraint1];
NSLayoutConstraint *constraint2 = [NSLayoutConstraint constraintWithItem:secondView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:firstView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
[self.view addConstraint:constraint2];

/* second step */
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
    CGRect firstViewFrame = CGRectMake(...); // set frame according to constaint1
    firstView.frame = firstViewFrame;
}];

[UIView animateWithDuration:0.5 delay:0.15 options:UIViewAnimationOptionCurveEaseInOut animations:^{
    CGRect secondViewFrame = CGRectMake(...); // set frame according to constaint2
    secondView.frame = secondViewFrame;
} completion:^(BOOL finished) {
    /* second and a half step */
    [self.view setNeedsLayout];
    [self.view layoutIfNeeded];
}];