添加购物车动画
Posted 曦阳
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了添加购物车动画相关的知识,希望对你有一定的参考价值。
#import "Solo_Cart_Methon.h" #define Screen_W [UIScreen mainScreen].bounds.size.width #define Screen_H [UIScreen mainScreen].bounds.size.height @interface Solo_Cart_Methon() { CALayer *_layer; } @property(nonatomic,strong)CALayer *layer; @property(nonatomic,strong)UIBezierPath *path; @end @implementation Solo_Cart_Methon +(void)startAnimationWithRect:(CGRect)rect ImageView:(UIImageView *)imageView donghua_view:(UIView*)donghua_view super_view:(UIView*)super_view end_point:(CGPoint)end_point end_view:(UIView*)end_view { Solo_Cart_Methon *solo_cart_methon = [Solo_Cart_Methon new]; solo_cart_methon.donghua_view = donghua_view; solo_cart_methon.super_view = super_view; solo_cart_methon.end_point = end_point; solo_cart_methon.end_view = end_view; [solo_cart_methon startAnimationWithRect:rect ImageView:imageView]; } -(void)startAnimationWithRect:(CGRect)rect ImageView:(UIImageView *)imageView { if (!_layer) { _layer = [CALayer layer]; _layer.contents = (id)imageView.layer.contents; _layer.contentsGravity = kCAGravityResizeAspectFill; _layer.bounds = rect; [_layer setCornerRadius:CGRectGetHeight([_layer bounds]) / 2]; _layer.masksToBounds = YES; _layer.position = CGPointMake(imageView.center.x, CGRectGetMidY(rect)+64); [self.super_view.layer addSublayer:_layer]; self.path = [UIBezierPath bezierPath]; [self.path moveToPoint:_layer.position]; // the track you can custom // point-> point1 ->point2 [self.path addCurveToPoint:self.end_point controlPoint1:CGPointMake(Screen_W/4,self.end_point.y+50) controlPoint2:CGPointMake(self.end_point.x-50, self.end_point.y-50)]; } [self groupAnimation]; } -(void)groupAnimation { self.donghua_view.userInteractionEnabled = NO; CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; animation.path = _path.CGPath; animation.rotationMode = kCAAnimationRotateAuto; CABasicAnimation *expandAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; expandAnimation.duration = 0.2f; expandAnimation.fromValue = [NSNumber numberWithFloat:1]; expandAnimation.toValue = [NSNumber numberWithFloat:0.8f]; expandAnimation.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; CABasicAnimation *narrowAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; narrowAnimation.beginTime = 0.2f; narrowAnimation.duration = 0.5f; narrowAnimation.fromValue = [NSNumber numberWithFloat:0.8f]; narrowAnimation.toValue = [NSNumber numberWithFloat:0.3f]; narrowAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; CAAnimationGroup *groups = [CAAnimationGroup animation]; groups.animations = @[animation,expandAnimation,narrowAnimation]; groups.duration = 0.7; groups.removedOnCompletion=NO; groups.fillMode=kCAFillModeForwards; groups.delegate = self; [_layer addAnimation:groups forKey:@"group"]; } -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag { if (anim == [_layer animationForKey:@"group"]) { self.donghua_view.userInteractionEnabled = YES; [_layer removeFromSuperlayer]; _layer = nil; CATransition *animation = [CATransition animation]; animation.duration = 0.25f; CABasicAnimation *shakeAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"]; shakeAnimation.duration = 0.25f; shakeAnimation.fromValue = [NSNumber numberWithFloat:-5]; shakeAnimation.toValue = [NSNumber numberWithFloat:5]; shakeAnimation.autoreverses = YES; [self.end_view.layer addAnimation:shakeAnimation forKey:nil]; } } @end
以上是关于添加购物车动画的主要内容,如果未能解决你的问题,请参考以下文章
购物车特效-贝塞尔曲线动画(点击添加按钮的进候,产生抛物线动画效果)
android animation——添加购物车动画(填坑和优化)