Facebook开源动画框架 Pop体验（一）
招聘信息：
Facebook开源了期待已久的动画框架Pop，该框架为本文中的iOS app 提供了强大的动画支持。
Pop 中用来定义动画的方法类似于 苹果的Core Animation API。不论你以前是否使用过Core Animation，学习并使用Pop开发一个基本的动画都非常容易。
这是一个简单动画，是借助弹簧效果把一个视图从一个点移动到另一点。
POPSpringAnimation&*springAnimation&=&[POPSpringAnimation&animation];&springAnimation.property&=&[POPAnimatableProperty&propertyWithName:kPOPViewCenter];&springAnimation.toValue&=&[NSValue&valueWithCGPoint:CGPointMake(self.view.bounds.size.width/2,&self.view.bounds.size.height/2)];&springAnimation.velocity&=&[NSValue&valueWithCGPoint:CGPointMake(100,&10)];&[imageView&pop_addAnimation:springAnimation&forKey:@"center"];&
POPSpringAnimation 有几个属性是用来定义弹簧行为的，包括弹簧的反弹力度和速度。你可以这样改变其值：
springAnimation.springBounciness&=&20;&springAnimation.springSpeed&=&20;&
动画看起来像这样：
你想要展现动画效果的属性是由POPAnimatableProperty来表现的。该属性通常被用到视图或者图层上，但是Pop实际上可以让你对NSObject 对象上的任何属性执行动画效果（比方：约束）。借助propertyWithName: initalizer:方法可以使用一大堆便捷的常量来创建POPAnimatableProperty。
kPOPViewA&kPOPViewBackgroundC&kPOPViewB&kPOPViewC&kPOPViewF&kPOPViewScaleX;&kPOPViewScaleXY;&kPOPViewScaleY;&kPOPViewS&
你可以在开始、结尾处以及其他地方通过实现POPAnimationDelegate 协议来回调函数，并且分配你的类对象作为POPAnimation的代理。
-&(void)pop_animationDidStart:(POPAnimation&*)&-&(void)pop_animationDidReachToValue:(POPAnimation&*)&-&(void)pop_animationDidStop:(POPAnimation&*)anim&finished:(BOOL)&
如果你已经使用了顶级UIView block animation API，你需要花费一些时间习惯Pop,尤其是寻找UIView 的等效属性。我发现POPSpringAnimation 没有一个持续时间的属性，相反（我假设的）它的时间是由速率和弹动属性控制的。并且如果你搜寻延迟的等效属性，会发现是beginTime（作为Core Animation API的镜像）。
Pop仍然有很多地方有待研究，我特别向往用它将任何对象的任何属性执行动画效果。我未来会努力从这个角度研究它。
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
点击量8266点击量6358点击量6335点击量6203点击量5333点击量4852点击量4827点击量4611点击量4285
&2015 Chukong Technologies,Inc.
京公网安备893083人阅读
第六章：Specialized Layers
CAEmitterLayer
用于实现基于Core Animation粒子发射系统。发射器层对象控制粒子的生成和起源
CAGradientLayer
用于绘制一个颜色渐变填充图层的形状（所有圆角矩形边界内的部分）
CAEAGLLayer/CAOpenGLLayer
用于设置需要使用OpenGL ES（iOS）或OpenGL（OS X）绘制的内容与内容储备。
CAReplicatorLayer
当你想自动生成一个或多个子层的拷贝。复制器为你生成拷贝并使用你指定的属性值以修改复制品的外观和属性。
CAScrollLayer
用于管理由多个子区域组成的大的可滚动区域
CAShaperLayer
用于绘制三次贝塞尔曲线。CAShaperLayer对绘制基于路径的形状非常有帮助。因为CAShaperLayer总是生成一个最新的路径。而如果将路径画在图层储备中，一旦图层被缩放，形状就变形了。
CATextLayer
用于渲染一个无格式或属性文本字符
CATransformLayer
用于渲染一个真3D的图层层级。而不是由其他图层类实现的2D图层层级。
QCCompositionLayer
用于渲染一个Quartz组件元素（仅在OS X中有效）
CAShapeLayer
使用CGPath绘制矢量图，UIBezierPath类可以创建基于矢量的路径，此类是Core Graphics框架关于path的一个封装。它可以定义简单的形状，如椭圆或者矩形，或者有多个直线和曲线段组成的形状。
源码在这里下载：
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *containerV
@implementation ViewController
- (void)viewDidLoad
[super viewDidLoad];
//create path
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(175, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];
[path moveToPoint:CGPointMake(150, 125)];
[path addLineToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(125, 225)];
[path moveToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(175, 225)];
[path moveToPoint:CGPointMake(100, 150)];
[path addLineToPoint:CGPointMake(200, 150)];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGC
shapeLayer.fillColor = [UIColor clearColor].CGC
shapeLayer.lineWidth = 5;
shapeLayer.lineJoin = kCALineJoinR
shapeLayer.lineCap = kCALineCapR
shapeLayer.path = path.CGP
//add it to our view
[self.containerView.layer addSublayer:shapeLayer];
先说说CAShapeLayer的属性设置
@property CGColorRef strokeColor
@property CGColorRef fillColor
3. 填充规则
@property(copy) NSString *fillRule修改例子6.1
默认值kCAFillRuleNonZero的情况
- (void)viewDidLoad
[super viewDidLoad];
//create path
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(200, 150)];
[path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];
[path moveToPoint:CGPointMake(250, 150)];
[path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:2*M_PI clockwise:YES];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGC
shapeLayer.fillColor = [UIColor blueColor].CGC
shapeLayer.fillRule = kCAFillRuleNonZ
//shapeLayer.fillRule = kCAFillRuleEvenO
shapeLayer.lineWidth = 5;
shapeLayer.lineJoin = kCALineJoinB
shapeLayer.lineCap = kCALineCapR
shapeLayer.path = path.CGP
//add it to our view
[self.containerView.layer addSublayer:shapeLayer];
- (void)viewDidLoad
[super viewDidLoad];
//create path
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(200, 150)];
[path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];
[path moveToPoint:CGPointMake(250, 150)];
[path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:-2*M_PI clockwise:NO];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGC
shapeLayer.fillColor = [UIColor blueColor].CGC
shapeLayer.fillRule = kCAFillRuleNonZ
//shapeLayer.fillRule = kCAFillRuleEvenO
shapeLayer.lineWidth = 5;
shapeLayer.lineJoin = kCALineJoinB
shapeLayer.lineCap = kCALineCapR
shapeLayer.path = path.CGP
//add it to our view
[self.containerView.layer addSublayer:shapeLayer];
kCAFillRuleEvenOdd的情况
- (void)viewDidLoad
[super viewDidLoad];
//create path
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(200, 150)];
[path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];
[path moveToPoint:CGPointMake(250, 150)];
[path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:2*M_PI clockwise:YES];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGC
shapeLayer.fillColor = [UIColor blueColor].CGC
//shapeLayer.fillRule = kCAFillRuleNonZ
shapeLayer.fillRule = kCAFillRuleEvenO
shapeLayer.lineWidth = 5;
shapeLayer.lineJoin = kCALineJoinB
shapeLayer.lineCap = kCALineCapR
shapeLayer.path = path.CGP
//add it to our view
[self.containerView.layer addSublayer:shapeLayer];
- (void)viewDidLoad
[super viewDidLoad];
//create path
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(200, 150)];
[path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];
[path moveToPoint:CGPointMake(250, 150)];
[path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:-2*M_PI clockwise:NO];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGC
shapeLayer.fillColor = [UIColor blueColor].CGC
//shapeLayer.fillRule = kCAFillRuleNonZ
shapeLayer.fillRule = kCAFillRuleEvenO
shapeLayer.lineWidth = 5;
shapeLayer.lineJoin = kCALineJoinB
shapeLayer.lineCap = kCALineCapR
shapeLayer.path = path.CGP
//add it to our view
[self.containerView.layer addSublayer:shapeLayer];
继续为了看清奇偶的效果，画3个同方向圆圈
- (void)viewDidLoad
[super viewDidLoad];
//create path
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(200, 150)];
[path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];
[path moveToPoint:CGPointMake(250, 150)];
[path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:2*M_PI clockwise:YES];
[path moveToPoint:CGPointMake(300, 150)];
[path addArcWithCenter:CGPointMake(150, 150) radius:150 startAngle:0 endAngle:2*M_PI clockwise:YES];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGC
shapeLayer.fillColor = [UIColor blueColor].CGC
//shapeLayer.fillRule = kCAFillRuleNonZ
shapeLayer.fillRule = kCAFillRuleEvenO
shapeLayer.lineWidth = 5;
shapeLayer.lineJoin = kCALineJoinB
shapeLayer.lineCap = kCALineCapR
shapeLayer.path = path.CGP
//add it to our view
[self.containerView.layer addSublayer:shapeLayer];
以上我们应该清楚不同的规则了吧，挪用别人的描述
nonzero字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。下图演示了nonzero规则:
evenodd字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。下图演示了evenodd&规则:
4. 线端点类型
@property(copy) NSString *lineCap
5. 线连接类型
@property(copy) NSString *lineJoin
@property CGFloat lineWidth
7. 线型模板
@property(copy) NSArray *lineDashPattern这是一个NSNumber的数组，索引从1开始记，奇数位数值表示实线长度，偶数位数值表示空白长度
8. 线型模板的起始位置
@property CGFloat lineDashPhase修改例子6.1，为了看得更清楚，把lineCap的设置注释，，自己看看不注释是什么结果
- (void)viewDidLoad
[super viewDidLoad];
//create path
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(175, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];
[path moveToPoint:CGPointMake(150, 125)];
[path addLineToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(125, 225)];
[path moveToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(175, 225)];
[path moveToPoint:CGPointMake(100, 150)];
[path addLineToPoint:CGPointMake(200, 150)];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGC
shapeLayer.fillColor = [UIColor clearColor].CGC
shapeLayer.lineWidth = 5;
shapeLayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:20], [NSNumber numberWithInt:10], [NSNumber numberWithInt:10], [NSNumber numberWithInt:2], nil];
//shapeLayer.lineDashPhase = 15;
shapeLayer.lineJoin = kCALineJoinB
//shapeLayer.lineCap = kCALineCapR
shapeLayer.strokeStart = 0.1;
shapeLayer.strokeEnd = 0.6;
shapeLayer.path = path.CGP
//add it to our view
[self.containerView.layer addSublayer:shapeLayer];
再修改lineDashPhase值=15
9. 最大斜接长度。
@property CGFloat miterLimit
斜接长度指的是在两条线交汇处内角和外角之间的距离。
只有lineJoin属性为kCALineJoinMiter时miterLimit才有效
边角的角度越小，斜接长度就会越大。
为了避免斜接长度过长，我们可以使用 miterLimit 属性。
如果斜接长度超过 miterLimit 的值，边角会以 lineJoin的
&bevel&即kCALineJoinBevel类型来显示
10. 部分绘线
@property CGFloat strokeStart
@property CGFloat strokeEnd
都是0.0~1.0的取值范围
具体看修改例子6.1
- (void)viewDidLoad
[super viewDidLoad];
//create path
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(175, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];
[path moveToPoint:CGPointMake(150, 125)];
[path addLineToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(125, 225)];
[path moveToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(175, 225)];
[path moveToPoint:CGPointMake(100, 150)];
[path addLineToPoint:CGPointMake(200, 150)];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGC
shapeLayer.fillColor = [UIColor clearColor].CGC
shapeLayer.lineWidth = 5;
//shapeLayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:20], [NSNumber numberWithInt:10], [NSNumber numberWithInt:10], [NSNumber numberWithInt:2], nil];
//shapeLayer.lineDashPhase = 15;
shapeLayer.lineJoin = kCALineJoinB
shapeLayer.lineCap = kCALineCapR
shapeLayer.strokeStart = 0.1;
shapeLayer.strokeEnd = 0.6;
shapeLayer.path = path.CGP
//add it to our view
[self.containerView.layer addSublayer:shapeLayer];
UIBezierPath贝塞尔曲线的常用绘图方法
+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect
2.&矩形内切椭圆
+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect
3. 圆角矩形
+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius
4. 可设置的圆角矩形
+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii
corners有以下几种类型：
& &UIRectCornerTopLeft,
&& UIRectCornerTopRight,
&& UIRectCornerBottomLeft,
&& UIRectCornerBottomRight,
&& UIRectCornerAllCorners
cornerRadii表示的是四个圆角拼成的椭圆的长、短半径尺寸。
+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
以下需要配合moveToPoint使用
- (void)moveToPoint:(CGPoint)point
- (void)addLineToPoint:(CGPoint)point
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
8.&二元曲线
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
UIBezierPath的属性设置(这些属性在使用CAShapeLayer时，只遵循CAShapeLayer的设置)
@property(nonatomic) CGFloat lineWidth
2. 端点类型
@property(nonatomic) CGLineCap lineCapStyle
3. 连接类型
@property(nonatomic) CGLineJoin lineJoinStyle
4. 设置线型
- (void)setLineDash:(const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase
pattern：C类型的线型数据。如：CGFloat dashStyle[] = { 1.0f, 2.0f };
count：pattern中的数据个数
phase: 开始画线型的起始位置
其他的我在这里就不多说了
CATextLayer
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *labelV
@implementation ViewController
- (void)viewDidLoad
[super viewDidLoad];
//create a text layer
CATextLayer *textLayer = [CATextLayer layer];
textLayer.frame = self.labelView.
[self.labelView.layer addSublayer:textLayer];
//uncomment the line below to fix pixelation on Retina screens
//textLayer.contentsScale = [UIScreen mainScreen].
//set text attributes
textLayer.foregroundColor = [UIColor blackColor].CGC
textLayer.alignmentMode = kCAAlignmentJ
//textLayer.contentsScale = 1;
textLayer.wrapped = YES;
//choose a font
UIFont *font = [UIFont systemFontOfSize:15];
//set layer font
CFStringRef fontName = (__bridge CFStringRef)font.fontN
CGFontRef fontRef = CGFontCreateWithFontName(fontName);
textLayer.font = fontR
textLayer.fontSize = font.pointS
CGFontRelease(fontRef);
//choose some text
NSString *text = @&Lorem ipsum dolor sit amet, consectetur adipiscing \
elit. Quisque massa arcu, eleifend vel varius in, facilisis pulvinar \
leo. Nunc quis nunc at mauris pharetra condimentum ut ac neque. Nunc \
elementum, libero ut porttitor dictum, diam odio congue lacus, vel \
fringilla sapien diam at purus. Etiam suscipit pretium nunc sit amet \
lobortis&;
//set layer text
textLayer.string =
仔细看文字周围很模糊，解决这个问题需要设置contentsScale
修改“textLayer.contentsScale = [UIScreen mainScreen].”
代码不贴了
CATextLayer also renders much faster than UILabel. It’s a little-known fact that on iOS6 and earlier,UILabel actually uses WebKit to
do its text drawing, which carries a significant performance overhead when you are drawing a lot of text.CATextLayer uses Core Text and is significantlyfaster.
例子6.4使用layer实现的label，有兴趣的完善一下
CATransformLayer
代码不贴了
修改一下，可以实现简单的拖动旋转(只是试验代码)
@interface ViewController ()
CGPoint startP
CATransformLayer *s_C
float pix,
@property (nonatomic, weak) IBOutlet UIView *containerV
@implementation ViewController
- (CALayer *)faceWithTransform:(CATransform3D)transform
//create cube face layer
CALayer *face = [CALayer layer];
face.frame = CGRectMake(-50, -50, 100, 100);
//apply a random color
CGFloat red = (rand() / (double)INT_MAX);
CGFloat green = (rand() / (double)INT_MAX);
CGFloat blue = (rand() / (double)INT_MAX);
face.backgroundColor = [UIColor colorWithRed:red
green:green
alpha:1.0].CGC
//apply the transform and return
face.transform =
- (CALayer *)cubeWithTransform:(CATransform3D)transform
//create cube layer
CATransformLayer *cube = [CATransformLayer layer];
//add cube face 1
CATransform3D ct = CATransform3DMakeTranslation(0, 0, 50);
[cube addSublayer:[self faceWithTransform:ct]];
//add cube face 2
ct = CATransform3DMakeTranslation(50, 0, 0);
ct = CATransform3DRotate(ct, M_PI_2, 0, 1, 0);
[cube addSublayer:[self faceWithTransform:ct]];
//add cube face 3
ct = CATransform3DMakeTranslation(0, -50, 0);
ct = CATransform3DRotate(ct, M_PI_2, 1, 0, 0);
[cube addSublayer:[self faceWithTransform:ct]];
//add cube face 4
ct = CATransform3DMakeTranslation(0, 50, 0);
ct = CATransform3DRotate(ct, -M_PI_2, 1, 0, 0);
[cube addSublayer:[self faceWithTransform:ct]];
//add cube face 5
ct = CATransform3DMakeTranslation(-50, 0, 0);
ct = CATransform3DRotate(ct, -M_PI_2, 0, 1, 0);
[cube addSublayer:[self faceWithTransform:ct]];
//add cube face 6
ct = CATransform3DMakeTranslation(0, 0, -50);
ct = CATransform3DRotate(ct, M_PI, 0, 1, 0);
[cube addSublayer:[self faceWithTransform:ct]];
//center the cube layer within the container
CGSize containerSize = self.containerView.bounds.
cube.position = CGPointMake(containerSize.width / 2.0,
containerSize.height / 2.0);
//apply the transform and return
cube.transform =
- (void)viewDidLoad
[super viewDidLoad];
//set up the perspective transform
CATransform3D pt = CATransform3DI
pt.m34 = -1.0 / 500.0;
self.containerView.layer.sublayerTransform =
//set up the transform for cube 1 and add it
CATransform3D c1t = CATransform3DI
c1t = CATransform3DTranslate(c1t, -100, 0, 0);
CALayer *cube1 = [self cubeWithTransform:c1t];
s_Cube = (CATransformLayer *)cube1;
[self.containerView.layer addSublayer:cube1];
//set up the transform for cube 2 and add it
CATransform3D c2t = CATransform3DI
c2t = CATransform3DTranslate(c2t, 100, 0, 0);
c2t = CATransform3DRotate(c2t, -M_PI_4, 1, 0, 0);
c2t = CATransform3DRotate(c2t, -M_PI_4, 0, 1, 0);
CALayer *cube2 = [self cubeWithTransform:c2t];
[self.containerView.layer addSublayer:cube2];
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
UITouch *touch = [touches anyObject];
startPoint = [touch locationInView:self.view];
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
UITouch *touch = [touches anyObject];
CGPoint currentPosition = [touch locationInView:self.view];
CGFloat deltaX = startPoint.x - currentPosition.x;
CGFloat deltaY = startPoint.y - currentPosition.y;
CATransform3D c1t = CATransform3DI
c1t = CATransform3DTranslate(c1t, -100, 0, 0);
c1t = CATransform3DRotate(c1t, pix+M_PI_2*deltaY/100, 1, 0, 0);
c1t = CATransform3DRotate(c1t, piy-M_PI_2*deltaX/100, 0, 1, 0);
s_Cube.transform = c1t;
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
UITouch *touch = [touches anyObject];
CGPoint currentPosition = [touch locationInView:self.view];
CGFloat deltaX = startPoint.x - currentPosition.x;
CGFloat deltaY = startPoint.y - currentPosition.y;
pix = M_PI_2*deltaY/100;
piy = -M_PI_2*deltaX/100;
CAGradientLayer
产生平滑过渡色，
interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *containerV
@implementation ViewController
- (void)viewDidLoad
[super viewDidLoad];
//create gradient layer and add it to our container view
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = self.containerView.
[self.containerView.layer addSublayer:gradientLayer];
//set gradient colors
gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor];
//set gradient start and end points
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1, 1);
CAGradientLayer的属性设置
@property(copy) NSString *type目前只有NSString * const kCAGradientLayerAxial
即线性梯度变化
@property(copy) NSArray *colors
3. 位置参数
@property(copy) NSArray *locations颜色的区间分布，locations的数组长度和colors一致，&取值范围(0, 1)，而且必须是单调递增的
修改例子6.6，增加
&p class=&p1&&    gradientLayer.&span class=&s1&&locations&/span& = &span class=&s2&&@[&/span&[&span class=&s1&&NSNumber&/span& &span class=&s3&&numberWithFloat&/span&:&span class=&s2&&0.0&/span&], [&span class=&s1&&NSNumber&/span& &span class=&s3&&numberWithFloat&/span&:&span class=&s2&&0.2&/span&]&span class=&s2&&]&/span&;&/p&
gradientLayer.locations = @[[NSNumber numberWithFloat:0.5], [NSNumber numberWithFloat:0.7]];
4.&startPoint和endPoint
@property CGPoint startPoint, endP
取值都是相对于layer的bounds的。startPoint默认值为(0.5, 0)，endPoint默认值为(0.5, 1)
修改例子6.6
gradientLayer.startPoint 分别设为&CGPointMake(0,
&CGPointMake(0.25,&0);&
&CGPointMake(0.5,&0);&
&CGPointMake(0.75,&0);&
&CGPointMake(1,&0);&
综合修改例子6.6
- (void)viewDidLoad
[super viewDidLoad];
//create gradient layer and add it to our container view
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = self.containerView.
[self.containerView.layer addSublayer:gradientLayer];
//set gradient colors
gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor];
gradientLayer.locations = @[[NSNumber numberWithFloat:0.5], [NSNumber numberWithFloat:0.7]];
//set gradient start and end points
gradientLayer.startPoint = CGPointMake(0.75, 0.0);
gradientLayer.endPoint = CGPointMake(1.0, 1.0);
从以上可以看出startPoint和endPoint诗表示的渐变方向，locations是渐变区域。
也可以看出locations的取值是相对于startPoint和endPoint线段的。
在网上找的描述让我很是不能理解
CAReplicatorLayer
例子6.8，修改一下看得更清楚些
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *containerV
@implementation ViewController
- (void)viewDidLoad
[super viewDidLoad];
//create a replicator layer and add it to our view
CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
replicator.frame = self.containerView.
[self.containerView.layer addSublayer:replicator];
//configure the replicator
replicator.instanceCount = 20;
//apply a transform for each instance
CATransform3D transform = CATransform3DI
transform = CATransform3DTranslate(transform, 0, -10, 0);
transform = CATransform3DRotate(transform, M_PI / 10.0, 0, 0, 1);
transform = CATransform3DTranslate(transform, 0, 10, 0);
replicator.instanceTransform =
//apply a color shift for each instance
replicator.instanceBlueOffset = -0.1;
replicator.instanceGreenOffset = -0.1;
//create a sublayer and place it inside the replicator
CALayer *layer = [CALayer layer];
layer.frame = CGRectMake(137.5f, 25.0f, 25.0f, 25.0f);
layer.backgroundColor = [UIColor whiteColor].CGC
[replicator addSublayer:layer];
CAReplicatorLayer应用最多的可能是倒影了，下面的链接是个很好的图片倒影例子
后面的几个特殊layer我就不在这里列举了，自己去研究吧
下一次，就将进入真正的动画部分了
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：228217次
积分：2724
积分：2724
排名：第5836名
原创：38篇
转载：48篇
评论：35条
(1)(3)(1)(1)(2)(9)(4)(2)(1)(1)(7)(2)(2)(4)(3)(2)(1)(2)(2)(2)(1)(3)(4)(3)(5)(3)(5)(12)