这些动画通常如何在Swift / iOS中完成 - 请参阅图像

Question

为了创建与下图所示相似的动画，我需要学习什么？

是否可以列出所有涉及的技术，并可能快速处理如何完成此操作？

Answer 1

对于第一个动画，您可以使用CAShapeLayer和CABasic动画并设置关键路径动画 strokeEnd 我建立了完全相同的你可以查看此链接，下载并查看选项填充圈动画https://github.com/ajaykumar21091/AwesomeCustomAnimations-iOS/tree/master/SimpleCustomAnimations

编辑 -

这里的基本思想是使用bezeir路径绘制圆圈，并使用keyPath strokeEnd使用CABasicAnimation为shapeLayer设置动画。

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
}