服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
当前位置: 主页 > 开发教程 > ios开发教程 >

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

时间:2016-01-20 10:09来源:未知 作者:好模板 点击:
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.heig

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:打算做一个像微信 漂流瓶的效果,有快到慢,淡出等,有时间深入研究在更新。谢谢!

(责任编辑:好模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容