在不使用CAShapeLayer的情况下对UIBezierPath的笔划进行划线，并为此笔划设置动画
UIBezierPath仅在drawRect() UIView内的override func draw(_ rect: CGRect)
{
let path = UIBezierPath()
let p0 = CGPoint(x: self.bounds.minX, y: self.bounds.midY)
path.move(to: p0)
let p1 = CGPoint(x: self.bounds.maxX, y: self.bounds.midY)
path.addLine(to: p1)
let dashes: [ CGFloat ] = [ 0.0, 16.0 ]
path.setLineDash(dashes, count: dashes.count, phase: 0.0)
path.lineWidth = 8.0
path.lineCapStyle = .round
UIColor.red.set()
path.stroke()
}
方法中使用时才会显示为虚线：
CAShapeLayer 
如果我想为这一行描边设置动画，我将需要像这样使用override func draw(_ rect: CGRect)
{
let path = UIBezierPath()
let p0 = CGPoint(x: self.bounds.minX, y: self.bounds.midY)
path.move(to: p0)
let p1 = CGPoint(x: self.bounds.maxX, y: self.bounds.midY)
path.addLine(to: p1)
let dashes: [ CGFloat ] = [ 0.0, 16.0 ]
path.setLineDash(dashes, count: dashes.count, phase: 0.0)
path.lineWidth = 8.0
path.lineCapStyle = .round
UIColor.red.set()
path.stroke()
let layer = CAShapeLayer()
layer.path = path.cgPath
layer.strokeColor = UIColor.black.cgColor
layer.lineWidth = 3
layer.fillColor = UIColor.clear.cgColor
layer.lineJoin = kCALineCapButt
self.layer.addSublayer(layer)
animateStroke(layer: layer)
}
func animateStroke(layer:CAShapeLayer)
{
let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
pathAnimation.duration = 10
pathAnimation.fromValue = 0
pathAnimation.toValue = 1
pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
layer.add(pathAnimation, forKey: "strokeEnd")
}
CAShapeLayer lineDashPattern的黑线已经动画了。
我需要的是，将虚线UIBezierpath添加到CAShapeLayer，以便我可以为其设置动画。
注意：我不想使用CAShapeLayer的{{1}}方法，因为我附加了多条路径，有些需要破折，有些则没有。
1 个答案:
答案 0 :(得分：1)
您不应该从draw(_:)调用动画。 draw(_:)用于渲染单个帧。
您说您不想使用lineDashPattern，但我个人会为每种模式使用不同的形状图层。所以，例如，这是一个动画，抚摸一条没有破折号模式的路径，用破折号模式抚摸另一条路径，并在完成第一条路径时触发第二条：
struct Stroke {
let start: CGPoint
let end: CGPoint
let lineDashPattern: [NSNumber]?
var length: CGFloat {
return hypot(start.x - end.x, start.y - end.y)
}
}
class CustomView: UIView {
private var strokes: [Stroke]?
private var strokeIndex = 0
private let strokeSpeed = 200.0
func startAnimation() {
strokes = [
Stroke(start: CGPoint(x: bounds.minX, y: bounds.midY),
end: CGPoint(x: bounds.midX, y: bounds.midY),
lineDashPattern: nil),
Stroke(start: CGPoint(x: bounds.midX, y: bounds.midY),
end: CGPoint(x: bounds.maxX, y: bounds.midY),
lineDashPattern: [0, 16])
]
strokeIndex = 0
animateStroke()
}
private func animateStroke() {
guard let strokes = strokes, strokeIndex < strokes.count else { return }
let stroke = strokes[strokeIndex]
let shapeLayer = CAShapeLayer()
shapeLayer.lineCap = kCALineCapRound
shapeLayer.lineDashPattern = strokes[strokeIndex].lineDashPattern
shapeLayer.lineWidth = 8
shapeLayer.strokeColor = UIColor.red.cgColor
layer.addSublayer(shapeLayer)
let path = UIBezierPath()
path.move(to: stroke.start)
path.addLine(to: stroke.end)
shapeLayer.path = path.cgPath
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = 0
animation.toValue = 1
animation.duration = Double(stroke.length) / strokeSpeed
animation.delegate = self
shapeLayer.add(animation, forKey: nil)
}
}
extension CustomView: CAAnimationDelegate {
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
guard flag else { return }
strokeIndex += 1
animateStroke()
}
}
如果你真的想使用draw(_:)方法，你就不会使用CABasicAnimation，而是可能会使用CADisplayLink，反复调用setNeedsDisplay()，并使用draw(_:)方法根据已经过了多长时间呈现视图。但draw(_:)呈现动画的单帧，不应启动任何CoreAnimation调用。
如果您真的不想使用形状图层，可以使用前面提到的CADisplayLink根据已用时间和所需持续时间更新完成百分比，并draw(_:)仅限笔画适合任何特定时刻的许多个别路径：
struct Stroke {
let start: CGPoint
let end: CGPoint
let length: CGFloat // in this case, because we're going call this a lot, let's make this stored property
let lineDashPattern: [CGFloat]?
init(start: CGPoint, end: CGPoint, lineDashPattern: [CGFloat]?) {
self.start = start
self.end = end
self.lineDashPattern = lineDashPattern
self.length = hypot(start.x - end.x, start.y - end.y)
}
}
class CustomView: UIView {
private var strokes: [Stroke]?
private let duration: CGFloat = 3.0
private var start: CFTimeInterval?
private var percentComplete: CGFloat?
private var totalLength: CGFloat?
func startAnimation() {
strokes = [
Stroke(start: CGPoint(x: bounds.minX, y: bounds.midY),
end: CGPoint(x: bounds.midX, y: bounds.midY),
lineDashPattern: nil),
Stroke(start: CGPoint(x: bounds.midX, y: bounds.midY),
end: CGPoint(x: bounds.maxX, y: bounds.midY),
lineDashPattern: [0, 16])
]
totalLength = strokes?.reduce(0.0) { $0 + $1.length }
start = CACurrentMediaTime()
let displayLink = CADisplayLink(target: self, selector: #selector(handleDisplayLink(_:)))
displayLink.add(to: .main, forMode: .commonModes)
}
@objc func handleDisplayLink(_ displayLink: CADisplayLink) {
percentComplete = min(1.0, CGFloat(CACurrentMediaTime() - start!) / duration)
if percentComplete! >= 1.0 {
displayLink.invalidate()
percentComplete = 1
}
setNeedsDisplay()
}
// Note, no animation is in the following routine. This just stroke your series of paths
// until the total percent of the stroked path equals `percentComplete`. The animation is
// achieved above, by updating `percentComplete` and calling `setNeedsDisplay`. This method
// only draws a single frame of the animation.
override func draw(_ rect: CGRect) {
guard let totalLength = totalLength,
let strokes = strokes,
strokes.count > 0,
let percentComplete = percentComplete else { return }
UIColor.red.setStroke()
// Don't get lost in the weeds here; the idea is to simply stroke my paths until the
// percent of the lengths of all of the stroked paths reaches `percentComplete`. Modify
// the below code to match whatever model you use for all of your stroked paths.
var lengthSoFar: CGFloat = 0
var percentSoFar: CGFloat = 0
var strokeIndex = 0
while lengthSoFar / totalLength < percentComplete && strokeIndex < strokes.count {
let stroke = strokes[strokeIndex]
let endLength = lengthSoFar + stroke.length
let endPercent = endLength / totalLength
let percentOfThisStroke = (percentComplete - percentSoFar) / (endPercent - percentSoFar)
var end: CGPoint
if percentOfThisStroke < 1 {
let angle = atan2(stroke.end.y - stroke.start.y, stroke.end.x - stroke.start.x)
let distance = stroke.length * percentOfThisStroke
end = CGPoint(x: stroke.start.x + distance * cos(angle),
y: stroke.start.y + distance * sin(angle))
} else {
end = stroke.end
}
let path = UIBezierPath()
if let pattern = stroke.lineDashPattern {
path.setLineDash(pattern, count: pattern.count, phase: 0)
}
path.lineWidth = 8
path.lineCapStyle = .round
path.move(to: stroke.start)
path.addLine(to: end)
path.stroke()
strokeIndex += 1
lengthSoFar = endLength
percentSoFar = endPercent
}
}
}
这实现了与第一个代码片段相同的效果，尽管它可能不会有任何效率。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？