简单示例

Question

我希望动画几个视图，这些视图基本上是变大的方块然后又回到原始大小。视图的数量可以变化，并按顺序设置动画，其中一个视图动画在其前一个视图完成之前开始。我尝试了以下方法：

for (int i = 0; i < length; i++) {
    SView *view = _row[i];

    view.widthConstraint.constant *= 1.1;
    view.heightConstraint.constant *= 1.1;

    [UIView animateWithDuration:1
                          delay:1 * i
                        options:UIViewAnimationOptionCurveEaseInOut
                     animations:^{
                       [self.view layoutIfNeeded];
                     }
                     completion:^(BOOL finished) {
                       view.widthConstraint.constant /= 1.1;
                       view.heightConstraint.constant /= 1.1;

                       [UIView animateWithDuration:.1
                                             delay:0
                                           options:UIViewAnimationOptionCurveEaseInOut
                                        animations:^{
                                          [self.view layoutIfNeeded];
                                        } completion:^(BOOL finished) {
                                        }];
                     }];
  }
}

这最终会变得非常波涛汹涌，如果有意义的话，会眨眼，并且没有像我期待的那样。任何想法如何完成这个连续动画仍然使它非常流畅？

Answer 1

正确方法是使用关键帧。它使代码更清晰。 UIView使用的方法是：

animateKeyframesWithDuration：延迟：选择：动画：完成： addKeyframeWithRelativeStartTime：relativeDuration：动画：

简单示例

以下是一个如何使用它的简单示例：

[UIView animateKeyframesWithDuration:0.25
                               delay:0
                             options: UIViewKeyframeAnimationOptionBeginFromCurrentState
                          animations:^{
                              [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.7 animations:^{
                                  avatarView.transform = CGAffineTransformMakeScale(0.9, 0.9);
                              }];
                              [UIView addKeyframeWithRelativeStartTime:0.7 relativeDuration:0.3 animations:^{
                                  avatarView.transform = CGAffineTransformIdentity;
                              }];
                          } completion:nil];

这个想法是你定义一个整体持续时间，然后分解每个动画所花费的数量，并相对于整个动画进行延迟。

循环示例

如果你有多个需要关键帧的视图，你实际上可以在动画块中有一个循环。这允许灵活和动态的代码。这是一个example project和一些代码：

[UIView animateKeyframesWithDuration:1.0
                               delay:0
                             options: UIViewKeyframeAnimationOptionBeginFromCurrentState
                          animations:^{
                              for (int i = 0; i < numberOfViews; i++) {
                                  [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:(duration / numberOfViews) animations:^{
                                      ... animate view ...
                                  }];
                              }
                          } completion:nil];

Answer 2

更灵活的动画制作方法是使用animateKeyframesWithDuration:delay:options:animations:completion:和addKeyframeWithRelativeStartTime:relativeDuration:animations:。只需查看如何使用该API。

我觉得你会发现它最终变得更清洁，更清晰。

动画多个视图，其中一个在另一个完成之前开始

2 个答案:

简单示例

循环示例