交互動(dòng)畫(huà)效果很炫,但是很簡(jiǎn)單,給大家分享一下加入購(gòu)物車(chē)的交互動(dòng)畫(huà)
效果圖片
效果:添加按鈕點(diǎn)擊之后做一個(gè)拋物線的動(dòng)作,碰到購(gòu)物車(chē)之后,購(gòu)物車(chē)做一個(gè)上下的搖晃動(dòng)畫(huà).
原理: 在屏幕上添加一個(gè)關(guān)鍵幀動(dòng)畫(huà)和旋轉(zhuǎn)動(dòng)畫(huà)的圖層.
思路:通過(guò)貝塞爾路徑做一個(gè)拋物線路徑,在添加旋轉(zhuǎn)動(dòng)畫(huà),組合成為一個(gè)組動(dòng)畫(huà)添加到做動(dòng)畫(huà)的控件上面,并且設(shè)置動(dòng)畫(huà)完成之后不允許回到最原始的位置.最后對(duì)tabBar按鈕購(gòu)物車(chē)添加一個(gè)搖晃動(dòng)畫(huà)就OK了.
1.先封裝一個(gè)做動(dòng)畫(huà)的工具類(lèi),這個(gè)工具類(lèi)提供了一個(gè)做開(kāi)始動(dòng)畫(huà)對(duì)象方法和一個(gè)做搖晃動(dòng)畫(huà)的類(lèi)方法
/**
* 開(kāi)始動(dòng)畫(huà)
*
* @param view 添加動(dòng)畫(huà)的view
* @param rect view 的絕對(duì)frame
* @param finishPoint 動(dòng)畫(huà)終點(diǎn)位置
* @param animationFinisnBlock 動(dòng)畫(huà)完成回調(diào)
*/
-(void)startAnimationandView:(UIView *)view andRect:(CGRect)rect andFinisnRect:(CGPoint)finishPoint andFinishBlock:(animationFinisnBlock)completion
{
//圖層
_layer = [CALayer layer];
_layer.contents = view.layer.contents;//
_layer.contentsGravity = kCAGravityResizeAspect;
// 改變做動(dòng)畫(huà)圖片的大小
rect.size.width = 60;
rect.size.height = 60; //重置圖層尺寸
_layer.bounds = rect;
_layer.cornerRadius = rect.size.width/2;
_layer.masksToBounds = YES; //圓角
AppDelegate *delegate = [UIApplication sharedApplication].delegate;
[delegate.window.layer addSublayer:_layer];
_layer.position = CGPointMake(rect.origin.x+view.frame.size.width/2, CGRectGetMidY(rect)); //a 點(diǎn)
// 路徑
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:_layer.position];
//確定拋物線的最高點(diǎn)位置 controlPoint
[path addQuadCurveToPoint:finishPoint controlPoint:CGPointMake(ScreenWidth/2 , rect.origin.y-80)];
//關(guān)鍵幀動(dòng)畫(huà)
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = path.CGPath;
// pathAnimation.delegate = self;
//往下拋時(shí)旋轉(zhuǎn)小動(dòng)畫(huà)
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
rotateAnimation.removedOnCompletion = YES;
rotateAnimation.fromValue = [NSNumber numberWithFloat:0];
rotateAnimation.toValue = [NSNumber numberWithFloat:12];
/**
* kCAMediaTimingFunctionLinear 動(dòng)畫(huà)從頭到尾的速度是相同的
kCAMediaTimingFunctionEaseIn 動(dòng)畫(huà)以低速開(kāi)始。
kCAMediaTimingFunctionEaseOut 動(dòng)畫(huà)以低速結(jié)束媚值。
kCAMediaTimingFunctionEaseInEaseOut 動(dòng)畫(huà)以低速開(kāi)始和結(jié)束饵溅。
kCAMediaTimingFunctionDefault
*/
rotateAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
CAAnimationGroup *groups = [CAAnimationGroup animation];
groups.animations = @[pathAnimation,rotateAnimation];
groups.duration = 1.2f;
//設(shè)置之后做動(dòng)畫(huà)的layer不會(huì)回到一開(kāi)始的位置
groups.removedOnCompletion=NO;
groups.fillMode=kCAFillModeForwards;
//讓工具類(lèi)成為組動(dòng)畫(huà)的代理
groups.delegate = self;
[_layer addAnimation:groups forKey:@"group"];
if (completion) {
_animationFinisnBlock = completion;
}
}
既然成為組動(dòng)畫(huà)的代理要實(shí)現(xiàn)代理方法,在動(dòng)畫(huà)結(jié)束的時(shí)候需要讓layer消失
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
// [anim def];
if (anim == [_layer animationForKey:@"group"]) {
[_layer removeFromSuperlayer];
_layer = nil;
if (_animationFinisnBlock) {
_animationFinisnBlock(YES);
}
}
}
最后就是購(gòu)物車(chē)的搖晃動(dòng)畫(huà)了
/**
* 搖晃動(dòng)畫(huà)
* @param shakeView 添加動(dòng)畫(huà)的view
*/
+(void)shakeAnimation:(UIView *)shakeView
{
CABasicAnimation *shakeAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
shakeAnimation.duration = 0.25f;
shakeAnimation.fromValue = [NSNumber numberWithFloat:-5];
shakeAnimation.toValue = [NSNumber numberWithFloat:5];
shakeAnimation.autoreverses = YES;
[shakeView.layer addAnimation:shakeAnimation forKey:nil];
}
實(shí)現(xiàn)完畢,使用的時(shí)候直接傳參數(shù)就可以了.
