如何在

时间:2017-09-03 08:34:11

标签: ios swift core-animation

我有一个UIImageView我要旋转180度,占用1秒钟,然后我想在这个位置等待1秒钟,然后旋转180度回到原来的位置需要1秒钟。

我如何做到这一点?我已经尝试了100种方法,它不断向后退,而不是向后旋转

编辑:我忘记添加我需要这个无限重复

2 个答案:

答案 0 :(得分:5)

您可以在UIView.animate上显示的completionHandler中执行第二个动画

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 */
   })
}

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

如果使用CGAffineTransform旋转视图,并且每个动画都为view.transform指定了此类型的新对象,则将丢失先前的变换操作

所以,根据这篇文章:How to apply multiple transforms in Swift,您需要连接转换操作

包含2个动画块的示例

这是一个旋转180并在1秒后返回原点的例子:

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)
}

.repeat动画和.autoreverse

的示例

.animate方法可让您设置一些动画选项。特别是结构UIViewAnimationOptions包含:

  1. .repeat,无限重复你的动画块
  2. .autoreverse,将您的视图恢复到原始状态
  3. 考虑到这一点,你可以这样做:

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

    但是你需要在两个动画之间延迟,所以你需要这样做:

    递归动画示例和延迟1秒

    只需在ViewController中创建一个方法,为视图设置动画。在最后的completionHandler中,只需调用该方法来创建一个无限循环。

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

    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()
            })
        }
    }
    

答案 1 :(得分:4)

您需要做的就是创建一个keyFrame animations。它旨在将多个动画链接在一起,并在第一个关键帧中将UIImageView子类按PI旋转,然后在第二个关键帧中将其转换回identity

        let rotateForwardAnimationDuration: TimeInterval = 1
        let rotateBackAnimationDuration: TimeInterval = 1
        let animationDuration: TimeInterval = rotateForwardAnimationDuration + rotateBackAnimationDuration

        UIView.animateKeyframes(withDuration: animationDuration, delay: 0, options: [], animations: { 
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: rotateForwardAnimationDuration) {
                self.imageView.transform = CGAffineTransform(rotationAngle: .pi)
            }

            UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: rotateBackAnimationDuration) { 
                self.imageView.transform = .identity 
            }
        })

<强>结果:

enter image description here

修改 这是一个如何使其无限运行的示例。我想你的图像是在viewController中,并且你对imageView持有一些引用。

例如,在viewDidAppear上,调用触发动画的函数,而不是动画的完成块,只需再次调用相同的函数。

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!

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

    func runRotateAnimation() {
        let rotateForwardAnimationDuration: TimeInterval = 1
        let rotateBackAnimationDuration: TimeInterval = 1
        let animationDuration: TimeInterval = rotateForwardAnimationDuration + rotateBackAnimationDuration

        UIView.animateKeyframes(withDuration: animationDuration, delay: 0, options: [], animations: { 
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: rotateForwardAnimationDuration) {
                self.imageView.transform = CGAffineTransform(rotationAngle: .pi)
            }

            UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: rotateBackAnimationDuration) { 
                self.imageView.transform = .identity 
            }
        }) { (isFinished) in
            // To loop it continuosly, just call the same function from the completion block of the keyframe animation
            self.runRotateAnimation()
        }
    }
}