iOS开发-图片旋转、移动、变小等动画

iOS开发-图片旋转、移动、变小等动画_第1张图片

今天看到一个点击物品添加到购物车的项目,http://www.huangyibiao.com/archives/1294 

效果挺好的,放在项目能够吸引用户眼球,就动手实现一个。

// 创建一个imageView,添加一个点击方法

UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(20, 100, 50, 50)];[imgView setImage:[UIImage imageNamed:@"service_lianxi"]];imgView.userInteractionEnabled = YES;[self.view addSubview:imgView];self.imgView = imgView;UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(imgViewTap:)];[imgView addGestureRecognizer:tap];

// 点击图片,动画开始

- (void)imgViewTap:(UITapGestureRecognizer *)tap{

// 先画出移动路径,起点、中间某一点、终点

UIBezierPath *path = [UIBezierPath bezierPath];

[path moveToPoint:_imgView.center];

[path addQuadCurveToPoint:CGPointMake(self.view.frame.size.width / 2, 600) controlPoint:CGPointMake(200, 0)];

//关键帧动画,将几个点形成移动的动画效果(有点像我们只做GIF图,很精细的那种)

CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

pathAnimation.path = path.CGPath;

pathAnimation.removedOnCompletion = YES; // 默认YES,动画结束后一切还原

// 逐渐变小

CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];

// fromValue:开始值    toValue:结束值

transformAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];

transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 1.0)]; //设置 X 轴和 Y 轴缩放比例都为1.0,而 Z 轴不变

transformAnimation.removedOnCompletion = YES;

//透明;使用基础动画

CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];

opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0];

opacityAnimation.toValue = [NSNumber numberWithFloat:0.5];

opacityAnimation.removedOnCompletion = YES;

// 旋转

CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];

rotateAnimation.fromValue = [NSNumber numberWithFloat:0];

rotateAnimation.toValue = [NSNumber numberWithFloat:12];

rotateAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

rotateAnimation.removedOnCompletion = YES;

//组合效果;使用动画组

CAAnimationGroup *animationGroup = [CAAnimationGroup animation];

animationGroup.animations = @[ pathAnimation, transformAnimation, opacityAnimation, rotateAnimation];

animationGroup.duration = 1.5; //设置动画执行时间;这里设置为1.0秒

animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; //设置媒体调速运动;默认为 kCAMediaTimingFunctionLinear,即为线型间隔;这里设置为kCAMediaTimingFunctionEaseIn,即先慢后快,相当于有个加速度

//    animationGroup.autoreverses = YES; //设置自动倒退,即动画回放;默认值为NO

// 将整个动画组所有的设置属性赋给某一个View

[_imgView.layer addAnimation:animationGroup forKey:nil];

}

// 如果希望点击后原图不消失,可单设一个layer

CALayer *layer = [CALayer layer];

layer.bounds = _imgView.bounds;}

layer.position = _imgView.center;

layer.contents = (id)(_imgView.image.CGImage);

[self.view.layer addSublayer:layer];

// 我们可以通过animationWithKeyPath键值对的方式来改变动画,animationWithKeyPath的值:

transform.scale = 比例轉換

transform.scale.x = 闊的比例轉換

transform.scale.y = 高的比例轉換

transform.rotation.z = 平面圖的旋轉

opacity = 透明度

margin

zPosition

backgroundColor

cornerRadius

borderWidth

bounds

contents

contentsRect

cornerRadius

frame

hidden

mask

masksToBounds

opacity

position

shadowColor

shadowOffset

shadowOpacity

shadowRadius

你可能感兴趣的:(iOS开发-图片旋转、移动、变小等动画)