这些动画通常如何在 Swift / iOS 中完成 - 参见图片

Question

我需要学习什么才能创建类似于下图所示的动画？

有人可以列出所有涉及的技术，并可能列出有关如何完成这项工作的快速流程吗？

Answer 1

对于第一个动画，您可以使用 CAShapeLayer 和 CABasic Animation 以及动画键路径 strokeEnd 我构建的完全相同你可以看看这个 link，下载并查看选项 Fill circle animation https://github.com/ajaykumar21091/AwesomeCustomAnimations-iOS/tree/master/SimpleCustomAnimations

编辑 -

这里的基本思想是使用 bezeir 路径绘制圆并使用 CABasicAnimation 和 keyPath strokeEnd 为 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
}

这些动画通常如何在 Swift / iOS 中完成 - 参见图片

How are these animations typically done in Swift / iOS - See image

core-animation

core-graphics

ios

swift