通过 transform.scale 属性动画化 CAShapeLayer 的路径

Question

我正在尝试为具有圆形路径（兼容游乐场）的 CAShapeLayer 的比例设置动画：

import UIKit
import PlaygroundSupport

let view = UIView(frame: CGRect(origin: .zero, size: CGSize(width: 200, height: 200)))
view.backgroundColor = .white

let animation = CABasicAnimation(keyPath: "transform.scale")
animation.duration = 1
animation.fromValue = 0
animation.toValue = 1
animation.autoreverses = true
animation.repeatCount = .greatestFiniteMagnitude

let frame = CGRect(origin: CGPoint(x: 40, y: 40), size: CGSize(width: 30, height: 30))
let path = CGPath(ellipseIn: frame, transform: nil)

let layer = CAShapeLayer()
layer.frame = frame
layer.path = path
layer.backgroundColor = UIColor.blue.cgColor
layer.fillColor = UIColor.red.cgColor

view.layer.addSublayer(layer)
layer.add(animation, forKey: nil)

PlaygroundPage.current.liveView = view

结果如下：

红色圆圈是我试图在其位置中心使用比例动画制作动画且没有任何平移的图形。这个圈子设置为CGPath到CAShapeLayer.

问题很明显 – 我的 CAShapeLayer 具有蓝色背景颜色的动画效果如预期，但路径 – 不是。

我是不是错过了什么，或者这就是它的工作方式？也许这个动画应该以不同的方式来完成？

Answer 1

如果我的理解是正确的，你需要的是边界而不是框架。

let frame = CGRect(origin: CGPoint(x: 40, y: 40), size: CGSize(width: 30, height: 30))

应该是：

let bounds = CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: 30, height: 30))
let path = CGPath(ellipseIn: bounds, transform: nil)

希望是你需要的。

通过 transform.scale 属性动画化 CAShapeLayer 的路径

Animate CAShapeLayer's path by transform.scale property

cashapelayer

cgpath

swift

通过 transform.scale 属性 动画化 CAShapeLayer 的路径

Animate CAShapeLayer's path by transform.scale property

cashapelayer

cgpath

swift

通过 transform.scale 属性动画化 CAShapeLayer 的路径