iOS: увеличить анимацию нажатием кнопки - PullRequest
Новая
       36

iOS: увеличить анимацию нажатием кнопки

0 голосов
/ 09 ноября 2018

У меня есть следующая анимация, мне нужно реализовать код, нажимая на кнопку, анимация увеличивается на единицу до значения, которого я хочу достичь.

Я пробую следующий код: 

    let strokeIt = CABasicAnimation(keyPath: "strokeEnd")
    let timeLeftShapeLayer = CAShapeLayer()
    let bgShapeLayer = CAShapeLayer()



 override func viewDidLoad() {
        drawBgShape()
        drawTimeLeftShape()
      }


func drawBgShape() {
    bgShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: view.frame.midX , y: view.frame.midY), radius:
        100, startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
    bgShapeLayer.strokeColor = UIColor.white.cgColor
    bgShapeLayer.fillColor = UIColor.clear.cgColor
    bgShapeLayer.lineWidth = 15
    view.layer.addSublayer(bgShapeLayer)
}

func drawTimeLeftShape() {
    timeLeftShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: view.frame.midX , y: view.frame.midY), radius:
        100, startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true).cgPath
    timeLeftShapeLayer.strokeColor = UIColor.red.cgColor
    timeLeftShapeLayer.fillColor = UIColor.clear.cgColor
    timeLeftShapeLayer.lineWidth = 15
    view.layer.addSublayer(timeLeftShapeLayer)
}

и при нажатии кнопки: 

     var x = 0.0
    @IBAction func click(_ sender: Any) {

        strokeIt.fromValue = x
        strokeIt.toValue = x + 0.1

        strokeIt.duration = 0.25
        timeLeftShapeLayer.add(strokeIt, forKey: nil)
        x = x + 0.1
}

Как мне этого добиться? enter image description here

1 Ответ

0 голосов
/ 09 ноября 2018

Вам не нужно использовать явную анимацию для достижения этой цели.

Для некоторых свойств CALayer Core Animation добавит неявную анимацию для вас. Свойство strokeEnd является одним из них.

Это означает, что Core Animation автоматически оживляет любые изменения свойства strokeEnd слоя. Вам не нужно создавать анимационный объект и добавлять его самостоятельно.

Есть несколько вещей, которые вы должны изменить в своей реализации, чтобы она заработала.

1) Фоновый круг, похожий на опубликованное вами изображение, должен иметь серый strokeColor в вашей функции drawBgShape: 

bgShapeLayer.strokeColor = UIColor.lightGray.cgColor

2) strokeEnd для timeLeftShapeLayer должно быть установлено на 0.0 в качестве начального значения в вашей функции drawTimeLeftShape. 

 timeLeftShapeLayer.strokeEnd = 0.0

3) Удалите свойство strokeIt animation из вашего класса, оно вам не нужно.

4) Обновите функцию click, чтобы постепенно увеличивать свойство strokeEnd timeLeftShapeLayer напрямую. Это одна простая строка кода: 

timeLeftShapeLayer.strokeEnd += 0.1

Вот пример реализации: 

class ViewController: UIViewController {

    let timeLeftShapeLayer = CAShapeLayer()
    let bgShapeLayer = CAShapeLayer()

    override func viewDidLoad() {
        super.viewDidLoad()
        drawBgShape()
        drawTimeLeftShape()
    }

    func drawBgShape() {
        bgShapeLayer.path = UIBezierPath(
            arcCenter: CGPoint(x: view.frame.midX , y: view.frame.midY),
            radius: 100,
            startAngle: -90.degreesToRadians,
            endAngle: 270.degreesToRadians,
            clockwise: true
        ).cgPath
        bgShapeLayer.strokeColor = UIColor.lightGray.cgColor
        bgShapeLayer.fillColor = UIColor.clear.cgColor
        bgShapeLayer.lineWidth = 15
        view.layer.addSublayer(bgShapeLayer)
    }

    func drawTimeLeftShape() {
        timeLeftShapeLayer.path = UIBezierPath(
            arcCenter: CGPoint(x: view.frame.midX , y: view.frame.midY),
            radius: 100,
            startAngle: -90.degreesToRadians,
            endAngle: 270.degreesToRadians,
            clockwise: true
        ).cgPath
        timeLeftShapeLayer.strokeColor = UIColor.red.cgColor
        timeLeftShapeLayer.fillColor = UIColor.clear.cgColor
        timeLeftShapeLayer.lineWidth = 15
        timeLeftShapeLayer.strokeEnd = 0.0
        view.layer.addSublayer(timeLeftShapeLayer)
    }

    @IBAction func click(_ sender: Any) {
        timeLeftShapeLayer.strokeEnd += 0.1
    }


}
...