iOS一分钟搞定加入购物车的交互动画。本篇文章是由标哥的笔记编辑整理并发布于本站,将作者原文添加了一些描述内容以完善文章方便读者阅读和理解。
简书作者:嘿晴天 著作权归作者所有。原文链接:http://www.jianshu.com/p/bd650158d44c
交互动画,是一款吸引用户的装逼神技,这是最近弄了一个加入购物车的交互动画,并封装了一下,效果图如下:
这里是给屏幕添加了一个关键帧动画和旋转动画的图层。
这个动画主要描绘图层下落的路径 ,大致要确定三个点,通过 a,b,c 三个点来确立图层的下落路径,a 点图片 的图片的中心x 和y , b 点 是图片的屏幕一半作为 x 坐标 和 图片的y-80作为y,c 点 则是要下落的位置 ,我的demo 是下落在 第三个tarbar 大致计算一下即可:
来看下关键代码:
_layer.position = CGPointMake(rect.origin.x+view.frame.size.width/2, CGRectGetMidY(rect)); //a 点 // 路径 UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:_layer.position]; [path addQuadCurveToPoint:finishPoint controlPoint:CGPointMake(ScreenWidth/2, rect.origin.y-80)]; //关键帧动画 CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; pathAnimation.path = path.CGPath;
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; rotateAnimation.removedOnCompletion = YES; rotateAnimation.fromValue = [NSNumber numberWithFloat:0]; rotateAnimation.toValue = [NSNumber numberWithFloat:12]; rotateAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
如果你的 superView 就是VC 的 self.view 那么你可以直接用
/** * 开始动画 * * @param view 添加动画的view * @param rect view 的绝对frame * @param finishPoint 下落的位置 * @param animationFinisnBlock 动画完成回调 */ -(void)startAnimationandView:(UIView *)view andRect:(CGRect)rect andFinisnRect:(CGPoint)finishPoint andFinishBlock:(animationFinisnBlock)completion;
其中 rect 如果你添加动画的view 的superview 就是vc 的self.view 那么你可以直接动画的frame 赋值 不是的话则要计算出来,详情可以看一下我的demo
大家可以到作者的GITHUB下载源代码:PurchaseCarAnimation
承接:ThinkPHP项目开发、网站项目开发、微信项目开发、微信小程序项目开发、App开发,欢迎联系标哥QQ632840804