Обводка UIBezierPath без использования CAShapeLayer и анимация этой обводки

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 анимирована.

введите здесь описание изображения

Что мне нужно, так это добавить пунктирный UIBezierpath в CAShapeLayer, чтобы я мог его анимировать.

Примечание. Я не хочу использовать метод CAShapeLayer lineDashPattern, так как я добавляю несколько путей, некоторые из которых должны быть зачеркнуты, а некоторые нет.


person Ayman Ibrahim    schedule 09.12.2017    source источник
comment
используйте несколько CAshapelayers, если вы не хотите использовать общие атрибуты по путям.   -  person Josh Homann    schedule 09.12.2017
comment
Это то, что я использую в настоящее время, но, поскольку у меня есть несколько CAShapelayers, представляющих мой путь, у меня возникают трудности с настройкой продолжительности каждого пути, анимация всего пути не очень плавная @JoshHomann   -  person Ayman Ibrahim    schedule 09.12.2017


Ответы (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
        }
    }
}

Это дает тот же эффект, что и первый фрагмент кода, хотя, вероятно, он не будет таким же эффективным.

person Rob    schedule 10.12.2017