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

//动画完成后做的事

}];

}

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

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

    本文转载至 http://www.jianshu.com/p/e77e3ce8ee24 1.最终效果 仿淘宝动画 2.核心代码 _cartAnimView=[[UIImageView alloc] i ...

  2. iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)

    这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...

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

    Native APP与Web APP的技术融合已经逐渐成为一种趋势,使用标准的Web技术来开发应用中的某些功能,不仅可以降低开发成本,同时还可以方便的进行功能迭代更新.但是如何保证Web APP的流畅 ...

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

    Native APP与Web APP的技术融合已经逐渐成为一种趋势,使用标准的Web技术来开发应用中的某些功能,不仅可以降低开发成本,同时还可以方便的进行功能迭代更新.但是如何保证Web APP的流畅 ...

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

    上篇文章<Android无线开发的几种常用技术>我们介绍了几种android移动应用开发中的常用技术,其中的热补丁正在被越来越多的开发团队所使用,它涉及到dalvik虚拟机和android ...

  6. 关于手机淘宝3.25bug我的一些思考与建议

    这两天被手淘ios版3.25bug刷屏了,影响还是挺大的,仅3.25日当天截止到下午5点在微博上的话题阅读量,已经突破8000万.给广大网友带来一次吃瓜盛宴.我们先简单回顾下这个bug的故事线: 我查 ...

  7. 手机淘宝UWP

    各位园主好! bug 走势: 哪天bug 足够少,哪天就可以发布了  :) 2015/10/23: 49 2015/10/26: 40 2015/10/27: 36 2015/10/28: 30 20 ...

  8. Appium(Python)驱动手机淘宝App

    请注意操作步骤: 1. 用数据线连接手机, 打开开发者模式, 并赋予相关权限, 并保持不锁屏状态: 2. 启动Appium桌面服务端: 3. 运行程序: 首次运行, Appium会在手机上安装3个Ap ...

  9. 淘宝网购物车jquery源码和网易新用户注册页面表单验证的练习

    淘宝网购物车源码: <html lang="en"> <head> <meta charset="UTF-8"> <t ...

随机推荐

  1. tomcat发布静态网页

  2. 64位Win7下编译Python3的计算机视觉库:OpenCV

    注:本文全原创,作者:Noah Zhang  (http://www.cnblogs.com/noahzn/) OpenCV目前最新版是3.0.0 rc1,官方给出了编译好的Python2可以直接使用 ...

  3. ios7控件特性(一)

    苹果发布iOS7之后,iOS7全部采用扁平化的界面,我们的app界面在iOS7上出现了很大的改变,这包括UINavigationBar,UIButton,UIActionSheet,UITabBar等 ...

  4. CountDownLatch的使用

    CountDownLatch,一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待.主要方法public CountDownLatch(int count);publi ...

  5. Delphi常用排序

    1.冒泡排序 Delphi/Pascal code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 procedure BubbleSort(var x:a ...

  6. cocosBuilder使用总结

    原创,转载请注明出处! 基本流程 >=-. 准备工作 #. 把一个项目场景相关的,相对独立(别的场景用不到)的碎图,用TexturePack拼接成大的png图片文件及plist数据字处理文件 # ...

  7. 使用Git将本地代码上传到GitHub

    #1注册GitHub账号 *1)到https://github.com/注册GitHub账号 #2在GitHub上建立GitHub仓库 *1)登录后点击右下方的"new repository ...

  8. OA系统配置文件

    第一章 web.xml配置文件解读 1. web.xml文件解读 lemon OA系统的核心配置文件都放在spring目录下的具有applicationContext的前缀文件.Classpath后有 ...

  9. HDU 5920 Ugly Problem 【模拟】 (2016中国大学生程序设计竞赛(长春))

    Ugly Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  10. 判断iis是否已经安装

    判断iis是否已经安装? 访问http://127.0.0.1 能得到正确页面的是已经安装. 活者查看控制面板-添加删除程序-windows组件-internet信息服务(IIS)前面的没有打勾则没有 ...