今天看到一个点击物品添加到购物车的项目,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