在 Swift 中链接动画

Question

Recently, I have made some code which draws a face. I wanted to animate the face to shake back and forth. Currently I have this code. It rotates once to the right, then more to the left, and then to the original position. However, what if I wanted the head to infinitely shake back and forth(rotate bath and forth). Is it possible to make some sort of recursive function to do this?

@IBAction func shakeHead(_ sender: UITapGestureRecognizer) {

    UIView.animate(
        withDuration: 0.5,
        animations: {
            self.faceView.transform = self.faceView.transform.rotated(by: self.shakeAngle)
    },
        completion:{ finished in
            if(finished){
                UIView.animate(
                    withDuration: 0.5,
                    animations: {
                        self.faceView.transform = self.faceView.transform.rotated(by: -(self.shakeAngle)*2)
                },
                    completion:{ finished in
                        if(finished){
                            UIView.animate(
                                withDuration: 0.5,
                                animations: {
                                    self.faceView.transform = self.faceView.transform.rotated(by: self.shakeAngle)
                            },
                                completion: nil
                            )
                        }
                }
                )
            }
    }
    )

}

Answer 1

You could call shakeHead from the final completion block.

@IBAction func shakeHead(_ sender: UITapGestureRecognizer) {

    UIView.animate(
        withDuration: 0.5,
        animations: {
            self.faceView.transform = self.faceView.transform.rotated(by: self.shakeAngle)
    },
        completion:{ finished in
            if(finished){
                UIView.animate(
                    withDuration: 0.5,
                    animations: {
                        self.faceView.transform = self.faceView.transform.rotated(by: -(self.shakeAngle)*2)
                },
                    completion:{ finished in
                        if(finished){
                            UIView.animate(
                                withDuration: 0.5,
                                animations: {
                                    self.faceView.transform = self.faceView.transform.rotated(by: self.shakeAngle)
                            },
                                completion: { finished in
                                    shakeHead(sender)
                            }
                            )
                        }
                }
                )
            }
    }
    )
}

Even though this is technically a recursive call, it's not a problem due to the asynchronous nature of the code.

Answer 2

Use animateKeyframes for a better chain animation experience

@IBAction func shakeHead(_ sender: UITapGestureRecognizer) {
        UIView.animateKeyframes(withDuration: animationDuration, delay: 0, options: [], animations: {
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.5) {
                self.faceView.transform = self.faceView.transform.rotated(by: self.shakeAngle)
            }
            
            UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
                self.faceView.transform = self.faceView.transform.rotated(by: -(self.shakeAngle)*2)
            }
            
            
            UIView.addKeyframe(withRelativeStartTime: 1.0, relativeDuration: 0.5) {
                self.faceView.transform = self.faceView.transform.rotated(by: self.shakeAngle)
            }
            
        }) { (isFinished) in
            shakeHead(sender)
        }
    }