美文网首页iOS技术iOS学习笔记iOS Developer
iOS之商品飞入购物车动画效果

iOS之商品飞入购物车动画效果

作者: smile丽语 | 来源:发表于2016-08-26 14:50 被阅读1500次

    对于电商APP产品,购物车这块还是很多细节的,这不,我们的产品大大提出,需要用户点击商品时飞入购物车的动画特效。

    动画.gif

    这就是我的demo的动画效果,暂时并没有做UI美观处理,仅仅展示功能,如果觉得还可以,可以接着向下看喽。

    1、先把动画效果自定义

    这里路径和缩放效果及动画时间可以根据自己的需求进行更改,有需要直接拿走不谢!
    .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.获取数据模型
      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

    相关文章

      网友评论

      本文标题:iOS之商品飞入购物车动画效果

      本文链接:https://www.haomeiwen.com/subject/hkczsttx.html