问圆动画滞后
EN

Stack Overflow用户

提问于 2018-06-24 15:44:59

回答 1查看 108关注 0票数 0

我正在用iOS制作一个圆动画，它看起来像这样：

Circle animation video link

在此动画中，当圆重复动画时，它会滞后于动画之间。我想让这个动画更流畅。

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

//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

        let alphaAnimation = CABasicAnimation.init(keyPath: "opacity")
        alphaAnimation.fromValue = 0.75
        alphaAnimation.toValue = 0.0

        let combinedAnim = CAAnimationGroup.init()
        combinedAnim.animations = [pathAnim, alphaAnimation]
        combinedAnim.isRemovedOnCompletion = false
        combinedAnim.repeatCount = .infinity
//        combinedAnim.speed = 0.2
        combinedAnim.duration = 1.0
        combinedAnim.fillMode = kCAFillModeBoth

        return combinedAnim
    }

我怎样才能使这个动画流畅而没有任何延迟？

任何帮助都将不胜感激。谢谢!

swift

animation

geometry

ios

回答 1

Stack Overflow用户

发布于 2018-06-24 17:21:41

我唯一的建议是使单个动画与组动画的持续时间相同，以便它们在重复次数和持续时间上匹配。我修改了不透明度，使其具有关键帧。持续时间的不同可能导致了您的口吃或滞后。

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
    }

}