IOS Animation-CAShapeLayer、UIBezierPath与Animation的结合

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

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

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

1)画一个小屋子动画

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

 1     //让一个屋子的线画起来的动画效果
 2     func addCAShapeLayerAnimationStrokeEnd() {
 3         //创建CAShapeLayer,屋子的layer
 4         let slayer = CAShapeLayer.init()
 5         slayer.strokeColor = UIColor.blackColor().CGColor
 6         slayer.fillColor = UIColor.clearColor().CGColor
 7
 8         //创建屋子的路径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         //创建动画,strokeEnd。让线画起来的效果
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)小屋子+画笔的动画

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

 1     //让一个屋子的线画起来的动画效果
 2     func addCAShapeLayerAnimationStrokeEnd2() {
 3         //---创建CAShapeLayer,屋子的layer start---
 4         let pathLayer = CAShapeLayer.init()
 5         pathLayer.strokeColor = UIColor.blackColor().CGColor
 6         pathLayer.fillColor = UIColor.clearColor().CGColor
 7         //创建屋子的路径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         //---创建CAShapeLayer,屋子的layer end---
20
21         //---创建画笔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         //---创建画笔layer end---
28
29         //---创建动画,strokeEnd。让线画起来的效果 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         //---创建动画,strokeEnd。让线画起来的效果 end---
37
38         //---让画笔动起来动画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         //---让画笔动起来动画end---
46
47     }
时间: 2024-10-28 22:11:18

IOS Animation-CAShapeLayer、UIBezierPath与Animation的结合的相关文章

IOS开发——Core Graphics & Core Animation

好久没写过blog了,首先了解下最近苹果和IOS方面的最新消息. 1.WWDC2014在上个月举行了,与2013年一样,今年WWDC没发布硬件产品和新品(如果你懂cook你就会期待今年秋季发布会,预计10中旬举行) 今年WWDC有一个最令人兴奋的新语言发布--Swift,小编也花了将近半个月来学习新语言,发现Swift与反人类语言objective-c不同的是完全抛弃了C,更像是js+lua+python+各种脚本语言的集合,这也是时间上最新最先进的开发语言,小道消息说swift今年4岁,也就是

IOS开发 - Create Push Segue Animation Without UINavigationController

APPLE提供了三种storyboard segue的方式:push,modal,custom . push segue是系统预定义的跳转方式, 为了使其能正常工作,我们还必须加载UINavigationController. 有时候,我们不想看到UINavigation bar,我们可以使用modal segue. modal segue 的跳转方式有四种:Cover Vertical, Flip Horizontal, Cross Dissolve and Partial Curl. 要是我

iOS开发之UIBezierPath曲线动画

func animation1(layerParam: CAShapeLayer){ let animation = CABasicAnimation(keyPath: "strokeStart") animation.fromValue = 0 animation.toValue = 1 animation.duration = 2.0 layerParam.addAnimation(animation, forKey: "") } 这段代码可以用来实现曲线的绘制

iOS开发UI篇——Core Animation核心动画CAShapeLayer(绘制图形等)简介

重点: 获取绘制图形        Layer CAShapeLayer *shapeLayer = [CAShapeLayer layer];     设置图形有线颜色   [CAShapeLayer layer].strokeColor = [UIColor redColor].CGColor;      设置图形填充颜色   [CAShapeLayer layer].fillColor = [UIColor clearColor].CGColor;   设置图形线宽      [CASha

iOS开发日记16-动画Animation

今天博主有一个动画Animation的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. iOS开发中的动画分为两种:一种为UIView动画,又称隐式动画,动画后frame的数值发生了变化.另一种是CALayer动画,又称显示动画,动画后模型层的数据不会发生变化,图形回到原来的位置.但是在实际开发中,因为UIView可以相应用户交互,所以UIView动画用的多. 一.UIview的动画 1.实现方式:动画块,block begin //设置动画效果  修改属性值,动画时长等等 conmm

iOS关于CAShapeLayer与UIBezierPath的知识内容

使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装.使用此类可以定义常见的圆形.多边形等形状 .我们使用直线.弧(arc)来创建复杂的曲线形状.每一个直线段或者曲线段的结束的地方是下一个的开始的地方.每一个连接的直线或者曲线段的集

IOS中的动画——Core Animation

一.基础动画 CABasicAnimation 1 //初始化方式 CABasicAnimation * cabase=[CABasicAnimation animation]; 2 //通过keyPath设置需要实现动画的属性,此处设为bounds [email protected]"bounds"; 3 //通过toValue设置动画结束时候的状态 cabase.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 10, 100)];

[ css 动画 animation属性 ] css中animation属性讲解及实现弹力球实例演示

实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>animation-play-state</title> <meta name="author" content="Joy Du(飘零雾雨), [email protected], www.d

iOS 中 CAShapeLayer 的使用

1.CAShapeLayer 简介 1.CAShapeLayer继承至CALayer,可以使用CALayer的所有属性值 2.CAShapeLayer需要与贝塞尔曲线配合使用才有意义 3.使用CAShapeLayer与贝塞尔曲线可以实现不在view的drawRect方法中画出一些想要的图形 4.CAShapeLayer属于CoreAnimation框架,其动画渲染直接提交到手机的GPU当中,相较于view的drawRect方法使用CPU渲染而言,   其效率极高,能大大优化内存使用情况 效果: