IOS Animation-CAShapeLayer、UIBezierPath与Animation的结合

在阅读本文之前，对CAShapeLayer、UIBezierPath不熟悉的话，可以先阅读文章 贝塞尔曲线与Layer

如果对动画不熟悉的话，先阅读文章 动画基础、深入

 

   Layer是绘图的画板，Bezier是画图的画笔，Animation是画图的动作。现在我们可以通过下面例子更好的让它们更好地结合在一起。

1）画一个小屋子动画

   我们首先通过定义CAShapeLayer画板，然后定义path来确定画图路径。最后使用动画。如下面代码

    //让一个屋子的线画起来的动画效果
    func addCAShapeLayerAnimationStrokeEnd() {
        //创建CAShapeLayer，屋子的layer
        let slayer = CAShapeLayer.init()
        slayer.strokeColor = UIColor.blackColor().CGColor
        slayer.fillColor = UIColor.clearColor().CGColor
        
        //创建屋子的路径path
        let path = UIBezierPath.init()
        path.moveToPoint(CGPointMake(20, 300))
        path.addLineToPoint(CGPointMake(20, 100))
        path.addLineToPoint(CGPointMake(120, 50))
        path.addLineToPoint(CGPointMake(220, 100))
        path.addLineToPoint(CGPointMake(220, 300))
        path.addLineToPoint(CGPointMake(20, 300))
        
        //把画图的路径path添加到layer中
        slayer.path = path.CGPath
        //添加slayer到view.layer
        self.view.layer.addSublayer(slayer)
        
        //创建动画，strokeEnd。让线画起来的效果
        let ani = CABasicAnimation(keyPath: "strokeEnd")
        ani.fromValue = 0
        ani.toValue = 1
        ani.repeatCount = 1
        ani.duration = 3
        
        slayer.addAnimation(ani, forKey: "addCAShapeLayerAnimationStrokeEnd")
    }

 

2）小屋子+画笔的动画

   上面1）中我们画了一个屋子的动画，那么如果我们想在屋子上面添加一个画笔来画，让动画更加生动。所以我们用到keyframe动画来添加path。

    //让一个屋子的线画起来的动画效果
    func addCAShapeLayerAnimationStrokeEnd2() {
        //---创建CAShapeLayer，屋子的layer start---
        let pathLayer = CAShapeLayer.init()
        pathLayer.strokeColor = UIColor.blackColor().CGColor
        pathLayer.fillColor = UIColor.clearColor().CGColor
        //创建屋子的路径path
        let path = UIBezierPath.init()
        path.moveToPoint(CGPointMake(20, 300))
        path.addLineToPoint(CGPointMake(20, 100))
        path.addLineToPoint(CGPointMake(120, 50))
        path.addLineToPoint(CGPointMake(220, 100))
        path.addLineToPoint(CGPointMake(220, 300))
        path.addLineToPoint(CGPointMake(20, 300))
        //把画图的路径path添加到layer中
        pathLayer.path = path.CGPath
        //添加slayer到view.layer
        self.view.layer.addSublayer(pathLayer)
        //---创建CAShapeLayer，屋子的layer end---
        
        //---创建画笔layer start---
        let panLayer = CALayer.init()
        panLayer.anchorPoint = CGPointZero
        panLayer.frame = CGRectMake(0, 0, 30, 30)
        panLayer.contents = UIImage(named: "pan.png")?.CGImage
        self.view.layer.addSublayer(panLayer)
        //---创建画笔layer end---
        
        //---创建动画，strokeEnd。让线画起来的效果 start---
        let strokeEndAnimation = CABasicAnimation(keyPath: "strokeEnd")
        strokeEndAnimation.fromValue = 0
        strokeEndAnimation.toValue = 1
        strokeEndAnimation.repeatCount = 100
        strokeEndAnimation.duration = 3
        pathLayer.addAnimation(strokeEndAnimation, forKey: "strokeEndAnimation")
        //---创建动画，strokeEnd。让线画起来的效果 end---
        
        //---让画笔动起来动画start---
        let panAnimation = CAKeyframeAnimation(keyPath: "position")
        panAnimation.path = path.CGPath
        panAnimation.calculationMode = kCAAnimationPaced
        panAnimation.duration = 3
        panAnimation.repeatCount = 100
        panLayer.addAnimation(panAnimation, forKey: "panAnimation")
        //---让画笔动起来动画end---

    }