Angular4 - fly to cart动画 -弥补animation的不足

Angular4动画

Angular2升级到Angular4之后,AOT编译和tree shake 使得代码体积极剧减少,另外动画模块独立出来,有需要时再引入,使得的不用动画的工程就没必要再引入,此举也使得那些应用的代码体积也得到减小。

Angular4动画跟1.x相比功能略有加强,但是也只是状态的转换过程中的动画,路由转场的动画,在实现酷炫效果的场景中还略显不足。本文将举例说明如何比较正确的使用Angular4 和jQuery来实现比较浮夸的动画,让你的应用酷炫起来,与众不同!

先睹为快!

飞到购物车动画截图

1、live demo:http://frontgreeks.coding.me/#/animates

2、github地址:https://github.com/linweiwei123/angular4-flytocart

说明在前头

本工程不是一个封装好的插件,只是一个实现方案;工程中有些无关紧要的代码,可以不看。只需关注animation模块,代码中如有不足之处,希望各网友多多指教。

步骤:1、下载工程;2、执行npm install;3、执行npm run start;4:访问localhost:4200

实现方案:

该工程实现了一个将商品添加到购物车时,商品能够根据计算当前购物车位置,当前商品位置,商品在一定时间内飞向购物车,并且在飞行过程中,图片不断缩小为0,飞到购物车后,购物车数量+1;已添加的商品标识为已添加,并且不能再次添加;

一、计算购物车位置

计算购物车位置

二、商品列表

很简单的商品列表

遍历商品列表;状态为added的样式是为了显示“已经添加”的状态;

三、点击商品位置,复制商品图片,设置样式为了飞向购物车做准备

初始化商品信息和购物车位置

初始化商品列表信息,购物车位置信息,考虑到购物车位置可能会变,这里得益于RxJS技术,可以订阅到最新的购物车位置信息;

四、用jQuery和css知识来实现飞向购物车

如上图中所示,这里合理使用了jQuery来实现。网友可能会说,Angular最好不要和jQuery一起使用,那样会跟Angular的机制冲突。Angular的机制跟jQuery的绑定事件是冲突的,二者不可一起使用,但是如果知识获取dom元素,做一些简单的动画。而且这些元素上的的信息跟model中的没有任何关系则完全可以使用,如本例中的用法;

飞向购物车之后,购物车总数加1。这就完成了fly to cart的功能了。本例比较简单,总体思路也比较清晰。

作者寄语:

沉寂了一段时间,没有更新微博,但这段时间内我持续关注着Angular的发展。Angular现在的发展势头跟vue比差了很多,github上Vue每天的star数量是angular的4倍以上,各论坛的文章充斥着vue的文章,唯独不见Angular。但是相信,Angular总有一天独占鳌头,他的开发者看的更远,想的更深。本周六ng-japan大会,我们会后见!

另外谁说我们国内大网站没有使用Angular2的,给大家带来一个案例!就是跟我们一样不与世同的锤子手机官网!(下图所示,已经编译,但仍可看出Angular2的影子)

锤子手机官网一开始使用angularjs,去年看他的网站性能很差,页面呈现慢,操作不流畅,今年升级ng2之后性能极大的改善了,这是一个非常励志的消息!

锤子手机官网编译后的com.js解析

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 154,589评论 23 678
  • 每天都把苦悶趕到角落的位置。 每天都失憶一次。 每天都想象是新的開始。 每天都一樣。 沒有快樂和痛苦。 束然无味的...
    寅夕阅读 27评论 0 0
  • 玩LOL也好几年了,在里面玩德玛也最少一千场,蛮王也至少2千场.这个游戏是我第一次玩好几年的游戏,其中也不...
    文小梦阅读 58评论 0 0
  • 这世上不是所有人都能关注着你,要知道我们生来孤独 当你学着爱上自己,那才是终身浪漫...
    紫月汐颜颜阅读 142评论 0 0