Как эти анимации обычно выполняются в Swift/iOS - см. Изображение

Question

Что мне нужно для изучения, чтобы создать похожие анимации для тех, которые показаны на следующем рисунке?

Может ли кто-нибудь перечислить все связанные технологии и, возможно, быстрый процесс относительно того, как это делается?

Answer 1

Для первой анимации вы можете использовать CAShapeLayer и CABasic анимацию и анимации ключевого пути strokeEnd Я построил точно так же вы можете посмотреть по этой ссылке, скачать и посмотреть опцию заливку окружности анимации https://github.com/ajaykumar21091/AwesomeCustomAnimations-iOS/tree/master/SimpleCustomAnimations

Редактировать -

Основная идея здесь состоит в том, чтобы нарисовать круг, используя путь bezeir и анимировать shapeLayer с помощью CABas icAnimation с использованием keyPath strokeEnd.

override func drawRect(rect: CGRect) { 

    self.drawBezierWithStrokeColor(circleColor.CGColor, 
     startAngle: 0, 
     endAngle: 360, 
     animated: false) 
    self.drawBezierWithStrokeColor(self.fillColor.CGColor, 
     startAngle: 0, 
     endAngle: (((2*CGFloat(M_PI))/100) * CGFloat(percentage)), 
     animated: true) 
} 

    //helper methods. 
private func drawBezierWithStrokeColor(color:CGColor, startAngle:CGFloat, endAngle:CGFloat, animated:Bool) { 

    let bezier:CAShapeLayer = CAShapeLayer() 
    bezier.path    = bezierPathWithStartAngle(startAngle, endAngle: endAngle).CGPath 
    bezier.strokeColor  = color 
    bezier.fillColor  = UIColor.clearColor().CGColor 
    bezier.lineWidth  = bounds.width * 0.18 

    self.layer.addSublayer(bezier) 

    if (animated) { 

     let animatedStrokeEnd:CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd"); 
     animatedStrokeEnd.duration    = (2.0/100)*Double(percentage); 
     animatedStrokeEnd.fromValue   = NSNumber(float: 0.0); 
     animatedStrokeEnd.toValue    = NSNumber(float: 1.0); 
     animatedStrokeEnd.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn) 

     bezier.addAnimation(animatedStrokeEnd, forKey: "strokeEndAnimation"); 
    } 
} 

private func bezierPathWithStartAngle(startAngle:CGFloat, endAngle:CGFloat) -> UIBezierPath { 

    let center   = CGPoint(x:bounds.width/2, y: bounds.height/2) 
    let radius   = max(bounds.width, bounds.height) 
    let arcWidth  = bounds.width * 0.25 
    let path   = UIBezierPath(arcCenter : center, 
             radius  : radius/2 - arcWidth/2, 
             startAngle : startAngle, 
             endAngle : endAngle , 
             clockwise : true) 
    return path 
}