参考：iOS开发笔记 | 仿京东的加入购物车动画、iOS 一分钟搞定加入购物车的交互动画

很多动画属性不太熟悉 直接贴代码吧

UIBezierPath路径

在自定义view的drawRect 方法进行模拟

• 直线addLineToPoint

- (void)drawRect:(CGRect)rect
{
    //WIDTH 300
    UIColor *color = [UIColor yellowColor];
    [color set];
    
    CGPoint aPoint = CGPointMake(15, 150);
    CGPoint bPoint = CGPointMake(WIDTH * 0.5, 10);
    CGPoint cPoint = CGPointMake(WIDTH - 15, 280);
    
    //-----------------------------------------------
    UIImageView *view = [[UIImageView alloc]init];
    [self addSubview:view];
    view.backgroundColor = rgba(255, 127, 0, 0.5);
    view.frame = CGRectMake(0, 0, 10, 10);
    view.center = aPoint;
    
    UIImageView *view1 = [[UIImageView alloc]init];
    [self addSubview:view1];
    view1.backgroundColor = rgba(255, 127, 0, 0.5);
    view1.frame = CGRectMake(0, 0, 10, 10);
    view1.center = bPoint;
    
    UIImageView *view2 = [[UIImageView alloc]init];
    [self addSubview:view2];
    view2.backgroundColor = rgba(255, 127, 0, 0.5);
    view2.frame = CGRectMake(0, 0, 10, 10);
    view2.center = cPoint;
    //-----------------------------------------------
    
    
    UIBezierPath *movePath = [UIBezierPath bezierPath];
    
    [movePath moveToPoint:aPoint];
    
    //直线
    [movePath addLineToPoint:bPoint];
    [movePath addLineToPoint:cPoint];
    
    [movePath stroke];
}

image.png

• 曲线addQuadCurveToPoint

- (void)drawRect:(CGRect)rect
{
    //WIDTH 300
    UIColor *color = [UIColor yellowColor];
    [color set];
    
    CGPoint aPoint = CGPointMake(15, 150);
    CGPoint bPoint = CGPointMake(WIDTH * 0.5, 10);
    CGPoint cPoint = CGPointMake(WIDTH - 15, 280);
    
    //-----------------------------------------------
    UIImageView *view = [[UIImageView alloc]init];
    [self addSubview:view];
    view.backgroundColor = rgba(255, 127, 0, 0.5);
    view.frame = CGRectMake(0, 0, 10, 10);
    view.center = aPoint;
    
    UIImageView *view1 = [[UIImageView alloc]init];
    [self addSubview:view1];
    view1.backgroundColor = rgba(255, 127, 0, 0.5);
    view1.frame = CGRectMake(0, 0, 10, 10);
    view1.center = bPoint;
    
    UIImageView *view2 = [[UIImageView alloc]init];
    [self addSubview:view2];
    view2.backgroundColor = rgba(255, 127, 0, 0.5);
    view2.frame = CGRectMake(0, 0, 10, 10);
    view2.center = cPoint;
    //-----------------------------------------------
    
    
    UIBezierPath *movePath = [UIBezierPath bezierPath];
    
    [movePath moveToPoint:aPoint];
    //单曲线
    [movePath addQuadCurveToPoint:cPoint controlPoint:bPoint];
    
    [movePath stroke];
}

image.png

动画

- (void)clickCartButton:(UIButton *)sender
{
    NSLog(@"购物");
    
    CGPoint startPoint = self.cartButton.center;
    CGPoint centerPoint = CGPointMake((self.cartButton1.center.x + self.cartButton.center.x) * 0.5, 0);
    CGPoint endPoint = self.cartButton1.center;
    
    //创建动画小图标
    CAShapeLayer *animationLayer = [[CAShapeLayer alloc]init];
    animationLayer.frame = CGRectMake(startPoint.x - 20, startPoint.y - 20, 40, 40);
    animationLayer.contents = (id)self.cartButton.currentImage.CGImage;
    
    //添加layer到顶层控制器上
    [self.view.layer addSublayer:animationLayer];
    
    //创建移动轨迹
    UIBezierPath *movePath = [UIBezierPath bezierPath];
    [movePath moveToPoint:startPoint];
    [movePath addQuadCurveToPoint:endPoint controlPoint:centerPoint];
    
    //轨迹动画
    CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    CGFloat durationTime = 1;//动画时间1秒
    pathAnimation.duration = durationTime;
    pathAnimation.removedOnCompletion = NO;
    pathAnimation.fillMode = kCAFillModeForwards;
    pathAnimation.path = movePath.CGPath;
    
    //添加轨迹动画
    [animationLayer addAnimation:pathAnimation forKey:nil];
    
    
    //添加缩小动画
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
    scaleAnimation.toValue = [NSNumber numberWithFloat:0.5];
    scaleAnimation.duration = 1.0;
    scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    scaleAnimation.removedOnCompletion = NO;
    scaleAnimation.fillMode = kCAFillModeForwards;
    
    //添加缩小动画
    [animationLayer addAnimation:scaleAnimation forKey:nil];

    
    //动画结束后执行
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(durationTime * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [animationLayer removeFromSuperlayer];
        NSLog(@"动画结束");
        
        //缩放购物车
//        CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
//        scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
//        scaleAnimation.toValue = [NSNumber numberWithFloat:0.7];
//        scaleAnimation.duration = 0.1;
//        scaleAnimation.repeatCount = 2; // 颤抖两次
//        scaleAnimation.autoreverses = YES;
//        scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//        [self.cartButton1.layer addAnimation:scaleAnimation forKey:nil];
        
        CABasicAnimation *shakeAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
        shakeAnimation.duration = 0.25f;
        //shakeAnimation.repeatCount = 10;
        shakeAnimation.fromValue = [NSNumber numberWithFloat:-5];
        shakeAnimation.toValue = [NSNumber numberWithFloat:5];
        shakeAnimation.autoreverses = YES;
        [self.cartButton1.layer addAnimation:shakeAnimation forKey:nil];
    });
}

QQ20200604-154750-HD.gif

缩放

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
        scaleAnimation.toValue = [NSNumber numberWithFloat:0.7];
        scaleAnimation.duration = 0.1;
        scaleAnimation.repeatCount = 2; // 颤抖两次
        scaleAnimation.autoreverses = YES;
        scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        [self.cartButton1.layer addAnimation:scaleAnimation forKey:nil];

上下抖动

CABasicAnimation *shakeAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
        shakeAnimation.duration = 0.25f;
        //shakeAnimation.repeatCount = 10;
        shakeAnimation.fromValue = [NSNumber numberWithFloat:-5];
        shakeAnimation.toValue = [NSNumber numberWithFloat:5];
        shakeAnimation.autoreverses = YES;
        [self.cartButton1.layer addAnimation:shakeAnimation forKey:nil];