Swift：沿着动画路径动画化物体

Question

Swift：沿着动画路径动画化物体

3

我希望能够制作一个小红点绕着一个脉冲扩大的圆旋转（从小到大再回到小），但似乎小红点始终绕着原始形状旋转，并没有考虑到正在扩大的圆形... 我在代码中有以下内容:

// MARK: - Properties

  private lazy var containerView = UIView()

  let littleCircleRadius: CGFloat = 10

  private lazy var littleRedDot: CALayer = {
    let layer = CALayer()
    layer.backgroundColor = UIColor.red.cgColor
    let littleDotSize = CGSize(width: 10, height: 10)
    layer.frame = CGRect(x: containerView.bounds.center.x - littleDotSize.width / 2,
                         y: containerView.bounds.center.y - littleCircleRadius - littleDotSize.width/2 ,
                         width: littleDotSize.width,
                         height: littleDotSize.height)
    return layer
  }()

 private lazy var littleCircleLayer: CAShapeLayer = {
    let layer = CAShapeLayer()
    layer.lineWidth = 1.5
    layer.lineCap = .round
    layer.strokeColor = UIColor.black.cgColor
    layer.fillColor = UIColor.clear.cgColor
    return layer
  }()

// MARK: - Setup
 func setup() {
    view.addSubview(containerView)
    containerView.frame = CGRect(x: 40, y: 200, width: 300, height: 300)
    containerView.backgroundColor = UIColor.gray.withAlphaComponent(0.2)

    littleCircleLayer.path = makeArcPath(arcCenter: containerView.bounds.center, radius: 10)
    containerView.layer.addSublayer(littleCircleLayer)
    containerView.layer.addSublayer(littleRedDot)
}

// MARK: - Animations
func animate() {
    CATransaction.begin()
    CATransaction.setAnimationDuration(1.5)
    animateLittleRedDotRotation()
    animateCircleExpanding()
    CATransaction.commit()
}

func animateLittleRedDotRotation() {
    let anim = CAKeyframeAnimation(keyPath: "position")
    anim.duration = 1.5
    anim.rotationMode = .rotateAuto
    anim.repeatCount = Float.infinity
    anim.path = littleCircleLayer.path
    littleRedDot.add(anim, forKey: "rotate")
}

func animateCircleExpanding() {
    let maxCircle = makeArcPath(arcCenter: containerView.bounds.center, radius: 100)
    let circleExpandingAnim = CABasicAnimation(keyPath: "path")
    circleExpandingAnim.fromValue = littleCircleLayer.path
    circleExpandingAnim.toValue = maxCircle
    circleExpandingAnim.repeatCount = Float.infinity
    circleExpandingAnim.duration = 1.5
    littleCircleLayer.add(circleExpandingAnim, forKey: "pulseCircuitAnimation")
}

这会产生以下效果：

但是我想让小点沿着扩张圆形路径旋转（当它从小圆变为大圆时），而不是原始的小圆路径。有什么意见吗？

- Peter Ševčík

更新小点的框架... - Jawad Ali

如果您能分享完整的类...我就可以重新创建并检查。 - Jawad Ali

这是我的游乐场的全部内容 https://gist.github.com/ZaweSK/7c9c06307593c64e2c22cde78e9aa6cd - Peter Ševčík

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob · Accepted Answer

使用CoreAnimation根据路径动画化红点的位置，假设路径不会改变。理论上，您可以定义一个螺旋路径，镜像扩展的圆形。个人而言，我会只使用CADisplayLink，这是一种专门为屏幕刷新设计的特殊定时器，并完全放弃CoreAnimation调用。例如：

func startDisplayLink() {
    let displayLink = CADisplayLink(target: self, selector: #selector(handleDisplayLink(_:)))
    displayLink.add(to: .main, forMode: .common)
}

@objc func handleDisplayLink(_ displayLink: CADisplayLink) {
    let percent = CGFloat(displayLink.timestamp).truncatingRemainder(dividingBy: duration) / duration
    let radius = ...
    let center = containerView.bounds.center
    circleLayer.path = makeArcPath(arcCenter: center, radius: radius)
    let angle = percent * .pi * 2
    let dotCenter = CGPoint(x: center.x + cos(angle) * radius, y: center.y + sin(angle) * radius)
    redDot.path = makeArcPath(arcCenter: dotCenter, radius: 5)
}

那将产生：

完整的示例：

class ViewController: UIViewController {

    private let radiusRange: ClosedRange<CGFloat> = 10...100
    private let duration: CGFloat = 1.5

    private lazy var containerView: UIView = {
        let containerView = UIView()
        containerView.translatesAutoresizingMaskIntoConstraints = false
        return containerView
    }()

    private lazy var redDot: CAShapeLayer = {
        let layer = CAShapeLayer()
        layer.fillColor = UIColor.red.cgColor
        return layer
    }()

    private lazy var circleLayer: CAShapeLayer = {
        let layer = CAShapeLayer()
        layer.lineWidth = 1.5
        layer.strokeColor = UIColor.black.cgColor
        layer.fillColor = UIColor.clear.cgColor
        return layer
    }()

    private weak var displayLink: CADisplayLink?

    override func viewDidLoad() {
        super.viewDidLoad()

        setup()
    }

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

    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        stopDisplayLink()
    }
}

// MARK: Private utility methods

private extension ViewController {
    func setup() {
        addContainer()

        containerView.layer.addSublayer(circleLayer)
        containerView.layer.addSublayer(redDot)
    }

    func addContainer() {
        view.addSubview(containerView)

        NSLayoutConstraint.activate([
            containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            containerView.topAnchor.constraint(equalTo: view.topAnchor),
            containerView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }

    func makeArcPath(arcCenter: CGPoint, radius: CGFloat) -> CGPath {
        UIBezierPath(arcCenter: arcCenter, radius: radius, startAngle: 0, endAngle: .pi * 2, clockwise: true).cgPath
    }
}

// MARK: - DisplayLink related methods

private extension ViewController {
    func startDisplayLink() {
        stopDisplayLink()  // stop existing display link, if any

        let displayLink = CADisplayLink(target: self, selector: #selector(handleDisplayLink(_:)))
        displayLink.add(to: .main, forMode: .common)
        self.displayLink = displayLink
    }

    func stopDisplayLink() {
        displayLink?.invalidate()
    }

    @objc func handleDisplayLink(_ displayLink: CADisplayLink) {
        let percent = CGFloat(displayLink.timestamp).truncatingRemainder(dividingBy: duration) / duration
        let radius = radiusRange.percent(percent)
        let center = containerView.bounds.center
        circleLayer.path = makeArcPath(arcCenter: center, radius: radius)
        let angle = percent * .pi * 2
        let dotCenter = CGPoint(x: center.x + cos(angle) * radius, y: center.y + sin(angle) * radius)
        redDot.path = makeArcPath(arcCenter: dotCenter, radius: 5)
    }
}

// MARK: - CGRect extension

extension CGRect {
    var center: CGPoint { return CGPoint(x: midX, y: midY) }
}

// MARK: - ClosedRange extension

extension ClosedRange where Bound: FloatingPoint {
    func percent(_ percent: Bound) -> Bound {
        (upperBound - lowerBound) * percent + lowerBound
    }
}