1、把图片移到右下角变小透明
使用CAAnimationGroup叠加动画效果,就是下面按钮《把图片移到右下角变小透明》描述的效果:
、
上面三个图是动画的三个状态,实现代码如下:
- - (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];
- }
向右移动是因为关键帧使用了路径为直线的路径。
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、吃豆人动画
这个有点复杂,首先说下实现的步骤:
- 画一个吃豆人开口的路径:pacmanOpenPath
- 画一个吃豆人闭口的路径:pacmanClosedPath
- 新建一个闭口的吃豆人头的层:shapeLayer
- 把开口和闭口路径设置成CABasicAnimation *chompAnimation动画的起点和终点,这样循环就能出现咬牙的动画了。
- 最后设置一个路径为关键帧,让吃豆人在这条路径上行动。
代码如下:
- - (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) 计算角度转换
添加了个手势,点一下屏幕,吃豆人就动起来了。效果:
转载:http://blog.csdn.net/totogo2010/article/details/8606089