CAShapeLayer 缩放动画的问题
Problem with scaling animation of CAShapeLayer
我为滑块的工具提示创建了简单的路径。我希望它在显示时具有动画效果,以便用户知道他可以拖动它。
但它没有动画:
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)
})
你能帮我做动画吗?
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)
我为滑块的工具提示创建了简单的路径。我希望它在显示时具有动画效果,以便用户知道他可以拖动它。
但它没有动画:
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)
})
你能帮我做动画吗?
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)