iOSの商品がカートに飛び込むアニメーション効果

電子商取引アプリの製品については、ショッピングカートはまだ多くの詳細があります.これはいいえ、私たちの製品は、ユーザーが商品をクリックするときにショッピングカートに飛び込むアニメーションの特効を大きく提案しています.
アニメーションgif
これが私のdemoのアニメーション効果で、しばらくUIの美観処理をしていませんが、機能を展示するだけで、まあまあだと思ったら、下を見てもいいですよ.

1、まずアニメーション効果をカスタマイズする

ここでパスとズーム効果とアニメーション時間は自分のニーズに合わせて変更することができ、直接持っていく必要があります.hファイル:

//   

#import 

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

.mファイル:

#import "UIView+Animation.h"
#import 

@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. 
  YYPGoodsModel *good = self.goods[indexPath.item];
  self.listVC.model = good;
        
  // 2.  item  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];
  }];

}

電子商取引製品のショッピングカートの設計について、他の詳細に注意しましたか?この文章を参考にしてください.http://www.cocoachina.com/design/20160217/15302.html