IOS Animation-CAShapeLayer、UIBezierPath與Animation的結(jié)合

在閱讀本文之前，對(duì)CAShapeLayer、UIBezierPath不熟悉的話，可以先閱讀文章?貝塞爾曲線與Layer

如果對(duì)動(dòng)畫不熟悉的話，先閱讀文章?動(dòng)畫基礎(chǔ)、深入

?

? ?Layer是繪圖的畫板，Bezier是畫圖的畫筆，Animation是畫圖的動(dòng)作。現(xiàn)在我們可以通過(guò)下面例子更好的讓它們更好地結(jié)合在一起。

1）畫一個(gè)小屋子動(dòng)畫

? ?我們首先通過(guò)定義CAShapeLayer畫板，然后定義path來(lái)確定畫圖路徑。最后使用動(dòng)畫。如下面代碼

1 //讓一個(gè)屋子的線畫起來(lái)的動(dòng)畫效果 2 func addCAShapeLayerAnimationStrokeEnd() { 3 //創(chuàng)建CAShapeLayer，屋子的layer 4 let slayer = CAShapeLayer.init() 5 slayer.strokeColor = UIColor.blackColor().CGColor 6 slayer.fillColor = UIColor.clearColor().CGColor 7 8 //創(chuàng)建屋子的路徑path 9 let path = UIBezierPath.init() 10 path.moveToPoint(CGPointMake(20, 300)) 11 path.addLineToPoint(CGPointMake(20, 100)) 12 path.addLineToPoint(CGPointMake(120, 50)) 13 path.addLineToPoint(CGPointMake(220, 100)) 14 path.addLineToPoint(CGPointMake(220, 300)) 15 path.addLineToPoint(CGPointMake(20, 300)) 16 17 //把畫圖的路徑path添加到layer中 18 slayer.path = path.CGPath 19 //添加slayer到view.layer 20 self.view.layer.addSublayer(slayer) 21 22 //創(chuàng)建動(dòng)畫，strokeEnd。讓線畫起來(lái)的效果 23 let ani = CABasicAnimation(keyPath: "strokeEnd") 24 ani.fromValue = 0 25 ani.toValue = 1 26 ani.repeatCount = 1 27 ani.duration = 3 28 29 slayer.addAnimation(ani, forKey: "addCAShapeLayerAnimationStrokeEnd") 30 }

?

2）小屋子+畫筆的動(dòng)畫

? ?上面1）中我們畫了一個(gè)屋子的動(dòng)畫，那么如果我們想在屋子上面添加一個(gè)畫筆來(lái)畫，讓動(dòng)畫更加生動(dòng)。所以我們用到keyframe動(dòng)畫來(lái)添加path。

1 //讓一個(gè)屋子的線畫起來(lái)的動(dòng)畫效果 2 func addCAShapeLayerAnimationStrokeEnd2() { 3 //---創(chuàng)建CAShapeLayer，屋子的layer start--- 4 let pathLayer = CAShapeLayer.init() 5 pathLayer.strokeColor = UIColor.blackColor().CGColor 6 pathLayer.fillColor = UIColor.clearColor().CGColor 7 //創(chuàng)建屋子的路徑path 8 let path = UIBezierPath.init() 9 path.moveToPoint(CGPointMake(20, 300)) 10 path.addLineToPoint(CGPointMake(20, 100)) 11 path.addLineToPoint(CGPointMake(120, 50)) 12 path.addLineToPoint(CGPointMake(220, 100)) 13 path.addLineToPoint(CGPointMake(220, 300)) 14 path.addLineToPoint(CGPointMake(20, 300)) 15 //把畫圖的路徑path添加到layer中 16 pathLayer.path = path.CGPath 17 //添加slayer到view.layer 18 self.view.layer.addSublayer(pathLayer) 19 //---創(chuàng)建CAShapeLayer，屋子的layer end--- 20 21 //---創(chuàng)建畫筆layer start--- 22 let panLayer = CALayer.init() 23 panLayer.anchorPoint = CGPointZero 24 panLayer.frame = CGRectMake(0, 0, 30, 30) 25 panLayer.contents = UIImage(named: "pan.png")?.CGImage 26 self.view.layer.addSublayer(panLayer) 27 //---創(chuàng)建畫筆layer end--- 28 29 //---創(chuàng)建動(dòng)畫，strokeEnd。讓線畫起來(lái)的效果 start--- 30 let strokeEndAnimation = CABasicAnimation(keyPath: "strokeEnd") 31 strokeEndAnimation.fromValue = 0 32 strokeEndAnimation.toValue = 1 33 strokeEndAnimation.repeatCount = 100 34 strokeEndAnimation.duration = 3 35 pathLayer.addAnimation(strokeEndAnimation, forKey: "strokeEndAnimation") 36 //---創(chuàng)建動(dòng)畫，strokeEnd。讓線畫起來(lái)的效果 end--- 37 38 //---讓畫筆動(dòng)起來(lái)動(dòng)畫start--- 39 let panAnimation = CAKeyframeAnimation(keyPath: "position") 40 panAnimation.path = path.CGPath 41 panAnimation.calculationMode = kCAAnimationPaced 42 panAnimation.duration = 3 43 panAnimation.repeatCount = 100 44 panLayer.addAnimation(panAnimation, forKey: "panAnimation") 45 //---讓畫筆動(dòng)起來(lái)動(dòng)畫end--- 46 47 }

?

posted on 2016-04-10 23:00 alun-chen 閱讀(...) 評(píng)論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/alunchen/p/5376422.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的IOS Animation-CAShapeLayer、UIBezierPath与Animation的结合的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。