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) {

//动画完成后做的事

}];

}

时间: 2024-11-10 08:35:30

iOS 手机淘宝加入购物车动画分析的相关文章

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

本文转载至 http://www.jianshu.com/p/e77e3ce8ee24 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.

电商客户端竞品分析-手机淘宝、京东、唯品会、聚美优品

市场状况 艾瑞最新统计数据显示,2013年移动网购整体交易规模1676.4亿元,同比增幅高达165.4%,而同期PC端网购规模将近16000多亿元,同比增速35.7%.预计2017年市场规模将近万亿,增速39.4%. 图1 2011-2017年中国移动购物市场交易规模 2013年中国移动网购渗透率9.1%,同比去年增长超过四个百分点.预计到2017年移动购物渗透率达到24.1%. 图2 2011-2017年中国网购交易额PC端和移动端占比 2013年移动网购企业份额中,手机淘宝占比76.1%,京

手机淘宝 521 性能优化项目揭秘

又是一年双十一,亿万用户都会在这一天打开手机淘宝,高兴地在会场页面不断浏览,面对琳琅满目的商品图片,抢着添加购物车,下单付款.为了让用户更顺畅更方便地实现这一切,做到“如丝般顺滑”,双十一前夕手机淘宝成立了“521”(我爱你)性能优化项目,在日常优化基础之上进行三个方面的专项优化攻关,分别是1)H5页面的一秒法则:2)启动时间和页面帧率提升20%:3)Android内存占用降低50%.优化过程中遇到的困难,思考后找寻的方案,实施后提取的经验都会在下面详细地介绍给读者. 第一章 一秒法则的实现 “

《转》冯森林:手机淘宝中的那些Web技术(2014年)

Native APP与Web APP的技术融合已经逐渐成为一种趋势,使用标准的Web技术来开发应用中的某些功能,不仅可以降低开发成本,同时还可以方便的进行功能迭代更新.但是如何保证Web APP的流畅性也一直是业内讨论的热点.InfoQ此次专访了手机淘宝客户端高级技术专家冯森林来谈谈手机淘宝在Web技术方面的一些实践经验,另外作为ArchSummit深圳2014大会<移动互联网,一浪高过一浪>专题的讲师,冯森林将会分享 手机淘宝的客户端架构探索之路 . InfoQ:淘宝手机客户端是否使用了HT

手机淘宝构架演化实践

2014年12月19日~20日,ArchSummit北京2014大会顺利举行.“移动互联网,随时随地”是非常火爆的一个专题.阿里无线事业部技术负责人庄卓然(花名南天)任出品人.来自阿里无线事业部的高级专家李敏(花名心石,微博:@allblue_华丽地低调 )分享了<手机淘宝架构演化实践>(幻灯片下载). 李敏主要负责淘宝无线客户端和无线网站基础服务.购物主链路的架构.研发方面的工作.从09年开始参与手机淘宝研发团队的组建和线上产品研发,先后负责过无线部门的社区.会员.营销.交易等多条产品线的技

冯森林:手机淘宝中的那些Web技术

Native APP与Web APP的技术融合已经逐渐成为一种趋势,使用标准的Web技术来开发应用中的某些功能,不仅可以降低开发成本,同时还可以方便的进行功能迭代更新.但是如何保证Web APP的流畅性也一直是业内讨论的热点.InfoQ此次专访了手机淘宝客户端高级技术专家冯森林来谈谈手机淘宝在Web技术方面的一些实践经验,另外作为ArchSummit深圳2014大会<移动互联网,一浪高过一浪>专题的讲师,冯森林将会分享手机淘宝的客户端架构探索之路. InfoQ:淘宝手机客户端是否使用了HTML

手机淘宝中的那些Web技术-使用了类似PhoneGap的实现

Native APP与Web APP的技术融合已经逐渐成为一种趋势,使用标准的Web技术来开发应用中的某些功能,不仅可以降低开发成本,同时还可以方便的进行功能迭代更新.但是如何保证Web APP的流畅性也一直是业内讨论的热点.InfoQ此次专访了手机淘宝客户端高级技术专家冯森林来谈谈手机淘宝在Web技术方面的一些实践经验,另外作为ArchSummit深圳2014大会<移动互联网,一浪高过一浪>专题的讲师,冯森林将会分享手机淘宝的客户端架构探索之路. 1.淘宝手机客户端是否使用了HTML5技术?

手机淘宝架构演化实践

“移动互联网,随时随地”是非常火爆的一个专题.阿里无线事业部技术负责人庄卓然(花名南天)任出品人.来自阿里无线事业部的高级专家李敏在ArchSummit 全球架构师峰会上分享了<手机淘宝架构演化实践>(视频连接). 李敏主要负责淘宝无线客户端和无线网站基础服务.购物主链路的架构.研发方面的工作.从09年开始参与手机淘宝研发团队的组建和线上产品研发,先后负责过无线部门的社区.会员.营销.交易等多条产品线的技术工作,构建和发展了阿里无线技术体系中包括交易链路.百亿级别高性能API网关.WebApp

Android热补丁技术—dexposed原理简析(手机淘宝采用方案)

本文由嵌入式企鹅圈原创团队成员.阿里资深工程师Hao分享. 上篇文章<Android无线开发的几种常用技术>我们介绍了几种android移动应用开发中的常用技术,其中的热补丁正在被越来越多的开发团队所使用,它涉及到dalvik虚拟机和android的一些核心技术,现在就来介绍下它的一些原理. 本篇先介绍dexposed方案:https://github.com/alibaba/dexposed,它是手机淘宝团队使用的热补丁方案,后来开源到github上,取的名字dexposed表明了自己是基于