日记

首页 » 归档 » 日记 » iOS开发笔记 | 仿京东的加入购物车动画-ios学习从入门到精通尽在姬长信

iOS开发笔记 | 仿京东的加入购物车动画-ios学习从入门到精通尽在姬长信

分享最热门的资讯

请叫我死肥宅

之前APP里的加入购物车动画是最简单的UIView动画(一句代码那种),这几天正好有时间所以就跟产品那边确认优化了一下。虽然产品嘴上说让我自由发挥,但我相信没处理好肯定会让我改,改到产品那边满意为止,所以我研究了一下京东的加入购物车动画。

先看看京东的购物车动画是怎样的:

京东的加入购物车动画.gif

再看看我模仿出来的效果:

我为了突出效果把动画写得夸张了点,实际项目中不会这么张狂。

先分析一下整个动画的过程

当用户点击加入购物车按钮时,一张商品图片从“加入购物车按钮”中心飞到了“购物车”按钮中心。其中:

  • 飞行的路径是抛物线的

  • 飞行过程中图片越来越小

  • 飞行结束后商品数量label颤抖了两下

如何定义这个动画?

这个动画是购物车相关的,所以它的类名应该是ShoppingCartTool或者ShoppingCartManagement之类的。

这个动画效果至少需要3个参数:商品图片、起点和终点。

我们需要在动画结束时进行相应处理,所以还需要一个动画结束时回调的block。

类方法比对象方法使用更加方便。

基于这四点,方法定义如下:

动画实现详细讲解

先把完整代码贴出来:

看到这种抛物线的动画我就条件反射的想到CAShapeLayer+UIBezierPath。

展示:由layer决定

layer可以装图片

轨迹:由贝塞尔曲线决定

贝塞尔曲线决定了移动轨迹

动画:由animation决定

动画有很多,按需添加

难点

颤抖效果如何实现?

快速缩放两次不就是颤抖效果了吗?

就这样成功颤抖了。

细节:

为什么我不直接将动画layer加到window上?

如果直接加在window上,不管是keyWindow还是AppDelegate的window,当动画进行中的时候切换视图控制器,视图控制器切换了,但是动画并不会跟着切换。来张动图你就明白了:

动画进行中切换页面.gif

这显然不是我们想要的结果,所以我把动画layer添加到的最顶层视图控制器上。

精髓

通过延迟加载来和动画结束时间相对应:

总结:

封装小功能时不仅仅要完成功能,细节是不能忽视的。

补充说明:

实际开发中很可能需要将frame坐标转换为屏幕坐标,这个百度一下就可以找到答案。

Demo

上面的酷炫demo

  • 作者:无夜之星辰

  • 链接:http://www.jianshu.com/p/a98a483307d7

  • ?源:简书

  • 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

ios学习从入门到精通尽在姬长信

iOS开发笔记 | 仿京东的加入购物车动画-ios学习从入门到精通尽在姬长信

分享最热门的资讯

请叫我死肥宅

之前APP里的加入购物车动画是最简单的UIView动画(一句代码那种),这几天正好有时间所以就跟产品那边确认优化了一下。虽然产品嘴上说让我自由发挥,但我相信没处理好肯定会让我改,改到产品那边满意为止,所以我研究了一下京东的加入购物车动画。

先看看京东的购物车动画是怎样的:

京东的加入购物车动画.gif

再看看我模仿出来的效果:

我为了突出效果把动画写得夸张了点,实际项目中不会这么张狂。

先分析一下整个动画的过程

当用户点击加入购物车按钮时,一张商品图片从“加入购物车按钮”中心飞到了“购物车”按钮中心。其中:

  • 飞行的路径是抛物线的

  • 飞行过程中图片越来越小

  • 飞行结束后商品数量label颤抖了两下

如何定义这个动画?

这个动画是购物车相关的,所以它的类名应该是ShoppingCartTool或者ShoppingCartManagement之类的。

这个动画效果至少需要3个参数:商品图片、起点和终点。

我们需要在动画结束时进行相应处理,所以还需要一个动画结束时回调的block。

类方法比对象方法使用更加方便。

基于这四点,方法定义如下:

动画实现详细讲解

先把完整代码贴出来:

看到这种抛物线的动画我就条件反射的想到CAShapeLayer+UIBezierPath。

展示:由layer决定

layer可以装图片

轨迹:由贝塞尔曲线决定

贝塞尔曲线决定了移动轨迹

动画:由animation决定

动画有很多,按需添加

难点

颤抖效果如何实现?

快速缩放两次不就是颤抖效果了吗?

就这样成功颤抖了。

细节:

为什么我不直接将动画layer加到window上?

如果直接加在window上,不管是keyWindow还是AppDelegate的window,当动画进行中的时候切换视图控制器,视图控制器切换了,但是动画并不会跟着切换。来张动图你就明白了:

动画进行中切换页面.gif

这显然不是我们想要的结果,所以我把动画layer添加到的最顶层视图控制器上。

精髓

通过延迟加载来和动画结束时间相对应:

总结:

封装小功能时不仅仅要完成功能,细节是不能忽视的。

补充说明:

实际开发中很可能需要将frame坐标转换为屏幕坐标,这个百度一下就可以找到答案。

Demo

上面的酷炫demo

  • 作者:无夜之星辰

  • 链接:http://www.jianshu.com/p/a98a483307d7

  • ?源:简书

  • 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

ios学习从入门到精通尽在姬长信

(0)

本文由 姬長信 创作,文章地址:https://blog.isoyu.com/archives/19940-2.html
采用知识共享署名4.0 国际许可协议进行许可。除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。最后编辑时间为:7月 19, 2017 at 04:04 下午

热评文章