iOS 购物车动画
先看看动画效果:
项目结构:
接下来开始具体实现过程:
一、先计算动画开始结束位置
方法:
- (CGPoint)convertPoint:(CGPoint)point toView:(nullable UIView *)view;
用该方法计算动画view相对于window的位置
1) 计算动画开始位置fromCenter
CGPoint fromCenter = [animationView convertPoint:CGPointMake(animationView.frame.size.width * 0.5f, animationView.frame.size.height * 0.5f) toView:keyWindow];
2)计算动画结束位置endCenter
CGPoint endCenter = [endView convertPoint:CGPointMake(endView.frame.size.width * 0.5f, endView.frame.size.height * 0.5f) toView:keyWindow];
二、计算贝塞尔曲线(抛物线)的两个控制点
用UIBezierPath 画出抛物线,需要找到两个控制点controlPoint1 和 controlPoint2
controlPoint1
是控制点1controlPoint2
是控制点2A
是controlPoint1
和controlPoint2
的中点controlPointC
是fromCenter
和B
的中点
1)先设置控制点距最高点(fromCenter
或endCenter
)的水平距离controlPointEY
,本篇默认controlPointEY = 100
,即图1中点controlPointC
到点A
的距离。
2)计算控制点相对于点A
的距离controlPointEX
,即controlPoint1
到A
距离或controlPoint2
到A
距离,本篇设置为fromCenter.x
到endCenter.x
的1/4,即controlPointEX = (endCenter.x - fromCenter.x) * 0.25f;
3)计算两个控制点位置
CGPoint controlPoint1 = CGPointMake(controlPointCX - controlPointEX, controlPointCY - controlPointEY);
CGPoint controlPoint2 = CGPointMake(controlPointCX + controlPointEX, controlPointCY - controlPointEY);
三、复制动画的layer
复制cell上需要做动画的view,add到window上做动画
NSString *str = ((UIButton *)animationView).titleLabel.text;
_animationLayer = [CATextLayer layer];
_animationLayer.bounds = animationView.bounds;
_animationLayer.position = fromCenter;
_animationLayer.alignmentMode = kCAAlignmentCenter;//文字对齐方式
_animationLayer.wrapped = YES;
_animationLayer.contentsScale = [UIScreen mainScreen].scale;
_animationLayer.string = str;
_animationLayer.backgroundColor = [UIColor redColor].CGColor;
[keyWindow.layer addSublayer:_animationLayer];
四、动画组合
整合所有动画,让view动起来
1)运动轨迹(抛物线)
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:fromCenter];
[path addCurveToPoint:endCenter controlPoint1:controlPoint1 controlPoint2:controlPoint2];
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = path.CGPath;
2)旋转起来
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
rotateAnimation.removedOnCompletion = YES;
rotateAnimation.fromValue = [NSNumber numberWithFloat:0];
rotateAnimation.toValue = [NSNumber numberWithFloat:10 * M_PI];
rotateAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]
3)缩放动画
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.removedOnCompletion = NO;
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.2];
4)透明度动画
CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
alphaAnimation.removedOnCompletion = NO;
alphaAnimation.fromValue = [NSNumber numberWithFloat:1.0];
alphaAnimation.toValue = [NSNumber numberWithFloat:0.1];
5)动画组合
CAAnimationGroup *groups = [CAAnimationGroup animation];
groups.animations = @[pathAnimation,rotateAnimation, scaleAnimation, alphaAnimation];
groups.duration = kShoppingCartDuration;
groups.removedOnCompletion=NO;
groups.fillMode=kCAFillModeForwards;
groups.delegate = self;
[_animationLayer addAnimation:groups forKey:@"group"];
五、其他
iOS 购物车动画
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
iOS 购物车动画的更多相关文章
- iOS 手机淘宝加入购物车动画分析
1.最终效果 仿淘宝动画 2.核心代码 _cartAnimView=[[UIImageView alloc] initWithFrame:CGRectMake(_propView.frame.size ...
- iOS手机淘宝加入购物车动画分析
本文转载至 http://www.jianshu.com/p/e77e3ce8ee24 1.最终效果 仿淘宝动画 2.核心代码 _cartAnimView=[[UIImageView alloc] i ...
- ios 学习动画的套路 (一)
你也肯定喜欢炫酷的动画! 在APP中,动画就是一个点睛之笔!可以给用户增加一些独特的体验感,估计也有许多的和我一样的,看着那些觉得不错的动画,也就只能流口水的孩子,毕竟~不知道从哪里下手去写!会连续的 ...
- iOS核心动画学习整理
最近利用业余时间终于把iOS核心动画高级技巧(https://zsisme.gitbooks.io/ios-/content/chapter1/the-layer-tree.html)看完,对应其中一 ...
- IOS 核心动画之CAKeyframeAnimation - iBaby
- IOS 核心动画之CAKeyframeAnimation - 简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation ...
- javascript仿天猫加入购物车动画效果
javascript仿天猫加入购物车动画效果 注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...
- iOS各种动画效果
ios各种动画效果 最普通动画: //开始动画 [UIView beginAnimations:nil context:nil]; //设定动画持续时间 [UIView setAnimationDu ...
- 【转】Android 实现蘑菇街购物车动画效果
原文出处:http://blog.csdn.net/wangjinyu501/article/details/38400479 1.思路 目前想到两种方式实现这种效果,一是使用Tween动画,直截 ...
- IOS之动画
IOS之动画 15.1 动画介绍 15.2 Core Animation基础 15.3 隐式动画 15.4 显式动画 15.5 关键帧显式动画 15.6 UIView级别动画 15.1 动画介绍 ...
随机推荐
- 通过邮箱验证注册——.net代码
在写一些面向用户的网站类的程序时,必不可少的一个就是注册,通常情况下,我们会选择邮箱验证后注册,或者手机发送验证码注册.上篇文章中已经简单的描述了手机验证注册,这篇主要介绍一下邮箱验证. 邮箱验证的步 ...
- [USACO 2018 Feb Gold] Tutorial
Link: USACO 2018 Feb Gold 传送门 A: $dp[i][j][k]$表示前$i$个中有$j$个0且末位为$k$的最优解 状态数$O(n^3)$ #include <bit ...
- AtCoder - 3954 Painting Machines
题面在这里! 题解见注释 /* 考虑一个可以用 K ((n+1)/2 <= K < n)次染黑的方案, 那么将操作前K次的机器从小到大排序,一定是: a1=1 < a2 < . ...
- 【最大权闭合子图】BZOJ1497[NOI2006]-最大获利
[题目大意] 建立第i个通讯中转站需要的成本为Pi(1≤i≤N).另外公司调查得出了所有期望中的用户群,一共M个.关于第i个用户群的信息概括为Ai, Bi和Ci:这些用户会使用中转站Ai和中转站Bi进 ...
- win8 wamp 安装报错
可是安装wamp的时候(http://www.wampserver.com/en/#download-wrapper)下载的是64位的,刚开始报 错xxx.dll文件丢失,好吧我把那个xxx.dll文 ...
- (转)C++ STL中的vector的内存分配与释放
C++ STL中的vector的内存分配与释放http://www.cnblogs.com/biyeymyhjob/archive/2012/09/12/2674004.html 1.vector的内 ...
- 1:MUI选择器组件抛出“n.getSelectedItem is not a function”异常的解决办法 2:mui三级联动 3:移动端关闭虚拟键盘
1:如下图 问题:引用了mui的地址选择的三级联动的应用在h5上的组件 百度发现别人思路对 Array 原型链方法扩充时,会抛出这个异常. 修改方法: mui.poppicker.js 第 112 行 ...
- 关于如何避免Android中Bitmap引起的OutOfMemoryError
在Android中处理大图片不是一件很随意的事情,因为通常我们使用的是内置的BitmapFactory解码图片的,而BitmapFactory往往会因为图片过大而遇到OutOfMemoryError的 ...
- WebLogic Operator初试
时隔几个月,重拾WebLogic 为什么是WebLogic 简单说一句就是,因为WebLogic在中间件里面够复杂. Server不同的角色 AdminServer和Managed Server之间的 ...
- C#接收xmlrpc接口返回哈希表格式
C#在调用xmlrpc接口时返回的是int值就可以直接获取,最近在调用一个接口是获取一个账号记录的详细信息,xmlrpc接口返回的是一个哈希值. 所以直接用int或者Hashtable 来获取返回值执 ...