CABasicAnimation 脉冲效果

最新推荐文章于 2025-06-02 09:06:27 发布
yongyinmg
最新推荐文章于 2025-06-02 09:06:27 发布
阅读量4k
点赞数
分类专栏： ios动画
ios动画专栏收录该内容
35 篇文章
订阅专栏
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保持动画最后的状态.