iOS手机淘宝加入购物车动画分析

1、最终效果

2、核心代码

  _cartAnimView=[[UIImageView alloc] initWithFrame:CGRectMake(_propView.frame.size.height*0.025,_propView.frame.size.height* -0.025 , _propView.frame.size.height*0.2, _propView.frame.size.height*0.2)];
  [self.view addSubview:_cartAnimView];
  
  CABasicAnimation* rotationAnimation;
  rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
  rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 11.0 ];
  rotationAnimation.duration = 1.0;
  rotationAnimation.cumulative = YES;
  rotationAnimation.repeatCount = 0;
  
//这个是让旋转动画慢于缩放动画执行
  dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
          [_cartAnimView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
  });
 
  [UIView animateWithDuration:1.0 animations:^{
      _cartAnimView.frame=CGRectMake(self.screenWidth-55, -(self.screenHeight - CGRectGetHeight(self.view.frame) - 40), 0, 0);
  } completion:^(BOOL finished) {
      //动画完成后做的事
  }];

3、动画分析

• 这个动画有两个动作，一个是旋转，一个是缩小。（更好的动画是增加一个：抛物线轨道)
• 基于分析，所以用核心动画组应该更好，以后有时间在做，或者有高手可以分享一下，谢谢！
• 这个实现的代码一定不是最好的，请大家多多指教，一起进步，我也在深入学习中，学好一点会再更新本文。

ps:淘宝的加入购物车动画相对我自己实现的更畅，分析发现，淘宝在点击加入购物车动作后，并没有先跟服务器请求加入购物车，而是动画后，返回到商品详情dmd消失后，后台才请求吧。这样动画就不用等待了。但这样的逻辑合理吗？我不清楚为什么这样做，有懂的请多指教！

4、其它动画

动画（1）

#### 核心代码
#pragma mark - 加入购物车动画
-(void)addAnimations
{
    _cartAnimView=[[UIImageView alloc] initWithFrame:CGRectMake(_propView.frame.size.height*0.025,_propView.frame.size.height* -0.025 , _propView.frame.size.height*0.2, _propView.frame.size.height*0.2)];
    [self.view addSubview:_cartAnimView];
    
    [UIView animateWithDuration:1.0 animations:^{
        _cartAnimView.frame=CGRectMake(self.screenWidth-55, -(self.screenHeight - CGRectGetHeight(self.view.frame) - 40), 0, 0);
        _cartAnimView.transform = CGAffineTransformRotate(_cartAnimView.transform, M_PI_2);
    } completion:^(BOOL finished) {
        //动画完成后做的事
    }];
}

动画（2）

ps：打算做一个像微信 漂流瓶的效果，有快到慢，淡出等，有时间深入研究在更新。谢谢！

• 如有疑问，欢迎在评论区一起讨论！
• 如有不正确的地方，欢迎指导！

> 注：本文首发于 [iHTCboy's blog](https://iHTCboy.com)，如若转载，请注来源

赏

如果喜欢，欢迎分享点赞，扫一扫鼓励，用心创作创新！

支付宝

微信