Swift UIView倾斜动画问题：UIImageView无法实现指定旋转效果

我看你这段代码里有几个关键问题导致没达到预期效果，咱们一步步来修正：

首先，Core Animation里的transform.rotation属性认的是弧度，不是你写的度数；其次，你只做了从0到20度的旋转动画，没加回正的过程；最后，动画结束后默认会跳回初始状态，得调整几个动画参数来保证流程顺畅。

下面给你两种好用的实现方式：

方式一：自动反转动画（最简单） #

直接让动画先正向旋转，然后自动反向执行回正，代码量最少：

extension UIView {
    func rotateAndReset(duration: CFTimeInterval = 2) {
        let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
        // 把20度转换成Core Animation认的弧度
        rotateAnimation.toValue = CGFloat.pi * 20 / 180
        rotateAnimation.duration = duration / 2 // 旋转占一半时间，回正占另一半
        rotateAnimation.autoreverses = true // 开启自动反向动画
        rotateAnimation.repeatCount = 1 // 只跑一次旋转+回正
        rotateAnimation.fillMode = .forwards
        rotateAnimation.isRemovedOnCompletion = false
        
        layer.add(rotateAnimation, forKey: "rotateAndReset")
    }
}

调用的时候直接写yourImageView.rotateAndReset()就行，想调整速度就传个duration参数，比如rotateAndReset(duration: 1)就是1秒完成整个旋转回正过程。

方式二：动画组精细控制 #

如果需要分别调整旋转和回正的时长、动画曲线，就用动画组把两段动画拼起来：

extension UIView {
    func rotateAndReset(duration: CFTimeInterval = 2) {
        // 第一段：向右旋转20度
        let rotateForward = CABasicAnimation(keyPath: "transform.rotation.z")
        rotateForward.fromValue = 0
        rotateForward.toValue = CGFloat.pi * 20 / 180
        rotateForward.duration = duration / 2
        
        // 第二段：从20度回正到初始状态
        let rotateBack = CABasicAnimation(keyPath: "transform.rotation.z")
        rotateBack.fromValue = CGFloat.pi * 20 / 180
        rotateBack.toValue = 0
        rotateBack.duration = duration / 2
        rotateBack.beginTime = duration / 2 // 等第一段结束再开始
        
        // 把两段动画组合起来
        let animationGroup = CAAnimationGroup()
        animationGroup.animations = [rotateForward, rotateBack]
        animationGroup.duration = duration
        animationGroup.fillMode = .forwards
        animationGroup.isRemovedOnCompletion = false
        
        layer.add(animationGroup, forKey: "rotateGroup")
    }
}

小提醒 #

• 用transform.rotation.z明确指定绕Z轴旋转（就是咱们2D界面里的平面旋转），避免系统误解成其他轴的旋转
• 如果动画结束后不需要保留任何旋转状态，也可以去掉fillMode和isRemovedOnCompletion，动画结束后视图会自动回到初始状态，不影响后续操作

内容的提问来源于stack exchange，提问作者Nathan C