對于電商APP產(chǎn)品，購物車這塊還是很多細節(jié)的，這不，我們的產(chǎn)品大大提出，需要用戶點擊商品時飛入購物車的動畫特效。

動畫.gif

這就是我的demo的動畫效果，暫時并沒有做UI美觀處理，僅僅展示功能，如果覺得還可以，可以接著向下看嘍。

1、先把動畫效果自定義

這里路徑和縮放效果及動畫時間可以根據(jù)自己的需求進行更改，有需要直接拿走不謝！
.h文件：

//  商品動畫進入購物車效果

#import <UIKit/UIKit.h>

@interface UIView (Animation)
- (void)animationStartPoint:(CGPoint)start endPoint:(CGPoint)end didStopAnimation:(void(^)(void)) event;
@end

.m文件：

#import "UIView+Animation.h"
#import <objc/message.h>

@interface UIView ()

@property (nonatomic, copy) void (^animStop)(void);

@end

@implementation UIView (Animation)

- (void)animationStartPoint:(CGPoint)start endPoint:(CGPoint)end didStopAnimation:(void (^)(void))event {
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:start];
    [path addCurveToPoint:end controlPoint1:start controlPoint2:CGPointMake(start.x, start.y)];
    
    // 路徑
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.path = path.CGPath;
    animation.rotationMode = kCAAnimationRotateAuto;
    
    // 縮放
    CABasicAnimation *scAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scAnimation.fromValue = @1;
    scAnimation.toValue = @0.2;
    scAnimation.autoreverses = YES;
    
    CAAnimationGroup *groups = [CAAnimationGroup animation];
    groups.animations = @[animation,scAnimation];
    groups.duration = 0.5; // 時間
    groups.removedOnCompletion = NO;
    groups.fillMode = kCAFillModeForwards;
    groups.delegate = self;
    [groups setValue:@"groupsAnimation" forKey:@"animationName"];
    [self.layer addAnimation:groups forKey:nil];
    
    self.animStop = event;
    
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
   self.animStop();
}

- (void)setAnimStop:(void (^)(void))animStop {
    objc_setAssociatedObject(self, @"animStop", animStop, OBJC_ASSOCIATION_COPY);
}

- (void (^)(void))animStop {
    return objc_getAssociatedObject(self, @"animStop");
}

@end

2、在你所需要使用動畫效果的控制器里操作

引入頭文件#import "UIView+Animation.h"
找到點擊當前的item的方法，我這里是collectionView，

#pragma mark collectionViewDelegate

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    
  // 1.獲取數(shù)據(jù)模型
  YYPGoodsModel *good = self.goods[indexPath.item];
  self.listVC.model = good;
        
  // 2.獲取 item 創(chuàng)建當前imageView
  UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
  UIImageView *imageView = [[UIImageView alloc] init];
  [imageView sd_setImageWithURL:[NSURL URLWithString:good.img] placeholderImage: [UIImage imageNamed:@"u58"]];
   
  // 計算坐標系
  CGFloat y = cell.y - self.collectView.contentOffset.y;
  imageView.frame = cell.frame;
  imageView.y = y;imageView.backgroundColor = [UIColor clearColor];
  [self.view addSubview:imageView];
    
  // 3.商品飛入購物車后移除當前imageView
  [imageView animationStartPoint:imageView.center endPoint:self.cartBtn.center didStopAnimation:^{
      [imageView removeFromSuperview];
  }];

}

對于電商產(chǎn)品的購物車設(shè)計，一些其他細節(jié)你注意了嗎？請參考這篇文章，本人真心覺得很不錯
http://www.cocoachina.com/design/20160217/15302.html