商品添加购物车实现动画效果

在应用商场的时候,发现淘宝和京东在往购物车添加商品时,会有商品缩略图跑到购物车的效果,特此做了个小Demo,便于学习和应用

在controller的.h文件中

@interface ViewController ()
@property (nonatomic,strong) UIBezierPath *path;
@end

@implementation ViewController
{
    UILabel *_badgeLabel;
    NSInteger _badgeNum;
    UIImageView *_imageView;
    UIButton *_addGoods;
    CALayer *_layer;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    _badgeNum = 0;
    [self setUI];
}

- (void)setUI
{
    UIColor *customColor = [UIColor colorWithRed:0.9634 green:0.3165 blue:0.3962 alpha:1.0];
    _addGoods = [UIButton buttonWithType:UIButtonTypeCustom];
    _addGoods.frame = CGRectMake(50, 300, 100, 50);
    _addGoods.timeInterVal = 3;
    [_addGoods setTitle:@"立即抢购" forState:UIControlStateNormal];
    [_addGoods setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    _addGoods.titleLabel.font = [UIFont boldSystemFontOfSize:15];
    [_addGoods setBackgroundColor:customColor];
    [_addGoods addTarget:self action:@selector(startAnimation) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:_addGoods];
    _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
    _imageView.image = [UIImage imageNamed:@"TabCartSelected"];
    _imageView.center = CGPointMake(270, 320);
    [self.view addSubview:_imageView];

    // label
    _badgeLabel = [[UILabel alloc] initWithFrame:CGRectMake(280, 295, 20, 20)];
    _badgeLabel.textColor = customColor;
    _badgeLabel.textAlignment = NSTextAlignmentCenter;
    _badgeLabel.font = [UIFont boldSystemFontOfSize:13];
    _badgeLabel.backgroundColor = [UIColor whiteColor];
    _badgeLabel.layer.cornerRadius = CGRectGetHeight(_badgeLabel.bounds)/2;
    _badgeLabel.layer.masksToBounds = YES;
    _badgeLabel.layer.borderWidth = 1.0f;
    _badgeLabel.layer.borderColor = customColor.CGColor;
    [self.view addSubview:_badgeLabel];
    if (_badgeNum == 0) {
        _badgeLabel.hidden = YES;
    }
    self.path = [UIBezierPath bezierPath];
    [_path moveToPoint:CGPointMake(50, 150)];
    [_path addQuadCurveToPoint:CGPointMake(270, 300) controlPoint:CGPointMake(150, 20)];
}

- (void)startAnimation
{
    if (!_layer) {
//        _addGoods.enabled = NO;
        _layer = [CALayer layer];
        _layer.contents = (__bridge id)[UIImage imageNamed:@"3"].CGImage;
        _layer.contentsGravity = kCAGravityResizeAspectFill;
        _layer.bounds = CGRectMake(0, 0, 50, 50);
        [_layer setCornerRadius:CGRectGetHeight([_layer bounds])/2];
        _layer.masksToBounds = YES;
        _layer.position = CGPointMake(50, 150);
        [self.view.layer addSublayer:_layer];
    }
    [self groupAnimation];
}

- (void)groupAnimation
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.path = _path.CGPath;
    animation.rotationMode = kCAAnimationRotateAuto;
    CABasicAnimation *expandAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    expandAnimation.duration = 0.5f;
    expandAnimation.fromValue = [NSNumber numberWithFloat:1];
    expandAnimation.toValue = [NSNumber numberWithFloat:1.5f];
    expandAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    
    CABasicAnimation *narrowAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    narrowAnimation.beginTime = 0.5;
    narrowAnimation.fromValue = [NSNumber numberWithFloat:1.5f];
    narrowAnimation.duration = 1.5f;
    narrowAnimation.toValue = [NSNumber numberWithFloat:0.5f];
    
    narrowAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    
    CAAnimationGroup *groups = [CAAnimationGroup animation];
    groups.animations = @[animation,expandAnimation,narrowAnimation];
    groups.duration = 2.0f;
    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"]) {
//        _addGoods.enabled = YES;
        [_layer removeFromSuperlayer];
        _layer = nil;
        _badgeNum ++;
        if (_badgeNum) {
            _badgeLabel.hidden = NO;
        }
        CATransition *animation = [CATransition animation];
        animation.duration = 0.25f;
        _badgeLabel.text = [NSString stringWithFormat:@"%ld",_badgeNum];
        [_badgeLabel.layer addAnimation:animation forKey:nil];
        CABasicAnimation *shakeAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
        shakeAnimation.duration = 0.25f;
        shakeAnimation.fromValue = [NSNumber numberWithFloat:-5];
        shakeAnimation.toValue = [NSNumber numberWithFloat:5];
        shakeAnimation.autoreverses = YES;
        [_imageView.layer addAnimation:shakeAnimation forKey:nil];
    }
}

demo中还用runtime写了下防止button连续点击的操作,需要的可以查看下载

 github连接: https://github.com/Raymon-lau/AddshoppingCart