CABasicAnimation 脉冲效果 1 UIImage *image = [UIImage imageNamed:@"heart.png"]; 2 CALayer *layer = [CALayer layer]; 3 layer.contents = (id)image.CGImage; 4 layer.bounds = CGRectMake(0, 0, image.size.width, image.size.height); 5 layer.position = CGPointMake(160, 200); 6 7 layer.transform = CATransform3DMakeScale(0.90, 0.90, 1); // 将图片大小按照X轴和Y轴缩放90%,永久 8 [self.view.layer addSublayer:layer]; 9 10 CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"]; 11 animation.toValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; // 将目标值设为原值 12 animation.autoreverses = YES; // 自动倒回最初效果 13 animation.duration = 0.35; 14 animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 15 animation.repeatCount = HUGE_VALF; 16 [layer addAnimation:animation forKey:@"pulseAnimation"]; posted @ 2013-02-08 22:25 diablo大王 阅读(27) 评论(0) 编辑 CAGradientLayer 处理渐变 CAGradientLayer可以方便的处理颜色渐变。 1 self.view.backgroundColor = [UIColor whiteColor]; 2 UIImage *image = [UIImage imageNamed:@"mountains.png"]; // 原图 3 4 CALayer *imageLayer = [CALayer layer]; 5 imageLayer.borderColor = [UIColor greenColor].CGColor; 6 imageLayer.borderWidth = 2; 7 imageLayer.contents = (id)image.CGImage; 8 imageLayer.bounds = CGRectMake(0, 0, image.size.width, image.size.height); 9 imageLayer.position = CGPointMake(160, 130); 10 [self.view.layer addSublayer:imageLayer]; // 将原图转换为CALayer 11 12 CALayer *reflectionLayer = [CALayer layer]; // 设置倒影层 13 reflectionLayer.contents = imageLayer.contents; 14 reflectionLayer.bounds = imageLayer.bounds; 15 reflectionLayer.position = CGPointMake(160, 330); 16 reflectionLayer.borderColor = imageLayer.borderColor; 17 reflectionLayer.borderWidth = imageLayer.borderWidth; 18 reflectionLayer.opacity = 0.5; 19 20 [reflectionLayer setValue:[NSNumber numberWithFloat:DEGREES_TO_RADIANS(180)] forKeyPath:@"transform.rotation.x"]; // 仅仅将图片层沿X轴反转180度 21 22 CAGradientLayer *gradientLayer = [CAGradientLayer layer]; // 设置渐变效果 23 gradientLayer.bounds = reflectionLayer.bounds; 24 gradientLayer.borderWidth = 2; 25 gradientLayer.borderColor = [UIColor redColor].CGColor; 26 gradientLayer.position = CGPointMake(reflectionLayer.bounds.size.width / 2, 27 reflectionLayer.bounds.size.height * 0.65); 28 gradientLayer.colors = [NSArray arrayWithObjects: 29 (id)[[UIColor greenColor] CGColor], 30 (id)[[UIColor clearColor] CGColor], 31 (id)[[UIColor whiteColor] CGColor], nil]; 32 gradientLayer.startPoint = CGPointMake(0.5, 0.5); 33 gradientLayer.endPoint = CGPointMake(0.5, 1.0); 34 35 reflectionLayer.mask = gradientLayer; 36 [self.view.layer addSublayer:reflectionLayer]; posted @ 2013-02-08 22:12 diablo大王 阅读(317) 评论(0) 编辑 自定义CALayer阴影 1 CALayer *layer = [[self.view.layer sublayers] objectAtIndex:0]; layer.shadowPath = (layer.shadowPath) ? nil : [self bezierPathWithCurvedShadowForRect:layer.bounds2 ].CGPath; 1 static const CGFloat offset = 10.0; 2 static const CGFloat curve = 5.0; 3 - (UIBezierPath*)bezierPathWithCurvedShadowForRect:(CGRect)rect { 4 5 UIBezierPath *path = [UIBezierPath bezierPath]; 6 7 CGPoint topLeft = rect.origin; 8 CGPoint bottomLeft = CGPointMake(0.0, CGRectGetHeight(rect) + offset); 9 CGPoint bottomMiddle = CGPointMake(CGRectGetWidth(rect)/2, CGRectGetHeight(rect) - curve); 10 CGPoint bottomRight = CGPointMake(CGRectGetWidth(rect), CGRectGetHeight(rect) + offset); 11 CGPoint topRight = CGPointMake(CGRectGetWidth(rect), 0.0); 12 13 [path moveToPoint:topLeft]; 14 [path addLineToPoint:bottomLeft]; 15 [path addQuadCurveToPoint:bottomRight controlPoint:bottomMiddle]; 16 [path addLineToPoint:topRight]; 17 [path addLineToPoint:topLeft]; 18 [path closePath]; 19 20 return path; 21 } posted @ 2013-02-08 21:00 diablo大王 阅读(117) 评论(0) 编辑 CALayer 的一些重要属性 1. shadowPath : 设置 CALayer 背景(shodow)的位置 2. shadowOffset : shadow 在 X 和 Y 轴 上延伸的方向,即 shadow 的大小 3. shadowOpacity : shadow 的透明效果 4. shadowRadius : shadow 的渐变距离,从外围开始,往里渐变 shadowRadius 距离 5. masksToBounds : 很重要的属性,可以用此属性来防止子元素大小溢出父元素,如若防止溢出,请设为 true 6. borderWidth 和 boarderColor : 边框颜色和宽度,很常用 7. bounds : 大小,与position,anchorPoint有关 8. opacity : 透明效果 9. cornerRadius : 圆角 posted @ 2013-02-08 20:57 diablo大王 阅读(36) 评论(0) 编辑 CABasicAnimation基于二个方向的旋转 1 CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"]; 2 transformAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; 3 transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(DEGREES_TO_RADIANS(85), 0, 1, 1)]; // 基于Y轴和Z轴同时旋转 4 transformAnimation.duration = 1.5; 5 transformAnimation.autoreverses = YES; 6 transformAnimation.repeatCount = HUGE_VALF; 7 transformAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 1 int tx = 0; 2 for (CALayer *layer in [rootLayer sublayers]) { // 循环每个子层 3 [layer addAnimation:transformAnimation forKey:nil]; // 每个子层都加入Y轴和Z轴旋转 4 5 CABasicAnimation *translateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"]; 6 translateAnimation.fromValue = [NSValue valueWithCATransform3D:layer.transform]; 7 translateAnimation.toValue = [NSNumber numberWithFloat:tx]; 8 translateAnimation.duration = 1.5; 9 translateAnimation.autoreverses = YES; 10 translateAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 11 translateAnimation.repeatCount = HUGE_VALF; 12 [layer addAnimation:translateAnimation forKey:nil]; 13 tx += 35; 14 } posted @ 2013-02-08 20:08 diablo大王 阅读(163) 评论(0) 编辑 [self performselector: withObject: afterDelay:];一定时间后执行某个方法 { NSLog(@"111"); SEL rl = @selector(rotateLayers); [selfperformSelector:rl withObject:nilafterDelay:1.0]; // 这里不延时1秒 NSLog(@"222"); } - (void)rotateLayers { NSLog(@"333"); } 结果: 19:47:55.326 CA Demos[5138:907] 111 19:47:55.327 CA Demos[5138:907] 222 19:47:56.329 CA Demos[5138:907] 333 posted @ 2013-02-08 19:52 diablo大王 阅读(194) 评论(0) 编辑 CAAnimationGroup 动画组的应用 1 CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; 2 rotationAnimation.toValue = [NSNumber numberWithFloat:(2 * M_PI) * 3]; 3 rotationAnimation.duration = 1.9f; 4 rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 5 6 CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; 7 scaleAnimation.fromValue = [NSNumber numberWithFloat:0.0]; 8 scaleAnimation.toValue = [NSNumber numberWithFloat:1.0]; 9 scaleAnimation.duration = 2.0f; 10 scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 11 12 CAAnimationGroup *animationGroup = [CAAnimationGroup animation]; 13 animationGroup.duration = 2.0f; 14 animationGroup.autoreverses = YES; 15 animationGroup.repeatCount = HUGE_VALF; 16 [animationGroup setAnimations:[NSArray arrayWithObjects:rotationAnimation, scaleAnimation, nil]]; 17 18 [logoLayer addAnimation:animationGroup forKey:@"animationGroup"]; 1 [anim1 setBeginTime:0.0f]; // 设定第一个动画的开始时间 2 [anim2 setBeginTime:2.0f]; // 设定第二个动画的开始时间 这样可以按顺序显示动画效果 posted @ 2013-02-08 19:41 diablo大王 阅读(48) 评论(0) 编辑 CAKeyframeAnimation 关键帧动画 1 UIBezierPath *path = [UIBezierPath bezierPath]; 2 [path moveToPoint:CGPointMake(-40, 100)]; 3 [path addLineToPoint:CGPointMake(360, 100)]; 4 [path addLineToPoint:CGPointMake(360, 200)]; 5 [path addLineToPoint:CGPointMake(-40, 200)]; 6 [path addLineToPoint:CGPointMake(-40, 300)]; 7 [path addLineToPoint:CGPointMake(360, 300)]; 8 9 CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 10 moveAnimation.path = path.CGPath; 11 moveAnimation.duration = 8.0f; 12 moveAnimation.rotationMode = kCAAnimationRotateAuto; 13 [shapeLayer addAnimation:moveAnimation forKey:@"moveAnimation"]; 1 CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"]; 2 3 CATransform3D scale1 = CATransform3DMakeScale(0.5, 0.5, 1); 4 CATransform3D scale2 = CATransform3DMakeScale(1.2, 1.2, 1); 5 CATransform3D scale3 = CATransform3DMakeScale(0.9, 0.9, 1); 6 CATransform3D scale4 = CATransform3DMakeScale(1.0, 1.0, 1); 7 8 NSArray *frameValues = [NSArray arrayWithObjects: 9 [NSValue valueWithCATransform3D:scale1], 10 [NSValue valueWithCATransform3D:scale2], 11 [NSValue valueWithCATransform3D:scale3], 12 [NSValue valueWithCATransform3D:scale4], 13 nil]; 14 15 [animation setValues:frameValues]; 16 17 NSArray *frameTimes = [NSArray arrayWithObjects: 18 [NSNumber numberWithFloat:0.0], 19 [NSNumber numberWithFloat:0.5], 20 [NSNumber numberWithFloat:0.9], 21 [NSNumber numberWithFloat:1.0], 22 nil]; 23 [animation setKeyTimes:frameTimes]; 24 25 animation.fillMode = kCAFillModeForwards; 26 animation.duration = .25; 27 28 [self addAnimation:animation forKey:@"DSPopUpAnimation"]; 基于路径的关键帧动画 1 CGMutablePathRef path = CGPathCreateMutable(); 2 3 CGPathMoveToPoint(path, NULL, 50.0, 120.0); 4 CGPathAddCurveToPoint(path, NULL, 50.0, 275.0, 150.0, 275.0, 150.0, 120.0); 5 CGPathAddCurveToPoint(path,NULL,150.0,275.0,250.0,275.0,250.0,120.0); 6 CGPathAddCurveToPoint(path,NULL,250.0,275.0,350.0,275.0,350.0,120.0); 7 CGPathAddCurveToPoint(path,NULL,350.0,275.0,450.0,275.0,450.0,120.0); 8 9 CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 10 [anim setPath:path]; 11 [anim setDuration:3.0]; 12 [anim setAutoreverses:YES]; 13 CFRelease(path); 14 [self.layer addAnimation:anim forKey:@"path"]; 基于位置点的关键桢动画 1 CGPoint pt0 = CGPointMake(50.0, 120.0); 2 CGPoint pt1 = CGPointMake(50.0, 275.0); 3 CGPoint pt2 = CGPointMake(150.0, 275.0); 4 CGPoint pt3 = CGPointMake(150.0, 120.0); 5 CGPoint pt4 = CGPointMake(150.0, 275.0); 6 CGPoint pt5 = CGPointMake(250.0, 275.0); 7 CGPoint pt6 = CGPointMake(250.0, 120.0); 8 CGPoint pt7 = CGPointMake(250.0, 275.0); 9 CGPoint pt8 = CGPointMake(350.0, 275.0); 10 CGPoint pt9 = CGPointMake(350.0, 120.0); 11 CGPoint pt10 = CGPointMake(350.0, 275.0); 12 CGPoint pt11 = CGPointMake(450.0, 275.0); 13 CGPoint pt12 = CGPointMake(450.0, 120.0); 14 NSArray *values = [NSArray arrayWithObjects: 15 [NSValue valueWithCGPoint:pt0], 16 [NSValue valueWithCGPoint:pt1], 17 [NSValue valueWithCGPoint:pt2], 18 [NSValue valueWithCGPoint:pt3], 19 [NSValue valueWithCGPoint:pt4], 20 [NSValue valueWithCGPoint:pt5], 21 [NSValue valueWithCGPoint:pt6], 22 [NSValue valueWithCGPoint:pt7], 23 [NSValue valueWithCGPoint:pt8], 24 [NSValue valueWithCGPoint:pt9], 25 [NSValue valueWithCGPoint:pt10], 26 [NSValue valueWithCGPoint:pt11], 27 [NSValue valueWithCGPoint:pt12], nil]; 28 CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 29 [anim setValues:values]; 30 [anim setDuration:3.0]; 31 [anim setAutoreverses:YES]; 32 33 [self.layer addAnimation:anim forKey:@"path"]; 旋转180度 1 CAKeyframeAnimation *keyAnim = [CAKeyframeAnimation animationWithKeyPath:@"transform"]; 2 CATransform3D rotation1 = CATransform3DMakeRotation(30 * M_PI/180, 0, 0, -1); 3 CATransform3D rotation2 = CATransform3DMakeRotation(60 * M_PI/180, 0, 0, -1); 4 CATransform3D rotation3 = CATransform3DMakeRotation(90 * M_PI/180, 0, 0, -1); 5 CATransform3D rotation4 = CATransform3DMakeRotation(120 * M_PI/180, 0, 0, -1); 6 CATransform3D rotation5 = CATransform3DMakeRotation(150 * M_PI/180, 0, 0, -1); 7 CATransform3D rotation6 = CATransform3DMakeRotation(180 * M_PI/180, 0, 0, -1); 8 9 [keyAnim setValues:[NSArray arrayWithObjects: 10 [NSValue valueWithCATransform3D:rotation1], 11 [NSValue valueWithCATransform3D:rotation2], 12 [NSValue valueWithCATransform3D:rotation3], 13 [NSValue valueWithCATransform3D:rotation4], 14 [NSValue valueWithCATransform3D:rotation5], 15 [NSValue valueWithCATransform3D:rotation6], 16 nil]]; 17 [keyAnim setKeyTimes:[NSArray arrayWithObjects: 18 [NSNumber numberWithFloat:0.0], 19 [NSNumber numberWithFloat:0.2f], 20 [NSNumber numberWithFloat:0.4f], 21 [NSNumber numberWithFloat:0.6f], 22 [NSNumber numberWithFloat:0.8f], 23 [NSNumber numberWithFloat:1.0f], 24 nil]]; 25 [keyAnim setDuration:4]; 26 [keyAnim setFillMode:kCAFillModeForwards]; 27 [keyAnim setRemovedOnCompletion:NO]; 28 [zhiZhenLayer addAnimation:keyAnim forKey:nil]; posted @ 2013-02-08 10:51 diablo大王 阅读(146) 评论(0) 编辑 CABasicAnimation fillMode和removedOnCompletion 1 rotationAnimation.removedOnCompletion = NO; 2 3 rotationAnimation.fillMode = kCAFillModeForwards; fillMode的作用就是决定当前对象过了非active时间段的行为. 比如动画开始之前,动画结束之后。如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用. 下面来讲各个fillMode的意义 kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态 kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态 kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态 kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.