8.1 Core Animation入门
Core Animation(或者叫Quartz Core)是一个Objective-C类库,内建于IOS媒体层中,是所有
动画的后台支柱。
与Core Animation并不局限于二维平面,而是可以用于三维变换。
Core Animation的许多层面已经内置与UIKit的基本操作中了,如UIViewController的切换动画,UIView的属性(如透明度,位置等)都可轻松的用动画方式改变。
可以使用UIKit动画的UIView属性:
如果直接使用Core Animation需要使用
8.2 通过UIKit使用Core Animation
-
通过动画上下文使用UIKit动画
//1.设置UIView初始条件 UIView *box=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 20, 20)]; //2.启动动画上下文,并配置上下文参数 [UIView beginAnimations:@"box-animation" context:nil]; [UIView setAnimationDuration:1.]; //3.对UIView属性修改 box.frame=CGRectMake(0, 0, 20, 20); box.backgroundColor=[UIColor greenColor]; //4.提交动画 [UIView commitAnimations];
-
通过动画代码块使用UIKit动画
[UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCur
veLinear animations:^(void){ box.backgroundColor = [UIColor redColor]; Core aniMation using uikit 199 box.frame = CGRectMake(50, 50, 100, 100); box.alpha = .5; } completion:^(BOOL finished){ //Add additional code NSLog(@”Animation Finished”); }];
8.3 理解自定义Core Animation效果
- Core Animation图层
CALayer,每个UIView都有一个CALaer属性,作为该视图底层表达形式。
使用CALayer的属性做成动画,有些是UIKit中没有的,如旋转的锚点、圆角半径、掩码图层、阴影。 -
隐式动画和显式动画
一个CALayer包含了一个表现层和模型层。模型层存储必要的图层信息。表现层用于将模型数据显示在屏幕上没没,并做了相应优化。这样做可以提升性能,比如动画是持续变化如持续旋转,就用显式动画,因为不用修改模型层。- 隐式动画:动画属性在模型层修改
- 显式动画:动画属性存在于表现层,模型层未变化,所以显式动画结束之后CALayer会回到动画开始前的状态。
-
Core Animation对象:
与UIKit动画实现的一个不同之处在于可以使用CoreAnimation类即CAAnimation,CAAnimation及其子类都是显式动画。- CABasicAnimation:图层基本属性,使用CAAnimationGroup加同时添加几个,组合动画。
- CAKeyframeAnimation:图层基本属性
-
CATransition:整个图层。
// Set up a basic animation for rotation on z axis (spinning) CABasicAnimation *spin = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; // Set the value of the spin to 2*pi, this is 1 complete rotation in radians spin.toValue = [NSNumber numberWithDouble:M_PI*2]; // Sping for a really long time..... spin.repeatCount = 1e100; spin.duration = 1.5; // duration to animate a full revolution of 2*Pi radians. [box.layer addAnimation:spin forKey:@"transform"]; //注意CAAnimation及其子类都是显式动画,所以如果要真正发生变化,需要加 //self.layer.属性=````
8.4 Core Animation示例
-
关键帧动画
顾名思义,定义关键步骤CAKeyframeAnimation *animation = [CAKeyframeAnimation animation]; //没有tovalue,而是一个数组,每个值都会被用作一个关键帧 animation.values = [NSArray arrayWithObjects: (id)box.layer.backgroundColor,//这是初始条件 (id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor, (id)[UIColor blueColor].CGColor,nil]; animation.duration = 3; animation.autoreverses = YES; [box.layer addAnimation:animation forKey:@"backgroundColor"]; //注意这个key很重要 //沿着路径进行的动画 CAKeyframeAnimation *animation = [CAKeyframeAnimation animation]; CGMutablePathRef aPath = CGPathCreateMutable(); CGPathMoveToPoint(aPath,nil,20,40); //Origin Point CGPathAddCurveToPoint(aPath,nil, 160,30, //Control Point 1 220,220, //Control Point 2 240,380); // End Point animation.rotationMode = @"auto";//设置auto会沿着路径的切线旋转 animation.path = aPath; animation.duration = 1; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEa
seIn]; [ball.layer addAnimation:animation forKey:@"position"]; CFRelease(aPath); -
3D旋转
//Step 1: 创建基本的y轴旋转Create basic y-axis rotation animation CABasicAnimation *flip = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"]; flip.toValue = [NSNumber numberWithDouble:-M_PI]; //Step 2: 创建基本的缩放reate Basic scale animation CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; scale.toValue = [NSNumber numberWithDouble:.9]; scale.duration = .5; scale.autoreverses = YES; //Step 3: 合成动画组合Combine scale and flip into 1 animation group CAAnimationGroup *group = [CAAnimationGroup animation]; group.animations = [NSArray arrayWithObjects:flip, scale, nil]; group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEa
seInEaseOut]; group.duration = 1; group.fillMode = kCAFillModeForwards; group.removedOnCompletion = NO; //Step 4: 添加动画Add animation group to our layer [box.layer addAnimation:group forKey:@"flip"]; //上面的例子不是真正的3D效果,而是用大小来模拟的,需要用到CATransform3D矩阵 //Step 1: Create basic y-axis rotation animation CABasicAnimation *flip = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"]; flip.toValue = [NSNumber numberWithDouble:-M_PI]; flip.duration=1.5; //Step 2 CATransform3D perspective=CATransform3DIdentity; perspective.m34=-1.0/500.0;//这个值为0无透视,为1则透视点在无限远处 perspective=CATransform3DRotate(perspective, 0, 0, 1, 0); box.layer.transform=perspective; [box.layer addAnimation:flip forKey:@"flip"];