动画将原始图像保留在最后答案

【问题标题】：Animation keeps the original image at the end动画将原始图像保留在最后
【发布时间】：2016-09-05 10:41:19
【问题描述】：

我想创建一个圆圈消失的动画，我做了以下代码（基于我在互联网上找到的其他代码）。

class CircleView: UIView {
    private var circleLayer: CAShapeLayer?

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.commonInit()
    }

   required init?(coder aDecoder: NSCoder) {
       super.init(coder: aDecoder)
       self.commonInit()
    }

    func commonInit() {
        self.tintColor = UIColor.lightGrayColor()
        self.backgroundColor = UIColor.clearColor()
    }

    override func drawRect(rect: CGRect) {
        super.drawRect(rect)
        self.drawCircle()
        self.addCircleAnimation()
     }

     func drawCircle() {
         let size:CGFloat = CGFloat(100)
         self.circleLayer?.removeFromSuperlayer()
         self.circleLayer = CAShapeLayer()
         self.circleLayer?.frame = self.bounds
         let radius = size / 2;
         let path = UIBezierPath(arcCenter: CGPointMake(size / 2, size / 2), radius: radius, startAngle: -CGFloat(M_PI) / 4, endAngle: 2 * CGFloat(M_PI) - CGFloat(M_PI) / 4, clockwise: true)
         self.circleLayer?.path = path.CGPath
         self.circleLayer?.fillColor = UIColor.clearColor().CGColor
         self.circleLayer?.strokeColor = self.tintColor.CGColor
         self.circleLayer?.lineWidth = CGFloat(2.0)
         self.circleLayer?.rasterizationScale = 2.0 * UIScreen.mainScreen().scale
         self.circleLayer?.shouldRasterize = true

         self.layer.addSublayer(self.circleLayer!)
      }



      func addCircleAnimation() {

           let animation = CABasicAnimation(keyPath: "strokeStart")
           animation.fromValue = 0.0
           animation.toValue = 1.0

           animation.duration = CFTimeInterval(floatLiteral: 1)
           animation.removedOnCompletion = false
           animation.fillMode = kCAFillModeBackwards
           animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

           animation.beginTime = CACurrentMediaTime()
           animation.delegate = self
           self.circleLayer?.addAnimation(animation, forKey:"strokeStart")

      }
   }

但是，当动画结束时，它会离开原来的圆圈，即使我用animationDidStop 检测到它仍然有闪烁的效果。这段代码有什么问题？

【问题讨论】：

你可以在animationDidStop中去掉circleLayer，动画完成后圆圈会消失。你可以试试下面答案中的代码
我发现了问题，而不是使用kCAFillModeBackwards，我不得不使用kCAFillModeForwards。但是，由于我不知道原因，我将掩盖正确答案以获得更好的解释。

标签： ios core-animation uibezierpath

【解决方案1】：

去除圆圈层的代码：

class CircleView: UIView {
    private var circleLayer: CAShapeLayer?

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.commonInit()
    }

    func commonInit() {
        self.tintColor = UIColor.lightGrayColor()
        self.backgroundColor = UIColor.clearColor()
    }

    override func drawRect(rect: CGRect) {
        super.drawRect(rect)
        self.drawCircle()
        self.addCircleAnimation()
    }
    override func animationDidStop(anim: CAAnimation, finished flag: Bool)
    {
        self.circleLayer?.removeFromSuperlayer()
    }

    func drawCircle() {
        let size:CGFloat = CGFloat(100)
        self.circleLayer?.removeFromSuperlayer()
        self.circleLayer = CAShapeLayer()
        self.circleLayer?.frame = self.bounds
        let radius = size / 2;
        let path = UIBezierPath(arcCenter: CGPointMake(size / 2, size / 2), radius: radius, startAngle: -CGFloat(M_PI) / 4, endAngle: 2 * CGFloat(M_PI) - CGFloat(M_PI) / 4, clockwise: true)
        self.circleLayer?.path = path.CGPath
        self.circleLayer?.fillColor = UIColor.clearColor().CGColor
        self.circleLayer?.strokeColor = self.tintColor.CGColor
        self.circleLayer?.lineWidth = CGFloat(2.0)
        self.circleLayer?.rasterizationScale = 2.0 * UIScreen.mainScreen().scale
        self.circleLayer?.shouldRasterize = true

        self.layer.addSublayer(self.circleLayer!)
    }


    /** UPDATED. Add animation for strokEnd instead of strokeStart **/
    func addCircleAnimation() {

        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.delegate = self
        animation.fromValue = 0.0
        animation.toValue = 1.0

        animation.duration = CFTimeInterval(floatLiteral: 1)
        animation.removedOnCompletion = false
        animation.fillMode = kCAFillModeBackwards
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

        animation.beginTime = CACurrentMediaTime()
        animation.delegate = self
        self.circleLayer?.addAnimation(animation, forKey:"strokeEnd")


    }
}

【讨论】：

我知道，正如我所说，它仍然给我一个闪烁的效果，这意味着它被完全绘制然后被移除。
您尝试“strokeEnd”中的动画并检查它是否有帮助。答案已更新。
如果我使用 Start -> End 它会保持闪烁效果。如果我使用 End -> Start 或 End -> End，圆圈会出现而不是消失。