Как создать круговой загрузчик из изображения в swift - PullRequest
0 голосов
/ 05 сентября 2018

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

Итак, вот моя проблема, у меня круговой обратный отсчет, который в проекте, который я должен реализовать, использует сложное свечение, которое мне очень трудно воспроизвести, как показано на рисунке. Прогресс этого обратного отсчета показан этим свечением, прогрессирующим в течение 3 секунд по кругу.

Моей первоначальной мыслью было попытаться изменить UIView + Glow, чтобы свечение не менялось, но даже в этом случае я остановился бы, чтобы сделать UIView радиально скрытым.

Так что я сейчас думаю о простом экспорте внешнего свечения, которое делает индикатор выполнения в виде изображения, и радиального скрытия этого (что будет быстрее и проще сделать в конце, вместо того, чтобы пытаться сделать то же самое свечение вручную ).

Кто-нибудь знает, с чего мне начать поиск или что я должен делать, чтобы скрыть часть круглого изображения, используя углы / радиусы?

РЕДАКТИРОВАТЬ: вот как выглядит свечение, наложенное на круглую метку (черный круг), которая используется для отображения значения обратного отсчета.

enter image description here

1 Ответ

0 голосов
/ 05 сентября 2018

Сначала я хотел бы поблагодарить @ Carpsen90 за помощь, хотя его ответ не был тем, что я искал, он помог мне понять, как использовать CABasicAnimation и в сочетании с вдохновением от этот ответ Я нашел решение своей проблемы, используя изображение и CAShapeLayer

для тех, кому интересно, что я сделал, вот код, который я использовал

// countdownGlow is the glow (white and red part of my image)
func animateMask() {
        let arcPath = CGMutablePath()
        arcPath.move(to: CGPoint(x: self.countdownGlow.frame.width / 2, y: 0))
        arcPath.addArc(center: CGPoint(x: self.countdownGlow.frame.width / 2, y: self.countdownGlow.frame.width / 2), radius: self.countdownGlow.frame.width / 2, startAngle: CGFloat(-1 * Double.pi / 2), endAngle: CGFloat(-3 * Double.pi / 2), clockwise: false)
        arcPath.addArc(center: CGPoint(x: self.countdownGlow.frame.width / 2, y: self.countdownGlow.frame.width / 2), radius: self.countdownGlow.frame.width / 2, startAngle: CGFloat(-3 * Double.pi / 2), endAngle: CGFloat(-5 * Double.pi / 2), clockwise: false)
        let ringLayer = CAShapeLayer(layer: self.countdownGlow.layer)
        ringLayer.path = arcPath

        ringLayer.strokeEnd = 0.0
        ringLayer.fillColor = UIColor.clear.cgColor
        ringLayer.strokeColor = UIColor.black.cgColor
        ringLayer.lineWidth = self.countdownGlow.frame.width / 2

        self.countdownGlow.layer.mask = ringLayer
        self.countdownGlow.layer.mask?.frame = self.countdownGlow.layer.bounds

        let swipe = CABasicAnimation(keyPath: "strokeEnd")
        swipe.duration = 3
        swipe.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        swipe.fillMode = kCAFillModeForwards
        swipe.isRemovedOnCompletion = true
        swipe.toValue = 1.0
        ringLayer.add(swipe, forKey: "strokeEnd")
}

Кажется, я просто не могу сказать, что моя дуга была полным кругом, поэтому я однажды прошел половину круга, а затем еще один полукруг, который сработал

Если у вас есть какие-либо улучшения, я с радостью их опробую, потому что я уверен, что мое решение вообще не оптимизировано

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...