CSS3 animation动画，循环间的延时执行该怎么弄

Posted 2023-05-18

delay只针对第一次有效，貌似没有其他属性可以直接控制循环间隔，不过可以修改keyframes里的百分比，比如你原本的动画0%到100%，完成需要3s，间隔3s。那么将50%到100%的动画效果改成一样（相当于静止），再将完成时间改为6s。 参考技术A animation: xxxx 5s; 5s就是时间 自己随便定义就行了本回答被提问者和网友采纳

链式 UIView 动画，每个动画都包含循环内的完成块 [重复]

【中文标题】链式 UIView 动画，每个动画都包含循环内的完成块 [重复]

【英文标题】：Chained UIView animation with each contain completion block within a loop [duplicate]

【发布时间】：2017-03-29 12:52:25

【问题描述】：

我想在一个循环中连续做几个animations。每个animation 首先执行“UI 动画”，然后执行“完成块”。我的问题是如何添加几个这样的animations 系列在一个循环中，以便执行顺序如下：条件->“UI 动画 1”->“完成块 1”-> 条件-> “UI 动画 2”->“完成块 2”->...-> 条件->“UI 动画 n”->“完成块 n”。

 while(condition)
    [UIView animateWithDuration:0.3 animations:^
        //UI animation
        CGRect frame = sourceView.frame;
        frame.origin = destPosition;
        view.frame = frame;
     completion:^(BOOL finished) 
        //completion block
        self.currentBoard = destBoard;
    ];
 

抱歉，我可能无法清楚地提出我的问题。我已经更新了我的问题，添加了 while 循环。 问题是我发现下一个条件测试是在上一个动画的完成块之前执行的

【问题讨论】：

***.com/questions/3849460/…

您正在寻找的答案在@DonMag 的链接中

【参考方案1】：

您需要在完成块 N-1 中启动 UI Animation N。

[UIView animateWithDuration:0.3 animations:^
  // UI Animation 1
 completion:^(BOOL finished) 
  // Handle the completion of UI Animation 1

  // Start the next animation
  [UIView animateWithDuration:0.3 animations:^
    // UI Animation 2
   completion:^(BOOL finished) 
    // Completion block of animation 2
  

【讨论】：

如果 n 很大，嵌套很困难。是否可以在一个循环内实现？

您可以查看此解决方案，其中将动画放入数组中，然后循环播放。 ***.com/questions/17949511/…

感谢您的信息。实际上，在我发布我的问题之前，我已经尝试过了。该解决方案的问题是没有我想要的完成块放在哪里。该解决方案中的完成块仅用于触发下一个动画。

您可以通过调用 getNextAnimation()(completed);

根据您的建议，我通过修改区块签名实现了这一点。现在我想在带有动画的while循环中添加条件测试。但是，下一个条件测试在上一个动画完成块之前执行，如我更新的问题描述中所示