如何在两个动画之间设置延迟序列 [英] How to sequence two animations with delay in between

问题描述

我有一个 UIImageView ，我想旋转180度，占用1秒，然后我要在此位置等待1秒，然后旋转180度回到原始位置占用1秒。

我该如何完成？我已经尝试了100种方法，但它会不断回弹，而不是回滚

编辑：我忘了补充说明，我需要无限次重复此操作

解决方案

您可以在UIView.animate上显示的完成处理程序中执行第二个动画

  let duration = self.transitionDuration（using：transitionContext）
 
让firstAnimDuration = 0.5 
 UIView.animate（withDuration：firstAnimDuration，动画：{
 / *在这里执行第一个动画* / 
}）{（已完成）在
 
中，让secondAnimDuration = 0.5 
 UIView.animate（withDuration：secondAnimDuration，动画：{
 / *在这里做第二个动画* / 
}）
} 
  

现在可能还有另一个问题。

如果使用CGAffineTransform旋转视图，并且为每个动画向该view.transform分配这种类型的新对象，您将失去以前的转换运算符

因此，根据这篇文章：

.repeat动画和.autoreverse

的示例

.animate方法使您能够设置一些动画选项。特别是UIViewAnimationOptions结构包含：

1. .repeat，它无限期地重复您的动画块


2. 。 autoreverse，可将您的视图恢复为原始状态

有了这一点，您可以执行以下操作：

  var transform = view.transform.rotated（by：180）
 UIView.animate（withDuration：2，delay：0，options：[.repeat ，.autoreverse]，动画：{
 self.myView.transform = transform 
}）
  

但是您需要在两个动画之间进行延迟，因此您需要执行以下操作：

递归动画示例和1秒延迟

只需在ViewController中创建一个动画视图的方法。在最后一个完成处理程序中，只需调用该方法即可创建无限循环。

最后，您需要在viewDidAppear上调用该方法以启动动画。

 重写功能viewDidAppear（_动画：布尔）{
 super.viewDidAppear（动画）
 
 self.animation（）
} 
 
 
 func animation（）{
 var transform = view.transform 
 transform = transform.rotated（by ：180）
 
 UIView.animate（withDuration：2，delay：0，options：[]，动画：{
 
 self.myView.transform = transform 
 
}）{bool in 
 transform = CGAffineTransform.identity 
 
 UIView.animate（withDuration：2，delay：1，options：[]，动画：{
 
 self.myView.transform =变换
 
}，完成：{在
中设置bole self.animation（）
}）
} 
 } 
  

I have a UIImageView which i want to rotate 180 degrees, taking up 1 second, then i want to wait 1 second at this position, then rotate 180 degrees back to the original position taking up 1 second.

How do i accomplish this? I've tried a 100 approaches and it keeps snapping back instead of rotating back

EDIT: I forgot to add i need this to repeat indefinitely

解决方案

You can perform the second animation in the completionHandler presented on UIView.animate

let duration = self.transitionDuration(using: transitionContext)

let firstAnimDuration = 0.5
UIView.animate(withDuration: firstAnimDuration, animations: {
    /* Do here the first animation */
}) { (completed) in

   let secondAnimDuration = 0.5
   UIView.animate(withDuration: secondAnimDuration, animations: { 
       /* Do here the second animation */
   })
}

Now you could have another problem.

If you rotate your view with the CGAffineTransform and for every animation you assign a new object of this type to your view.transform, you will lose the previous transform operation

So, according to this post: How to apply multiple transforms in Swift, you need to concat the transform operation

Example with 2 animation block

This is an example to made a rotation of 180 and returning back to origin after 1 sec:

let view = UIView.init(frame: CGRect.init(origin: self.view.center, size: CGSize.init(width: 100, height: 100)))
view.backgroundColor = UIColor.red
self.view.addSubview(view)

var transform = view.transform
transform = transform.rotated(by: 180)

UIView.animate(withDuration: 2, animations: {
    view.transform = transform
}) { (completed) in

    transform = CGAffineTransform.identity
    UIView.animate(withDuration: 2, delay: 1, options: [], animations: { 
        view.transform = transform
    }, completion: nil)
}

Example of .repeat animation and .autoreverse

The .animate method give you the ability to set some animation options. In particular the structure UIViewAnimationOptions contains:

1. .repeat, which repeat indefinitely your animation block
2. .autoreverse, which restore your view to the original status

With this in mind you could do this:

var transform = view.transform.rotated(by: 180)
UIView.animate(withDuration: 2, delay: 0, options: [.repeat, .autoreverse], animations: {
     self.myView.transform = transform
})

But you need a delay between the two animations, so you need to do this trick:

Example of recursive animation and a delay of 1 sec

Just create a method inside your ViewController which animate your view. In the last completionHandler, just call the method to create a infinite loop.

Last you need to call the method on viewDidAppear to start the animation.

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    self.animation()
}


func animation() {
    var transform = view.transform
    transform = transform.rotated(by: 180)

    UIView.animate(withDuration: 2, delay: 0, options: [], animations: {

        self.myView.transform = transform

    }) { bool in
        transform = CGAffineTransform.identity

        UIView.animate(withDuration: 2, delay: 1, options: [], animations: {

            self.myView.transform = transform

        }, completion: { bool in
            self.animation()
        })
    }
}

这篇关于如何在两个动画之间设置延迟序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！