Core Animation之多种动画效果

jopen 10年前

前面介绍了Core Animation基础知识,还有CALayer的简单使用,最终还是有要动画的滴,这里列出几个动画效果,参考下能加深对Core Animation的认识和理解

1、把图片移到右下角变小透明

使用CAAnimationGroup叠加动画效果,就是下面按钮《把图片移到右下角变小透明》描述的效果:

Core Animation之多种动画效果    Core Animation之多种动画效果   Core Animation之多种动画效果

上面三个图是动画的三个状态,实现代码如下:

- (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];  }


代码解析:上面关键帧设置了动画的路径,scaleAnim设置了缩小,opacityAnim设置了透明度的变化。把三个动画组合到:animGroup。

在把animGroup添加到imageView.layer层的动画里。于是动画效果就有了。

2、旋转并向右移动

- (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];  }
代码解析:可能你没注意到, CATransform3DMakeRotation,这返回的是旋转的值。上面的动画效果里返回的是 CATransform3DMakeScale缩放的值。
向右移动是因为关键帧使用了路径为直线的路径。

3、旋转并消除边缘锯齿

- (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];  }
如果你仔细观察,会看到第二个动画里在旋转时,图片边缘是有锯齿的,如何消除呢? 在图片边缘添加一个像素的透明区域,去图片锯齿。

UIGraphicsBeginImageContext 开始图片内容

UIGraphicsGetImageFromCurrentImageContext 获取当前内容作为图片,

UIGraphicsEndImageContext结束。是和UIGraphicsBeginImageContext配套使用的。

4、吃豆人动画

这个有点复杂,首先说下实现的步骤:
  1. 画一个吃豆人开口的路径:pacmanOpenPath
  2. 画一个吃豆人闭口的路径:pacmanClosedPath
  3. 新建一个闭口的吃豆人头的层:shapeLayer
  4. 把开口和闭口路径设置成CABasicAnimation *chompAnimation动画的起点和终点,这样循环就能出现咬牙的动画了。
  5. 最后设置一个路径为关键帧,让吃豆人在这条路径上行动。
代码如下:
- (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];  }

还需要添加一个宏:

#define DEGREES_TO_RADIANS(x) (3.14159265358979323846 * x / 180.0)    计算角度转换

添加了个手势,点一下屏幕,吃豆人就动起来了。效果:

Core Animation之多种动画效果

本篇例子代码:代码

容芳志 (http://blog.csdn.net/totogo2010)

本文遵循“署名-非商业用途-保持一致”创作公用协议

</div>