Swift 4中使用UIBezierPath实现3张图片不同位置360度旋转

没问题，我帮你调整代码，实现3张不同图片在圆周上不同初始位置同步做360度旋转的效果。核心是给每张图片创建独立的运动路径和旋转动画，让它们从圆周的不同起点出发，同时保持自身旋转：

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 圆周的中心和半径，统一设置方便调整
        let circleCenter = CGPoint(x: view.frame.midX, y: view.frame.midY)
        let circleRadius: CGFloat = 120
        
        // 创建三张不同的旋转图片，分别设置不同的初始角度
        let moonView = createOrbitingImageView(imageName: "moon.png", center: circleCenter, radius: circleRadius, startAngle: 0)
        let sunView = createOrbitingImageView(imageName: "sun.png", center: circleCenter, radius: circleRadius, startAngle: CGFloat(Double.pi * 2 / 3))
        let starView = createOrbitingImageView(imageName: "star.png", center: circleCenter, radius: circleRadius, startAngle: CGFloat(Double.pi * 4 / 3))
        
        view.addSubview(moonView)
        view.addSubview(sunView)
        view.addSubview(starView)
    }
    
    /// 封装创建圆周旋转图片的方法
    /// - Parameters:
    ///   - imageName: 图片名称
    ///   - center: 圆周中心
    ///   - radius: 圆周半径
    ///   - startAngle: 初始位置角度
    /// - Returns: 带动画的图片视图
    private func createOrbitingImageView(imageName: String, center: CGPoint, radius: CGFloat, startAngle: CGFloat) -> UIImageView {
        // 创建图片视图
        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
        imageView.image = UIImage(named: imageName)
        // 设置初始位置，对应圆周上的起始角度
        let startX = center.x + radius * cos(startAngle) - imageView.frame.width/2
        let startY = center.y + radius * sin(startAngle) - imageView.frame.height/2
        imageView.center = CGPoint(x: startX, y: startY)
        
        // 1. 创建圆周运动路径动画
        let circlePath = UIBezierPath(arcCenter: center,
                                      radius: radius,
                                      startAngle: startAngle,
                                      endAngle: startAngle + CGFloat(Double.pi * 2),
                                      clockwise: true)
        let positionAnimation = CAKeyframeAnimation(keyPath: "position")
        positionAnimation.duration = 5
        positionAnimation.repeatCount = .infinity
        positionAnimation.path = circlePath.cgPath
        positionAnimation.calculationMode = .paced // 保证运动速度均匀
        
        // 2. 创建自身旋转动画
        let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
        rotationAnimation.fromValue = 0
        rotationAnimation.toValue = CGFloat(Double.pi * 2)
        rotationAnimation.duration = 5
        rotationAnimation.repeatCount = .infinity
        
        // 给图片图层添加两个动画
        imageView.layer.add(positionAnimation, forKey: "orbitingAnimation")
        imageView.layer.add(rotationAnimation, forKey: "rotationAnimation")
        
        return imageView
    }
}

关键改动说明： #

• 封装复用方法：把创建图片、设置动画的逻辑封装成createOrbitingImageView，避免重复代码，也方便后续扩展更多图片
• 不同初始位置：通过startAngle参数给三张图片设置了0、120°、240°的初始角度，让它们在圆周上均匀分布
• 同步自身旋转：添加了transform.rotation.z的基础动画，让图片在绕圆周运动的同时自身也做360度旋转，和圆周运动的时长保持一致，保证同步性
• 均匀运动速度：给位置动画设置calculationMode = .paced，避免路径动画在转角处出现速度变化

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