我正在尝试实现一个类似于你在图像上看到的动画:
我使用Core Graphics和Core Animation与UIBezierPath
来实现这一点,但问题似乎是与开始和结束CGPath
(strokeStart
总是需要小于strokeEnd
,所以蛇将不会动画通过点的路径关闭)。在这方面花了太多时间之后,我开始想,也许我在工作中使用了错误的工具,任何提示都是欢迎的。
下面是我用来生成图像的代码示例:
func animate() {
let centerRectInRect = {(rect: CGRect, bounds: CGRect) -> CGRect in
return CGRect(x: bounds.origin.x + ((bounds.width - rect.width) / 2.0),
y: bounds.origin.y + ((bounds.height - rect.height) / 2.0),
width: rect.width,
height: rect.height)
}
let shapeLayer = CAShapeLayer()
shapeLayer.frame = centerRectInRect(CGRect(x: 0.0, y: 0.0, width: 200.0, height: 200.0), self.view.bounds)
self.view.layer.addSublayer(shapeLayer)
shapeLayer.strokeStart = 0.0
shapeLayer.strokeEnd = 1.0
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.fillColor = UIColor.orange.withAlphaComponent(0.2).cgColor
shapeLayer.lineWidth = 12.0
let rect = shapeLayer.bounds
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 16, height: 16))
path.append(UIBezierPath(roundedRect: rect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 16, height: 16)))
shapeLayer.path = path.cgPath
let strokeStartAnim = CAKeyframeAnimation(keyPath: "strokeStart")
strokeStartAnim.values = [0, 1]
strokeStartAnim.keyTimes = [0, 1]
strokeStartAnim.duration = 12.0
strokeStartAnim.beginTime = 1.0
strokeStartAnim.repeatCount = .infinity
strokeStartAnim.calculationMode = .paced
let strokeEndAnim = CAKeyframeAnimation(keyPath: "strokeEnd")
strokeEndAnim.values = [0, 1]
strokeEndAnim.keyTimes = [0, 1]
strokeEndAnim.duration = 12.0
strokeEndAnim.repeatCount = .infinity
strokeEndAnim.calculationMode = .paced
let groupAnim = CAAnimationGroup()
groupAnim.animations = [strokeStartAnim, strokeEndAnim]
groupAnim.isRemovedOnCompletion = false
groupAnim.fillMode = .forwards
groupAnim.duration = .greatestFiniteMagnitude
shapeLayer.add(groupAnim, forKey: "AnimateSnake")
}
2条答案
按热度按时间yks3o0rb1#
我终于实现了我想要的。我不认为这是可能做到这一点,只有一个层,所以我用了2层,并旋转第二层180度,然后同步动画,使他们重叠的效果,只有一个中风的动画。奖金线上限可以从
CAShapeLayerLineCap
中选择。你可以这样使用它:
结果:
30byixjq2#
另一种方法,如果你想试试...
使用一个1/4“饼形楔形”作为一个遮罩的边界,圆角形状层,并旋转饼形楔形层。
请注意,这里看到的“跳跃”只是因为录音在重复。
四分之一“饼形楔形”形状层:
设置为遮罩时:
示例视图子类: