今天看到一個(gè)點(diǎn)擊物品添加到購物車的項(xiàng)目,http://www.huangyibiao.com/archives/1294?
效果挺好的迹恐,放在項(xiàng)目能夠吸引用戶眼球挣惰,就動(dòng)手實(shí)現(xiàn)一個(gè)。
// 創(chuàng)建一個(gè)imageView系草,添加一個(gè)點(diǎn)擊方法
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];
// 點(diǎn)擊圖片通熄,動(dòng)畫開始
- (void)imgViewTap:(UITapGestureRecognizer *)tap{
// 先畫出移動(dòng)路徑唆涝,起點(diǎn)找都、中間某一點(diǎn)、終點(diǎn)
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:_imgView.center];
[path addQuadCurveToPoint:CGPointMake(self.view.frame.size.width / 2, 600) controlPoint:CGPointMake(200, 0)];
//關(guān)鍵幀動(dòng)畫廊酣,將幾個(gè)點(diǎn)形成移動(dòng)的動(dòng)畫效果(有點(diǎn)像我們只做GIF圖能耻,很精細(xì)的那種)
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = path.CGPath;
pathAnimation.removedOnCompletion = YES; // 默認(rèn)YES,動(dòng)畫結(jié)束后一切還原
// 逐漸變小
CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
// fromValue:開始值? ? toValue:結(jié)束值
transformAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 1.0)]; //設(shè)置 X 軸和 Y 軸縮放比例都為1.0亡驰,而 Z 軸不變
transformAnimation.removedOnCompletion = YES;
//透明晓猛;使用基礎(chǔ)動(dòng)畫
CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0];
opacityAnimation.toValue = [NSNumber numberWithFloat:0.5];
opacityAnimation.removedOnCompletion = YES;
// 旋轉(zhuǎn)
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
rotateAnimation.fromValue = [NSNumber numberWithFloat:0];
rotateAnimation.toValue = [NSNumber numberWithFloat:12];
rotateAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
rotateAnimation.removedOnCompletion = YES;
//組合效果;使用動(dòng)畫組
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.animations = @[ pathAnimation, transformAnimation, opacityAnimation, rotateAnimation];
animationGroup.duration = 1.5; //設(shè)置動(dòng)畫執(zhí)行時(shí)間凡辱;這里設(shè)置為1.0秒
animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; //設(shè)置媒體調(diào)速運(yùn)動(dòng)戒职;默認(rèn)為 kCAMediaTimingFunctionLinear,即為線型間隔透乾;這里設(shè)置為kCAMediaTimingFunctionEaseIn洪燥,即先慢后快磕秤,相當(dāng)于有個(gè)加速度
//? ? animationGroup.autoreverses = YES; //設(shè)置自動(dòng)倒退,即動(dòng)畫回放捧韵;默認(rèn)值為NO
// 將整個(gè)動(dòng)畫組所有的設(shè)置屬性賦給某一個(gè)View[_imgView.layer addAnimation:animationGroup forKey:nil];
}
// 如果希望點(diǎn)擊后原圖不消失市咆,可單設(shè)一個(gè)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鍵值對的方式來改變動(dòng)畫,animationWithKeyPath的值:
transform.scale = 比例轉(zhuǎn)換
transform.scale.x = 闊的比例轉(zhuǎn)換
transform.scale.y = 高的比例轉(zhuǎn)換
transform.rotation.z = 平面圖的旋轉(zhuǎn)
opacity = 透明度
margin
zPosition
backgroundColor
cornerRadius
borderWidth
bounds
contents
contentsRect
cornerRadius
frame
hidden
mask
masksToBounds
opacity
position
shadowColor
shadowOffset
shadowOpacity
shadowRadius