iOS开发学习之核心动画.doc

/iOS开发学习之核心动画核心动画基本概念基础动画（CABasicAnimation）关键帧动画（CAKeyframeAnimation）动画组转场动画CATransitionUIView的转场动画双视图一、核心动画基本概念1.导入QuartzCore.framework框架开发步骤1).初始化一个动画对象（CAAnimation）并且设置一些动画相关属性2).CALayer中很多属性都可以通过CAAnimation实现动画效果，包括：opacity、position、transform、bounds、contents等（可以在API文档中搜索：CALayer Animatable Properties）3).添加动画对象到层（CALayer）中，开始执行动画4).通过调用CALayer的addAnimation：forKey增加动画到层（CALayer）中，这样就能触发动画。通过调用removeAnimationForKey可以停止层中的动画5).Core Animation的动画执行过程都是后台操作的，不会阻塞主线程2.属性1).duration：动画的持续时间2).repeatCount：重复次数（HUGE_VALF、MAX FLOAT无限重复）3).repeatDuration：重复时间（用的很少）4).removedOnCompletion：默认为Yes。动画执行完后默认会从图层删除掉5).fillMode6).biginTime7).timingFunction：速度控制函数，控制动画节奏8).delegate 二、基础动画（CABasicAnimation）如果只是实现简单属性变化的动画效果，可以使用UIView的块动画替代基本动画1.属性说明fromValue：keyPath相应属性值的初始值toValue：keyPath相应属性的结束值2.动画过程说明：随着动画的就行，在duration的持续时间内，keyPath相应的属性值从fromValue渐渐变为toValuekeyPath内容是CALayer的可动画Animation属性如果fillModekCAFillModeForwards同时removedOnCompletionNO，那么在动画执行完毕后，图层会保持显示动画执行后的状态，但在实质上，图层的属性值还是动画执行前的初始值，并没有真正改变3.代码实现位移需要考虑目标点设定的问题1.将动画的所有方法封装到一个类里面MyCAHelper.h#import #import #define kCAHelperAlphaAnimation opacity; / 淡入淡出动画#define kCAHelperScaleAnimation transform.scale; / 比例缩放动画#define kCAHelperRotationAnimation transform.rotation; / 旋转动画#define kCAHelperPositionAnimation position; / 平移位置动画interface MyCAHelper : NSObject#pragma mark - 基本动画统一调用方法+ (CABasicAnimation *)myBasicAnimationWithType:(NSString *)animationType duration:(CFTimeInterval)duration from:(NSValue *)from to:(NSValue *)to autoRevereses:(BOOL)autoRevereses;#pragma mark - 关键帧动画方法#pragma mark 摇晃动画+ (CAKeyframeAnimation *)myKeyShakeAnimationWithDuration:(CFTimeInterval)duration angle:(CGFloat)angle repeatCount:(CGFloat)repeatCount;#pragma mark 贝塞尔路径动画+ (CAKeyframeAnimation *)myKeyPathAnimationWithDuration:(CFTimeInterval)duration path:(UIBezierPath *)path;#pragma mark 弹力仿真动画+ (CAKeyframeAnimation *)myKeyBounceAnimationFrom:(CGPoint)from to:(CGPoint)to duration:(CFTimeInterval)duration;endMyCAHelper.m#import MyCAHelper.himplementation MyCAHelper#pragma mark - 基本动画统一调用方法+ (CABasicAnimation *)myBasicAnimationWithType:(NSString *)animationType duration:(CFTimeInterval)duration from:(NSValue *)from to:(NSValue *)to autoRevereses:(BOOL)autoRevereses/ 1. 实例化一个CA动画对象 CABasicAnimation *anim = CABasicAnimation animationWithKeyPath:animationType;/ 2. 设置动画属性 anim setDuration:duration; anim setFromValue:from; anim setToValue:to; anim setAutoreverses:autoRevereses; return anim;#pragma mark - 关键帧动画方法#pragma mark 摇晃动画+ (CAKeyframeAnimation *)myKeyShakeAnimationWithDuration:(CFTimeInterval)duration angle:(CGFloat)angle repeatCount:(CGFloat)repeatCount/ 1. 初始化动画对象实例 CAKeyframeAnimation *anim = CAKeyframeAnimation animationWithKeyPath:transform.rotation;/ 2. 设置动画属性 anim setDuration:duration; anim setValues:(angle), (-angle), (angle); anim setRepeatCount:repeatCount; return anim;#pragma mark 贝塞尔路径动画+ (CAKeyframeAnimation *)myKeyPathAnimationWithDuration:(CFTimeInterval)duration path:(UIBezierPath *)path/ 1. 初始化动画对象实例 CAKeyframeAnimation *anim = CAKeyframeAnimation animationWithKeyPath:position;/ 2. 设置动画属性 anim setDuration:duration; anim setPath:path.CGPath; return anim;#pragma mark 弹力仿真动画+ (CAKeyframeAnimation *)myKeyBounceAnimationFrom:(CGPoint)from to:(CGPoint)to duration:(CFTimeInterval)duration/是一个基于路径的动画/首先定义一个路径，记录弹力仿真的整个路径 CGMutablePathRef path = CGPathCreateMutable();/弹力仿真路径创建代码/计算起始点与目标点之间的位置偏移量，这个偏移量的目的是为了能够计算出小球第一次延伸的长度 CGFloat offsetX = from.x - to.x; CGFloat offsetY = from.y - to.y;/ 1. 移动到起始点 CGPathMoveToPoint(path, NULL, from.x, from.y);/ 2. 将目标点的坐标添加到路径之中 CGPathAddLineToPoint(path, NULL, to.x, to.y);/ 3. 设置小球的弹力因子 CGFloat offsetDivider = 4.0f; while (YES) /加延伸方向的路径 CGPathAddLineToPoint(path, NULL, to.x + offsetX / offsetDivider, to.y + offsetY / offsetDivider);/再次将目标点添加到路径 CGPathAddLineToPoint(path, NULL, to.x, to.y);/弹力因子递增，保证越来越接近目标点 offsetDivider += 6.0f;/当小球的当前位置距离目标点足够小，我们退出循环 if (abs(offsetX / offsetDivider) 10.0f)& (abs(offsetY / offsetDivider) 10.0f) break; CAKeyframeAnimation *anim = CAKeyframeAnimation animationWithKeyPath:position; anim setPath:path;/释放路径 CGPathRelease(path); anim setDuration:duration; return anim;end#import ViewController.h#import MyCAHelper.hinterface ViewController () UIView *_demoView; CGPoint location;endimplementation ViewController- (void)viewDidLoad super viewDidLoad;/ Do any additional setup after loading the view, typically from a nib. self.view setBackgroundColor:UIColor lightGrayColor; _demoView = UIView allocinitWithFrame:CGRectMake(50, 50, 100, 100); _demoView setBackgroundColor:UIColor whiteColor; self.view addSubview:_demoView;- (void)didReceiveMemoryWarning super didReceiveMemoryWarning;/ Dispose of any resources that can be recreated.- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event UITouch *touch = touches anyObject; location = touch locationInView:self.view;/_demoView setCenter:location;/* 1.测试基本动画 */CABasicAnimation *anim = self testBasic1;/anim setRepeatCount:3;/_demoView.layer addAnimation:anim forKey:nil;/* 2.测试弹力仿真动画效果 */_demoView.layer addAnimation:self test1:_demoView.center to:location forKey:nil;/* 3.测试路径关键帧动画 */_demoView.layer addAnimation:self test2 forKey:nil;/_demoView.layer addAnimation:self test4:_demoView.center to:location forKey:nil;/* 4.测试摇晃关键帧动画 */点击屏幕，开始摇晃，再次点击，停止摇晃/CAAnimation *anim = _demoView.layer animationForKey:shakeAnimation;/if (anim) /_demoView.layer removeAnimationForKey:shakeAnimation;/ else /_demoView.layer addAnimation:self test5 forKey:shakeAnimation;/ CAKeyframeAnimation *anim = self test1:_demoView.center to:location; _demoView.layer addAnimation:anim forKey:nil;-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag/需要在这里对不同对象的动画方法进行完成处理！ _demoView setCenter:location; NSLog(%, NSStringFromCGPoint(_demoView.center);#pragma mark - 重构方法测试#pragma mark 测试贝塞尔路径关键帧动画- (CAKeyframeAnimation *)test5 return MyCAHelper myKeyShakeAnimationWithDuration:0.2 angle:M_PI_4 / 18 repeatCount:MAXFLOAT;#pragma mark 测试贝塞尔路径关键帧动画- (CAKeyframeAnimation *)test4:(CGPoint)from to:(CGPoint)to UIBezierPath *path = UIBezierPath bezierPath;/有两个控制点去挤出的曲线，能挤出S型的曲线 path moveToPoint:from; path addCurveToPoint:to controlPoint1:CGPointMake(320, 0) controlPoint2:CGPointMake(0, 460); return MyCAHelper myKeyPathAnimationWithDuration:2.0 path:path;#pragma mark 测试贝塞尔路径关键帧动画- (CAKeyframeAnimation *)test3:(CGPoint)from to:(CGPoint)to UIBezierPath *path = UIBezierPath bezierPath;/只有一个控制点去挤出的曲线 path moveToPoint:from; path addQuadCurveToPoint:to controlPoint:CGPointMake(320, 230); return MyCAHelper myKeyPathAnimationWithDuration:2.0 path:path;#pragma mark 测试路径关键帧动画- (CAKeyframeAnimation *)test2 UIBezierPath *path = UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100); return MyCAHelper myKeyPathAnimationWithDuration:2.0 path:path;#pragma mark 测试弹力仿真动画效果- (CAKeyframeAnimation *)test1:(CGPoint)from to:(CGPoint)to CAKeyframeAnimation *anim = MyCAHelper myKeyBounceAnimationFrom:from to:to duration:1.5; anim setFillMode:kCAFillModeForwards; anim setRemovedOnCompletion:NO; anim setDelegate:self; return anim;- (CABasicAnimation *)testBasic1 return MyCAHelper myBasicAnimationWithType:opacity duration:1.0 from:(1.0) to:(0.3) autoRevereses:YES;end三、关键帧动画（CAKeyframeAnimation）基础动画只能从一个值到另一个值，关键帧动画可以用一个数组保存一系列值1.属性说明values：所有的值（用的较少）path：路线（如果设置了path，那么values将被忽略）keyTimes：可以为对应的关键帧制定对应的时间点，取值范围是0到1.02.过程步骤初始化自定义视图点击屏幕，执行动画 1.指定点平移动画（values） 2.路径平移动画（path C语言框架CGMutablePathRef，需要手动释放内存） 3.贝塞尔路径动画（OC框架UIBezierPath） 4.摇晃动画（修改旋转角度）3.代码重构如上代码，重构在了一起四、动画组动画是可以并发执行的定义一个group组定义动画将动画加入group组可以给组设置属性- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event UITouch *touch = touches anyObject; CGPoint location = touch locationInView:self.view; _demoView setBackgroundColor:UIColor redColor;/ 1. 定义动画组 CAAnimationGroup *group = CAAnimationGroup animation;/定义一组动画/淡入淡出动画 CABasicAnimation *alpha = MyCAHelper myBasicAnimationWithType:kCAHelperAlphaAnimation duration:1.0 from:(1.0) to:(0.3) autoRevereses:YES;/旋转动画 CABasicAnimation *rotation = MyCAHelper myBasicAnimationWithType:kCAHelperRotationAnimation duration:2.0 from:(-M_PI_2) to:(M_PI_2) autoRevereses:NO;/缩放动画 CABasicAnimation *scale = MyCAHelper myBasicAnimationWithType:kCAHelperScaleAnimation duration:0.5 from:(1.0) to:(0.1) autoRevereses:YES;/关键帧路径动画，弹力仿真动画效果 CAKeyframeAnimation *path = self test1:_demoView.center to:location;/ 2. 设置动画组属性 group setAnimations:alpha, path, rotation, scale;/设置动画的时长 group setDuration:4.0;/ 3. 将动画组添加到图层 _demoView.layer addAnimation:group forKey:nil;五、转场动画CATransition1.属性说明type：动画过渡类型subtype：动画过渡方向startProgress：动画起点（在整体动画的百分比）endProgress：动画终点（在整体动画的百分比）增加一个转场演示视图增加轻扫手势在轻扫手势方法中 1.更改演示视图内容 2.创建转场动画效果 3.将转场动画添加到视图的图层/轻扫手势操作- (void)swipeAction:(UISwipeGestureRecognizer *)sender/通过轻扫手势，让切换出来的视图是蓝色的 if (_demoView.tag = 0) _demoView setBackgroundColor:UIColor blueColor; _demoView setTag:1; else _demoView setBackgroundColor:UIColor redColor; _demoView setTag:0; /根据视图内容我们来实现专场动画 CATransition *anim = CATransition animation;/设置专场动画的过渡类型 anim setType:cameraIrisHollowClose;/需要根据手势的方向，来决定专场动画的动画方向/注意：在转场动画中，动画方向的左右是和手势的方向相反的 if (sender.direction = UISwipeGestureRecognizerDirectionLeft) anim setSubtype:kCATransitionFromRight; else anim setSubtype:kCATransitionFromLeft; _demoView.layer addAnimation:anim forKey:nil;- (void)viewDidLoad super viewDidLoad;/ Do any additional setup after loading the view, typically from a nib./ 1. 实例化自定义视图 _demoView = UIView allocinitWithFrame:self.view.bounds; _demoView setBackgroundColor:UIColor redColor; self.view addSubview:_demoView;/ 2. 增加轻扫手势 UISwipeGestureRecognizer *swipeLeft = UISwipeGestureRecognizer alloc initWithTarget:self action:selector(swipeAction:); swipeLeft setDirection:UISwipeGestureRecognizerDirectionLeft; _demoView addGestureRecognizer:swipeLeft; UISwipeGestureRecognizer *swipeRight = UISwipeGestureRecognizer alloc initWithTarget:self action:selector(swipeAction:); swipeRight setDirection:UISwipeGestureRecognizerDirectionRight; _demoView addGestureRecognizer:swipeRight;六、UIView的转场动画双视图+(void)transitionWithView:(UIView*)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void()(void)animations completion:(void()(BOOL finished)completion;1.参数说明duration：动画的持续时间view：需要进行转场动画的视图options：转场动画的类型animations：将改变视图属性的代码放在这个Block里completion：动画结束后，自动调用的Blockinterface ViewController () UIImageView *_demoImageView; UIImageView *_demoImageView2;endimplementation ViewController- (void)viewDidLoad super viewDidLoad;/ Do any additional setup after loading the view, typically from a nib./实例化第一个UIImageView的对象 _demoImageView = UIImageView allocinitWithImage:UIImage imageNamed:1.jpg; self.view addSubview