五、CAAnimationGroup (组动画)
CAAnimationGroup (组动画),可以理解将CAAnimation、CABasicAnimation、CAKeyframeAnimation等定义好的单个动画加在一个组里面,
实现多个动画一起执行的效果,从而使得动画效果更炫。
比如说,一个view在移动的时候,又要让其旋转,这里有两个动画,怎么样让它一起执行呢,请看下面的代码:
// // ViewController.m // CAAnimation // // Created by vincent_guo on 13-9-6. // Copyright (c) 2013年 vincent_guo. All rights reserved. // #import "ViewController.h" #import <QuartzCore/QuartzCore.h> @interface ViewController (){ UIImageView *_imageView; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. _imageView = [[UIImageView alloc] init]; _imageView.bounds = CGRectMake(0, 0, 50, 50); _imageView.center = CGPointMake(160, 50); _imageView.image = [UIImage imageNamed:@"clock"]; [self.view addSubview:_imageView]; [_imageView release]; } -(void)click:(id)sender{ [self groupAnimationMetho]; } #pragma mark 使用CAKeyframeAnimation让View向左转两圈,要向右转两圈,把-M_PI负号去掉就可以了 -(void)groupAnimationMetho{ _imageView.center.y == 350 ? [self up] : [self drop]; } #pragma mark 下落 -(void)drop{ CFTimeInterval duration = 1.0; CAKeyframeAnimation *rotateAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"]; rotateAnimation.duration = duration; //先从原始位置向左转180度,再向左转180度是-M_PI*4,不是-M_PI*2哦,自己好好理解下) rotateAnimation.values = [NSArray arrayWithObjects: [NSNumber numberWithFloat:0.0f], [NSNumber numberWithFloat:0.0f], [NSNumber numberWithFloat:-M_PI * 2], [NSNumber numberWithFloat:-M_PI * 4], nil]; //keyTimes里的每一个值对应valuse的每一个值,意思是动画哪个时候开始执行.比如动画时间是1秒,当1*0.7秒的时候开始招待-M_PI*2的动画 rotateAnimation.keyTimes = [NSArray arrayWithObjects: [NSNumber numberWithFloat:0], [NSNumber numberWithFloat:.6], [NSNumber numberWithFloat:.7], [NSNumber numberWithFloat:.8], nil]; //position 代表位置属性,如中心点(x,y)的值 CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; positionAnimation.duration = duration; //定义个position(位置变换的路径) CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path, NULL, 160, 50); CGPathAddLineToPoint(path, NULL, 160, 100); CGPathAddLineToPoint(path, NULL, 160, 150); CGPathAddLineToPoint(path, NULL, 160, 200); CGPathAddLineToPoint(path, NULL, 160, 350); CGPathAddLineToPoint(path, NULL, 160, 335);//为什么移动的y值又小了,是因为想让它实现反弹的效果 CGPathAddLineToPoint(path, NULL, 160, 350); positionAnimation.path = path; CGPathRelease(path); CAAnimationGroup *groupAnimation = [CAAnimationGroup animation]; groupAnimation.duration = duration; groupAnimation.fillMode = kCAFillModeForwards; // * 动画的开始与结束的快慢,有五个预置分别为(下同): // * kCAMediaTimingFunctionLinear 线性,即匀速 // * kCAMediaTimingFunctionEaseIn 先慢后快 // * kCAMediaTimingFunctionEaseOut 先快后慢 // * kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢 // * kCAMediaTimingFunctionDefault 实际效果是动画中间比较快. groupAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; //将移动和旋转动画加在一起 groupAnimation.animations = [NSArray arrayWithObjects:positionAnimation, rotateAnimation,nil]; [_imageView.layer addAnimation:groupAnimation forKey:@"drop"]; _imageView.center = (CGPoint){160, 350}; } #pragma mark 上升 -(void)up{ CFTimeInterval duration = 0.5; CAKeyframeAnimation *rotateAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"]; rotateAnimation.duration = duration; rotateAnimation.values = [NSArray arrayWithObjects: [NSNumber numberWithFloat:0.0f], [NSNumber numberWithFloat:M_PI * 2], [NSNumber numberWithFloat:M_PI * 4], nil]; rotateAnimation.keyTimes = [NSArray arrayWithObjects: [NSNumber numberWithFloat:0], [NSNumber numberWithFloat:.1], [NSNumber numberWithFloat:.2],nil]; //position 代表位置属性,如中心点(x,y)的值 CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; positionAnimation.duration = duration; //定义个position(位置变换的路径) CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path, NULL, 160, 350); CGPathAddLineToPoint(path, NULL, 160, 300); CGPathAddLineToPoint(path, NULL, 160, 200); CGPathAddLineToPoint(path, NULL, 160, 150); CGPathAddLineToPoint(path, NULL, 160, 50); CGPathAddLineToPoint(path, NULL, 160, 30); CGPathAddLineToPoint(path, NULL, 160, 50); positionAnimation.path = path; CGPathRelease(path); CAAnimationGroup *groupAnimation = [CAAnimationGroup animation]; groupAnimation.duration = duration; groupAnimation.fillMode = kCAFillModeForwards; groupAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; groupAnimation.animations = [NSArray arrayWithObjects:positionAnimation, rotateAnimation,nil]; [_imageView.layer addAnimation:groupAnimation forKey:@"up"]; _imageView.center = (CGPoint){160, 50}; } @end
源代码可以下载来运行看下效果:点击下载CAAnimationGroupDemo