交互动画效果很炫,但是很简单,给大家分享一下加入购物车的交互动画
效果图片
效果:添加按钮点击之后做一个抛物线的动作,碰到购物车之后,购物车做一个上下的摇晃动画.
原理: 在屏幕上添加一个关键帧动画和旋转动画的图层.
思路:通过贝塞尔路径做一个抛物线路径,在添加旋转动画,组合成为一个组动画添加到做动画的控件上面,并且设置动画完成之后不允许回到最原始的位置.最后对tabBar按钮购物车添加一个摇晃动画就OK了.
1.先封装一个做动画的工具类,这个工具类提供了一个做开始动画对象方法和一个做摇晃动画的类方法
/**
* 开始动画
*
* @param view 添加动画的view
* @param rect view 的绝对frame
* @param finishPoint 动画终点位置
* @param animationFinisnBlock 动画完成回调
*/
-(void)startAnimationandView:(UIView *)view andRect:(CGRect)rect andFinisnRect:(CGPoint)finishPoint andFinishBlock:(animationFinisnBlock)completion
{
//图层
_layer = [CALayer layer];
_layer.contents = view.layer.contents;//
_layer.contentsGravity = kCAGravityResizeAspect;
// 改变做动画图片的大小
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 点
// 路径
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:_layer.position];
//确定抛物线的最高点位置 controlPoint
[path addQuadCurveToPoint:finishPoint controlPoint:CGPointMake(ScreenWidth/2 , rect.origin.y-80)];
//关键帧动画
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = path.CGPath;
// pathAnimation.delegate = self;
//往下抛时旋转小动画
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
rotateAnimation.removedOnCompletion = YES;
rotateAnimation.fromValue = [NSNumber numberWithFloat:0];
rotateAnimation.toValue = [NSNumber numberWithFloat:12];
/**
* kCAMediaTimingFunctionLinear 动画从头到尾的速度是相同的
kCAMediaTimingFunctionEaseIn 动画以低速开始。
kCAMediaTimingFunctionEaseOut 动画以低速结束。
kCAMediaTimingFunctionEaseInEaseOut 动画以低速开始和结束。
kCAMediaTimingFunctionDefault
*/
rotateAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
CAAnimationGroup *groups = [CAAnimationGroup animation];
groups.animations = @[pathAnimation,rotateAnimation];
groups.duration = 1.2f;
//设置之后做动画的layer不会回到一开始的位置
groups.removedOnCompletion=NO;
groups.fillMode=kCAFillModeForwards;
//让工具类成为组动画的代理
groups.delegate = self;
[_layer addAnimation:groups forKey:@"group"];
if (completion) {
_animationFinisnBlock = completion;
}
}
既然成为组动画的代理要实现代理方法,在动画结束的时候需要让layer消失
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
// [anim def];
if (anim == [_layer animationForKey:@"group"]) {
[_layer removeFromSuperlayer];
_layer = nil;
if (_animationFinisnBlock) {
_animationFinisnBlock(YES);
}
}
}
最后就是购物车的摇晃动画了
/**
* 摇晃动画
* @param shakeView 添加动画的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];
}
实现完毕,使用的时候直接传参数就可以了.
