CAShapeLayer的缩放动画问题[重复]

Posted 2023-02-24

【中文标题】CAShapeLayer的缩放动画问题[重复]

【英文标题】：Problem with scaling animation of CAShapeLayer [duplicate]

【发布时间】：2020-11-23 15:15:11

【问题描述】：

我为滑块的工具提示创建了简单的路径。我希望它在显示时进行动画处理，以便用户知道他可以拖动它。

但它没有动画：

let upperToolTipPath: CAShapeLayer = CAShapeLayer()
            var path = UIBezierPath(roundedRect: CGRect(x: 0,y: 0, width: 65, height: 30), cornerRadius: 3)
            path.stroke()
            path.move(to: CGPoint(x: 50, y: 10))
            path.addLine(to: CGPoint(x: 40, y: 30))
            path.addLine(to: CGPoint(x: 15, y: 10))
            upperToolTipPath.path = path.cgPath
            self.layer.insertSublayer(upperToolTipPath, at: 0)
UIView.animate( 
                withDuration: 5,
                delay: 3,
                options: [.repeat, .autoreverse, .curveEaseIn],
                animations: 
                    self.upperToolTipPath.transform = CATransform3DMakeScale(2, 2, 1)
                    )

你能帮我做动画吗？

【参考方案1】：

UIView.animate 用于 view 动画。但是upperToolTipPath 是一个层；它不是视图的主要层，因此只能使用 layer 动画对其进行动画处理。这意味着核心动画，即 CABasicAnimation。

所以要制作您想要制作的动画，您需要使用 Core Animation。

或者，您可以制作一个将形状图层作为其主要图层的视图。然后你就可以使用视图动画了。

但我认为在这种情况下使用 Core Animation 会更好。这是我认为你正在尝试做的事情的一个例子：

let upperToolTipPath = CAShapeLayer()
upperToolTipPath.frame = CGRect(x: 0,y: 0, width: 65, height: 30)
let path = UIBezierPath(roundedRect: CGRect(x: 0,y: 0, width: 65, height: 30), 
    cornerRadius: 3)
upperToolTipPath.fillColor = UIColor.clear.cgColor
upperToolTipPath.strokeColor = UIColor.black.cgColor
upperToolTipPath.path = path.cgPath
self.layer.insertSublayer(upperToolTipPath, at: 0)
let b = CABasicAnimation(keyPath: #keyPath(CALayer.transform))
b.duration = 5
b.beginTime = CACurrentMediaTime() + 3
b.toValue = CATransform3DMakeScale(2, 2, 1)
b.repeatCount = .greatestFiniteMagnitude
b.autoreverses = true
upperToolTipPath.add(b, forKey:nil)

【讨论】：

此代码还有许多其他问题。它在哪里？你不能在茫茫人海中说path.stroke()；您必须在视图的 draw(_:) 实现中。但是你不能在draw(_:) 实现中添加层；你唯一可以做的就是draw。

另外，您的绘图毫无意义，因为形状图层的默认填充颜色是黑色，因此填充圆角矩形的黑色会遮盖您正在绘制的其他绘图。

感谢您的评论 :) 我是图层和动画领域的初学者。

另一个问题是您的图层没有大小。所以在任何情况下它都不会正确动画。

添加了代码来说明你需要学习做的事情的排序。