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

作者: iHTCboy | 来源:发表于2015-04-27 19:34 被阅读8711次

    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,如若转载,请注明来源。

    相关文章

      网友评论

      • icetime17:购物车动画执行完毕之后,再去执行相应的网络请求或数据库等操作,是防止影响到动画的流畅度。同样,微信微博等点赞功能,也是先动画,完毕后再去执行实际的网络操作。
      • 焦焦丶:我想问一下背后的控制器形变效果是怎么实现的:smile:
        iHTCboy:@Jaft74 利用iOS7提供的自定义转场方法哦
      • 0bbd9498990a:感觉这样用了uiview 加calayer的动画 为什么不直接用calayer 的动画组呢 或者 都用uiview的封装动画 感觉怪怪的哈
        iHTCboy:@hfrysys :joy: 其实这个是很久以前了,那里不太懂。站在现在已经是烂了、
      • listen_to:有demo吗? 分享一下可以吗
      • cd776761a05a: :smile: 感觉把demo贴出来比较好,直接看效果更容易理解
      • Xcode8:谢谢作者的文章,学习了
      • 凯文Kevin21:楼主,分享一下demo吧。我按照你这样写,有点不对。不知道哪个地方写错了
      • Michael_Geng:我用了这个代码怎么没有图片出来
        aad60b0bdf82:我的也是 没有图片出来
      • ducks:没demo 吗
        iHTCboy:@shunl 核心代码不是写出来了咳😁
      • iHTCboy:@千飞若逸Fee 飞动的图片,是临时在创建一个的。尽寸没有必要精确吧,因为动画时间很短,用户一般感知不到的。
      • 千若逸:@HTC 这样就比较死板,如果再在购物车按钮右边再加一个按钮呢?或者你确定在不同大小屏幕上都是同一个rect?你要是用凑试法那我也没话说了。我尝试获取一个经过transfrom的view中subview的rect,结果还是transform前的rect,但是对view就没有问题,不知道怎么解决,另外感谢分享
      • iHTCboy:@千飞若逸Fee 我没有获取啊,购物车的位置基本都在角落,比如距离顶部15,距离右边15,估计一个尺寸就差不多。
      • 千若逸:能请教一下怎么获取图中购物车按钮的frame吗?关键是经过了一些transform动画不知道怎么获取了
        千若逸:@昨夜雨轻栏 问题早就解决了,谢回复
        昨夜雨轻栏:@千飞若逸Fee 好像还有一个 toView
        昨夜雨轻栏:@千飞若逸Fee convertRect: fromView

      本文标题:iOS手机淘宝加入购物车动画分析

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