对多个视图进行动画处理，其中一个视图在另一个视图完成之前开始 [英] Animate multiple views where one starts before another finishes

问题描述

我想制作几个视图的动画，这些视图本质上是正方形，先变大然后再回到原始大小。视图的数量可以变化，并且可以按顺序进行动画处理，其中一个视图动画恰好在其前一个视图完成之前开始。我尝试了以下操作：

I'd like to animate several views, which are essentially squares that get bigger then go back to original size. The number of views can vary and are animated in sequential order, where one view animation starts just before its preceding view completes. I tried the following:

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) {
                                        }];
                     }];
  }
}

这最终变得断断续续且闪烁，如果那是有道理的，那与我所期望的完全不同。知道如何完成此顺序动画并仍然使其非常平滑吗？

This ends up being very choppy and "blinking", if that makes sense, and nothing like what I was expecting. Any idea how to accomplish this sequential animation and still make it very smooth?

推荐答案

正确的方式为此，请使用关键帧。它使代码更简洁。使用的UIView方法如下：

The right way to do this is by using keyframes. It makes for much cleaner code. The UIView methods to use are these:

animateKeyframesWithDuration：delay：options：animations：completion：
addKeyframeWithRelativeStartTime：relativeDuration：animations：

animateKeyframesWithDuration:delay:options:animations:completion: addKeyframeWithRelativeStartTime:relativeDuration:animations:

简单示例

以下是有关如何使用它的简单示例：

Simple Example

Here is a simple example on how to use it:

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

想法是定义总体时长，然后分解每个动画的制作时间和延迟时间

The idea is that you define an overall duration then break up how much each individual animation takes and is delayed in relation to the overall animation.

如果您需要对多个视图进行关键帧设置，您实际上可以在动画块中进行循环。这允许灵活和动态的代码。这是一个示例项目和一些代码：

If you have multiple views that need to be keyframed, you can actually have a loop within the animation block. This allows for flexible and dynamic code. Here is an example project and some code:

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

这篇关于对多个视图进行动画处理，其中一个视图在另一个视图完成之前开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！