uibezierpath

原文出处： wu大维 动效设计一直是iOS平台的优势，良好的动效设计可以很好地提升用户体验。而动画则是动效的基础支撑。本动画将从易到难逐步分析，从CABasicAnimation，UIBezierPath，CAShapeLayer三个方面完整的阐述iOS动画的实现。最终的效果如下： 例子来源与网络，不是我写的，我只是加上了详细的注释，方便大家理解（我只是代码的搬运工...）。这个例子是CABasicAnimation，UIBezierPath，CAShapeLayer的综合实现，如果能完全理解这个例子，相信其它的iOS动画也难不倒你了。 demo下载地址 CABasicAnimation 一、概念 这个部分你需要了解以下概念: CALayer、CAAnimation、CAAnimationGroup 1、CALayer CALayer是个与UIView很类似的概念，同样有backgroundColor、frame等相似的属性，我们可以将UIView看做一种特殊的CALayer。但实际上UIView是对CALayer封装，在CALayer的基础上再添加交互功能。UIView的显示必须依赖于CALayer。我们同样可以跟新建view一样新建一个layer，然后添加到某个已有的layer上，同样可以对layer调整大小、位置、透明度等。一般来说，layer可以有两种用途

//贝塞尔曲线路径 UIBezierPath *movePath = [UIBezierPath bezierPath]; [movePath moveToPoint:CGPointMake(10.0, 10.0)]; [movePath addQuadCurveToPoint:CGPointMake(100, 300) controlPoint:CGPointMake(300, 100)]; //以下必须导入QuartzCore包 　　//关键帧动画（位置） CAKeyframeAnimation * posAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"]; posAnim.path = movePath.CGPath; posAnim.removedOnCompletion = YES; //缩放动画 CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"]; scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; scaleAnim.toValue = [NSValue

前面介绍了Core Animation基础知识，还有CALayer的简单使用，最终还是有要动画的滴，这里列出几个动画效果，参考下能加深对Core Animation的认识和理解 1、把图片移到右下角变小透明 使用CAAnimationGroup叠加动画效果，就是下面按钮《把图片移到右下角变小透明》描述的效果： 、 上面三个图是动画的三个状态，实现代码如下： [cpp] view plain copy - ( void)viewDidLoad { [super viewDidLoad]; self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@ "snaguosha.png"]]; self.imageView.frame = CGRectMake(10, 10, 128, 192); [self.view addSubview:self.imageView]; } [cpp] view plain copy - (IBAction)tranAction:(id)sender { CGPoint fromPoint = self.imageView.center; //路径曲线 UIBezierPath *movePath = [UIBezierPath bezierPath];

之前讲过使用UIBezierPath在UIView的drawRect中绘图， 今天我们讲下另外一种方式: CAShaperLayer 先说说使用CAShapeLayer的优点: GPU执行, GPU执行 , GPU执行 比如我们要画这样一个形状， 按照之前的思路是创建一个UIView子类， 用UIBezierPath画一个外围的不闭合圆弧， 在画中间点圆 代码量不是很多弹也不少， 那假如用CAShapeLayer实现时怎么样子的呢？ 我们先上代码： #import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //定义一个CAShapeLayer CAShapeLayer *myShapeLayer = ({ //初始化一个实例对象 CAShapeLayer *circle = [CAShapeLayer layer]; circle.bounds = CGRectMake(0, 0, 100, 100); //设置大小 circle.position = self.view.center; //设置中心位置 circle.path = \ [UIBezierPath

UIBezierPath： UIBezierPath是在 UIKit 中的一个类，继承于NSObject,可以创建基于矢量的路径。使用此类可以定义常见的圆形、多边形等形状 。我们使用直线、弧（arc）来创建复杂的曲线形状。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。 CAShapeLayer： CAShapeLayer顾名思义，继承于CALayer。 每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。具体的形状由其path(类型为CGPathRef)属性指定。 普通的CALayer是矩形，所以需要frame属性。CAShapeLayer初始化时也需要指定frame值，但 它本身没有形状，它的形状来源于其属性path 。CAShapeLayer有不同于CALayer的属性，它从CALayer继承而来的属性在绘制时是不起作用的。 步骤： 1、新建UIBezierPath对象bezierPath 2、新建CAShapeLayer对象caShapeLayer 3、将bezierPath的CGPath赋值给caShapeLayer的path，即caShapeLayer.path = bezierPath