Question

我正在iOS中制作圆形动画，如下所示：

在此动画中，当圆圈重复动画时，它位于动画之间。我想使这个动画流畅。

我使用的是清晰视图，在其中添加了圆形图层。下面是创建圆形图层的代码：

undefined

以下是动画圆形图层的代码：

//Create circle shape layer
func setupCircle(frame: CGRect, strokeColor: CGColor)->CAShapeLayer {

    let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.height/2, y: frame.size.height/2), radius: CGFloat((frame.size.height/2)-25), startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), clockwise: true)

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = circlePath.cgPath

    //change the fill color
    shapeLayer.fillColor = UIColor.clear.cgColor
    //you can change the stroke color
    shapeLayer.strokeColor = strokeColor
    //you can change the line width
    shapeLayer.lineWidth = 3.0

    return shapeLayer
}

如何使该动画流畅无延迟？

任何帮助将不胜感激。谢谢！

Answer 1

我唯一的建议是使各个动画与组的持续时间相同，以便它们在重复计数和持续时间上匹配。我将不透明度修改为具有关键帧。持续时间的差异可能是造成口吃或延迟的原因。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        let shapeLayer = self.setupCircle(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width/2, height: self.view.bounds.width/2), strokeColor: UIColor.blue.cgColor)

        let sub = UIView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width/2, height: self.view.bounds.width/2))
        shapeLayer.frame = sub.bounds
        sub.layer.addSublayer(shapeLayer)
        sub.center = self.view.center
        self.view.addSubview(sub)


        let anim = self.getAnimationForCircle(frame: shapeLayer.frame)
        shapeLayer.add(anim, forKey: nil)
    }



    //Create circle shape layer
    func setupCircle(frame: CGRect, strokeColor: CGColor)->CAShapeLayer {

        let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.height/2, y: frame.size.height/2), radius: CGFloat((frame.size.height/2)-25), startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), clockwise: true)

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = circlePath.cgPath

        //change the fill color
        shapeLayer.fillColor = UIColor.clear.cgColor
        //you can change the stroke color
        shapeLayer.strokeColor = strokeColor
        //you can change the line width
        shapeLayer.lineWidth = 3.0

        return shapeLayer
    }

    //Add animation to circle layer
    func getAnimationForCircle(frame: CGRect) -> CAAnimation {

        let newPath = UIBezierPath(arcCenter: CGPoint(x: frame.size.height/2, y: frame.size.height/2), radius: CGFloat((frame.size.height/2)+25), startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), clockwise: true)

        let pathAnim = CABasicAnimation.init(keyPath: "path")
        pathAnim.toValue = newPath.cgPath
        pathAnim.duration = 1.0

        let alphaAnimation = CAKeyframeAnimation.init(keyPath: "opacity")
        alphaAnimation.values = [0,0.75,0,0]
        alphaAnimation.keyTimes = [0,0.1,0.87,1]
        alphaAnimation.duration = 1.0

        let combinedAnim = CAAnimationGroup.init()
        combinedAnim.animations = [pathAnim, alphaAnimation]
        combinedAnim.isRemovedOnCompletion = false
        combinedAnim.repeatCount = .infinity

        combinedAnim.duration = 1.0
        combinedAnim.fillMode = kCAFillModeBoth

        return combinedAnim
    }

}

圆动画滞后

1 个答案: