转自荣芳志的博客:
Core Animation之基础介绍
Core Animation可以翻译为核心动画,它为图形渲染和动画提供了基础。使用核心动画,你只需要设置一些参数比如起点和终点,剩下的帧核心动画为你自动完成。核心动画使用硬件加速,不用消耗cpu资源。其实平时咱们开发的iOS应用都在有意无意的使用了核心动画。动画不会替代View,而是和View一起提供更好的性能。Core Animation通过缓存view上的内容到bitmap,这样bitmap就可以直接在图形硬件上操作。从而提高了性能。
Class | Usage |
---|---|
Used to implement a Core Animation–based particle emitter system. The emitter layer object controls the generation of the particles and their origin. | |
Used to draw a color gradient that fills the shape of the layer (within the bounds of any rounded corners). | |
Used to set up the backing store and context needed to draw using OpenGL ES (iOS) or OpenGL (OS X). | |
Used when you want to make copies of one or more sublayers automatically. The replicator makes the copies for you and uses the properties you specify to alter the appearance or attributes of the copies. | |
Used to manage a large scrollable area composed of multiple sublayers. | |
Used to draw a cubic Bezier spline. Shape layers are advantageous for drawing path-based shapes because they always result in a crisp path, as opposed to a path you draw into a layer’s backing store, which would not look as good when scaled. However, the crisp results do involve rendering the shape on the main thread and caching the results. | |
Used to render a plain or attributed string of text. | |
Used to manage a large image that can be divided into smaller tiles and rendered individually with support for zooming in and out of the content. | |
Used to render a true 3D layer hierarchy, rather than the flattened layer hierarchy implemented by other layer classes. | |
| Used to render a Quartz Composer composition. (OS X only) |
- CAAnimationGroup *animGroup = [CAAnimationGroup animation];
- animGroup.animations = [NSArray arrayWithObjects:moveAnim,scaleAnim,opacityAnim, nil];
- animGroup.duration = 1;
- [view.layer addAnimation:animGroup forKey:nil];
- CALayer *myLayer = myView.layer;
- #import <QuartzCore/QuartzCore.h>
- // Uncomment viewDidLoad and add the following lines
- self.view.layer.backgroundColor = [UIColor orangeColor].CGColor;
- self.view.layer.cornerRadius = 20.0;
- CALayer *sublayer = [CALayer layer];
- CALayer *sublayer = [CALayer layer];
- sublayer.backgroundColor = [UIColor purpleColor].CGColor;
- sublayer.shadowOffset = CGSizeMake(0, 3);
- sublayer.shadowRadius = 5.0;
- sublayer.shadowColor = [UIColor blackColor].CGColor;
- sublayer.shadowOpacity = 0.8;
- sublayer.frame = CGRectMake(30, 30, 128, 192);
- [self.view.layer addSublayer:sublayer];
- CALayer *sublayer = [CALayer layer];
- sublayer.backgroundColor = [UIColor purpleColor].CGColor;
- sublayer.shadowOffset = CGSizeMake(0, 3);
- sublayer.shadowRadius = 5.0;
- sublayer.shadowColor = [UIColor blackColor].CGColor;
- sublayer.shadowOpacity = 0.8;
- sublayer.frame = CGRectMake(30, 30, 128, 192);
- sublayer.borderColor = [UIColor blackColor].CGColor;
- sublayer.borderWidth = 2.0;
- sublayer.cornerRadius = 10.0;
- [self.view.layer addSublayer:sublayer];
- CALayer *imageLayer = [CALayer layer];
- imageLayer.frame = sublayer.bounds;
- imageLayer.cornerRadius = 10.0;
- imageLayer.contents = (id)[UIImage imageNamed:@"snaguosha.png"].CGImage;
- imageLayer.masksToBounds = YES;
- [sublayer addSublayer:imageLayer];
- static inline double radians (double degrees) { return degrees * M_PI/180; }
- void MyDrawColoredPattern (void *info, CGContextRef context) {
- CGColorRef dotColor = [UIColor colorWithHue:0 saturation:0 brightness:0.07 alpha:1.0].CGColor;
- CGColorRef shadowColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.1].CGColor;
- CGContextSetFillColorWithColor(context, dotColor);
- CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 1, shadowColor);
- CGContextAddArc(context, 3, 3, 4, 0, radians(360), 0);
- CGContextFillPath(context);
- CGContextAddArc(context, 16, 16, 4, 0, radians(360), 0);
- CGContextFillPath(context);
- }
- - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context {
- CGColorRef bgColor = [UIColor colorWithHue:0 saturation:0 brightness:0.15 alpha:1.0].CGColor;
- CGContextSetFillColorWithColor(context, bgColor);
- CGContextFillRect(context, layer.bounds);
- static const CGPatternCallbacks callbacks = { 0, &MyDrawColoredPattern, NULL };
- CGContextSaveGState(context);
- CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL);
- CGContextSetFillColorSpace(context, patternSpace);
- CGColorSpaceRelease(patternSpace);
- CGPatternRef pattern = CGPatternCreate(NULL,
- layer.bounds,
- CGAffineTransformIdentity,
- 24,
- 24,
- kCGPatternTilingConstantSpacing,
- true,
- &callbacks);
- CGFloat alpha = 1.0;
- CGContextSetFillPattern(context, pattern, &alpha);
- CGPatternRelease(pattern);
- CGContextFillRect(context, layer.bounds);
- CGContextRestoreGState(context);
- }
- static inline double radians (double degrees) { return degrees * M_PI/180; }
- void MyDrawColoredPattern (void *info, CGContextRef context) {
- CGColorRef dotColor = [UIColor colorWithHue:0 saturation:0 brightness:0.07 alpha:1.0].CGColor;
- CGColorRef shadowColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.1].CGColor;
- CGContextSetFillColorWithColor(context, dotColor);
- CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 1, shadowColor);
- CGContextAddArc(context, 3, 3, 4, 0, radians(360), 0);
- CGContextFillPath(context);
- CGContextAddArc(context, 16, 16, 4, 0, radians(360), 0);
- CGContextFillPath(context);
- }
- - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context {
- CGColorRef bgColor = [UIColor colorWithHue:0 saturation:0 brightness:0.15 alpha:1.0].CGColor;
- CGContextSetFillColorWithColor(context, bgColor);
- CGContextFillRect(context, layer.bounds);
- static const CGPatternCallbacks callbacks = { 0, &MyDrawColoredPattern, NULL };
- CGContextSaveGState(context);
- CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL);
- CGContextSetFillColorSpace(context, patternSpace);
- CGColorSpaceRelease(patternSpace);
- CGPatternRef pattern = CGPatternCreate(NULL,
- layer.bounds,
- CGAffineTransformIdentity,
- 24,
- 24,
- kCGPatternTilingConstantSpacing,
- true,
- &callbacks);
- CGFloat alpha = 1.0;
- CGContextSetFillPattern(context, pattern, &alpha);
- CGPatternRelease(pattern);
- CGContextFillRect(context, layer.bounds);
- CGContextRestoreGState(context);
- }
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"snaguosha.png"]];
- self.imageView.frame = CGRectMake(10, 10, 128, 192);
- [self.view addSubview:self.imageView];
- }
- - (IBAction)tranAction:(id)sender {
- CGPoint fromPoint = self.imageView.center;
- //路径曲线
- UIBezierPath *movePath = [UIBezierPath bezierPath];
- [movePath moveToPoint:fromPoint];
- CGPoint toPoint = CGPointMake(300, 460);
- [movePath addQuadCurveToPoint:toPoint
- controlPoint:CGPointMake(300,0)];
- //关键帧
- CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
- moveAnim.path = movePath.CGPath;
- moveAnim.removedOnCompletion = YES;
- //旋转变化
- CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
- scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
- //x,y轴缩小到0.1,Z 轴不变
- scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
- scaleAnim.removedOnCompletion = YES;
- //透明度变化
- CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];
- opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
- opacityAnim.toValue = [NSNumber numberWithFloat:0.1];
- opacityAnim.removedOnCompletion = YES;
- //关键帧,旋转,透明度组合起来执行
- CAAnimationGroup *animGroup = [CAAnimationGroup animation];
- animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim,opacityAnim, nil];
- animGroup.duration = 1;
- [self.imageView.layer addAnimation:animGroup forKey:nil];
- }
- - (IBAction)RightRotateAction:(id)sender {
- CGPoint fromPoint = self.imageView.center;
- UIBezierPath *movePath = [UIBezierPath bezierPath];
- [movePath moveToPoint:fromPoint];
- CGPoint toPoint = CGPointMake(fromPoint.x +100 , fromPoint.y ) ;
- [movePath addLineToPoint:toPoint];
- CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
- moveAnim.path = movePath.CGPath;
- CABasicAnimation *TransformAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
- TransformAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
- //沿Z轴旋转
- TransformAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,0,0,1)];
- //沿Y轴旋转
- // scaleAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,0,1.0,0)];
- //沿X轴旋转
- // TransformAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,1.0,0,0)];
- TransformAnim.cumulative = YES;
- TransformAnim.duration =3;
- //旋转2遍,360度
- TransformAnim.repeatCount =2;
- self.imageView.center = toPoint;
- TransformAnim.removedOnCompletion = YES;
- CAAnimationGroup *animGroup = [CAAnimationGroup animation];
- animGroup.animations = [NSArray arrayWithObjects:moveAnim, TransformAnim, nil];
- animGroup.duration = 6;
- [self.imageView.layer addAnimation:animGroup forKey:nil];
- }
- - (IBAction)Rotate360Action:(id)sender {
- //图片旋转360度
- CABasicAnimation *animation = [ CABasicAnimation
- animationWithKeyPath: @"transform" ];
- animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
- //围绕Z轴旋转,垂直与屏幕
- animation.toValue = [ NSValue valueWithCATransform3D:
- CATransform3DMakeRotation(M_PI, 0, 0, 1.0) ];
- animation.duration = 3;
- //旋转效果累计,先转180度,接着再旋转180度,从而实现360旋转
- animation.cumulative = YES;
- animation.repeatCount = 2;
- //在图片边缘添加一个像素的透明区域,去图片锯齿
- CGRect imageRrect = CGRectMake(0, 0, self.imageView.frame.size.width, self.imageView.frame.size.height);
- UIGraphicsBeginImageContext(imageRrect.size);
- [self.imageView.image drawInRect:CGRectMake(1,1,self.imageView.frame.size.width-2,self.imageView.frame.size.height-2)];
- self.imageView.image = UIGraphicsGetImageFromCurrentImageContext();
- UIGraphicsEndImageContext();
- [self.imageView.layer addAnimation:animation forKey:nil];
- }
- - (void)animationInit
- {
- self.view.backgroundColor = [UIColor blackColor];
- CGFloat radius = 30.0f;
- CGFloat diameter = radius * 2;
- CGPoint arcCenter = CGPointMake(radius, radius);
- // Create a UIBezierPath for Pacman's open state
- pacmanOpenPath = [UIBezierPath bezierPathWithArcCenter:arcCenter
- radius:radius
- startAngle:DEGREES_TO_RADIANS(35)
- endAngle:DEGREES_TO_RADIANS(315)
- clockwise:YES];
- [pacmanOpenPath addLineToPoint:arcCenter];
- [pacmanOpenPath closePath];
- // Create a UIBezierPath for Pacman's close state
- pacmanClosedPath = [UIBezierPath bezierPathWithArcCenter:arcCenter
- radius:radius
- startAngle:DEGREES_TO_RADIANS(1)
- endAngle:DEGREES_TO_RADIANS(359)
- clockwise:YES];
- [pacmanClosedPath addLineToPoint:arcCenter];
- [pacmanClosedPath closePath];
- // Create a CAShapeLayer for Pacman, fill with yellow
- shapeLayer = [CAShapeLayer layer];
- shapeLayer.fillColor = [UIColor yellowColor].CGColor;
- shapeLayer.path = pacmanClosedPath.CGPath;
- shapeLayer.strokeColor = [UIColor grayColor].CGColor;
- shapeLayer.lineWidth = 1.0f;
- shapeLayer.bounds = CGRectMake(0, 0, diameter, diameter);
- shapeLayer.position = CGPointMake(-40, -100);
- [self.view.layer addSublayer:shapeLayer];
- SEL startSelector = @selector(startAnimation);
- UIGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:startSelector];
- [self.view addGestureRecognizer:recognizer];
- }
- - (void)startAnimation {
- // 创建咬牙动画
- CABasicAnimation *chompAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
- chompAnimation.duration = 0.25;
- chompAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
- chompAnimation.repeatCount = HUGE_VALF;
- chompAnimation.autoreverses = YES;
- // Animate between the two path values
- chompAnimation.fromValue = (id)pacmanClosedPath.CGPath;
- chompAnimation.toValue = (id)pacmanOpenPath.CGPath;
- [shapeLayer addAnimation:chompAnimation forKey:@"chompAnimation"];
- // Create digital '2'-shaped path
- UIBezierPath *path = [UIBezierPath bezierPath];
- [path moveToPoint:CGPointMake(0, 100)];
- [path addLineToPoint:CGPointMake(300, 100)];
- [path addLineToPoint:CGPointMake(300, 200)];
- [path addLineToPoint:CGPointMake(0, 200)];
- [path addLineToPoint:CGPointMake(0, 300)];
- [path addLineToPoint:CGPointMake(300, 300)];
- CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
- moveAnimation.path = path.CGPath;
- moveAnimation.duration = 8.0f;
- // Setting the rotation mode ensures Pacman's mouth is always forward. This is a very convenient CA feature.
- moveAnimation.rotationMode = kCAAnimationRotateAuto;
- [shapeLayer addAnimation:moveAnimation forKey:@"moveAnimation"];
- }
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- [self animationInit];
- }