Создание стрелки анимации индикатора на iOS - PullRequest
Новая
       38

Создание стрелки анимации индикатора на iOS

0 голосов
/ 14 декабря 2018

Я пытаюсь добиться эффекта, аналогичного стрелке индикатора в приложении «Музыка» на iOS, когда вы прокручиваете определенную точку, она превращается из стрелки в одну строку.Ниже я привел замедленный пример.

Example animation

Я пытаюсь понять, что это за стрелка, которую я пытался использоватьдва повернуты UIView s как линии, расположенные вместе с ограничениями, и успешно создали анимацию, используя UIViewPropertyAnimator и ключевые кадры.Но, к сожалению, линии переходят друг на друга при переходе от стрелки к строке.

Я не уверен в правильном способе достижения этого примера.Любой толчок в правильном направлении для достижения этой цели будет высоко оценен.

1 Ответ

0 голосов
/ 14 декабря 2018

Самый простой способ - это анимировать путь CAShapeLayer.Это дает вам закругленные концы и митрэд присоединяются бесплатно.Вам нужен прямой путь и согнутый путь;переключаться с одного на другой.Прямой путь должен состоять из двух сегментов, чтобы соответствовать двум сегментам изогнутого пути.

Вот мой симулятор вашей анимации:

enter image description here

Вот конфигурация слоя формы и его путей: 

    let shape = CAShapeLayer()
    shape.frame = // ...        
    shape.lineCap = .round
    shape.lineJoin = .miter
    shape.lineWidth = 6
    shape.strokeColor = UIColor.gray.cgColor
    shape.fillColor = UIColor.clear.cgColor

    let p1 = UIBezierPath()
    p1.move(to: CGPoint(x:0, y:35))
    p1.addLine(to: CGPoint(x:20, y:35))
    p1.addLine(to: CGPoint(x:40, y:35))
    let straight = p1.cgPath

    let p2 = UIBezierPath()
    p2.move(to: CGPoint(x:0, y:25))
    p2.addLine(to: CGPoint(x:20, y:30))
    p2.addLine(to: CGPoint(x:40, y:25))
    let bent = p2.cgPath

Тогда нужно просто поменять path из shape между straight и bent по желанию.

...