购物车动效添加和svg动效提示

由于技术快速发展，静态页面已吸引不了用户眼光，所以网站增加一些动画效果，不仅可以使客户眼前一亮，也能提高体验互动；本文主要介绍下面两种效果：

1.（第一图）点击加号图标，会产生一个改行图片的动画效果移动到购物车，且购物车显示添加的数量；

2.（第二图）左边的图片移上去会产生一个向左边冒泡的动画效果，右边的图片移上去会产生一个多边形慢慢围起来的动画效果；

购物车动效添加

html代码和css样式如下图，这一块比较简单，也不是本文重点，详细代码可自行查看下图。

涂鸦实现过程，简单说记录点击行图片的位置和购物车的位置，然后利用animate产生抛物线的动画效果，详细分析如下（点击加号图标触发）：

第一步，每点击一次，数量增加1（count），用于后面赋值给购物车标识数量（$('.bar .circle').css('opacity', '1').text(count)）；

第二步，获取点击加号图标行的图片对象（$initImg）和目标购物车的图标对象（$targetLocation）；

第三步，对$initImg生成一个副本（$moveImg）并添加到body，位置为$initImg上面，修改了宽高，且显示为圆形；

第四步，$moveImg调用第一个animate实现匀速向左上飘过去，再调用第二个animate实现慢慢移动到购物车目标位置，最后调用fadeOut实现慢慢消失并删掉该对象（$moveImg.detach()）。

svg动效提示

html代码这一块，都是一些简单排版，详细代码可自行查看下图（注意查看svg那一块）。

本文的实例都是由css代码实现，所以这一块是本文的重点，下面按实例顺序一个个分析实现的过程。

第二效果图左图实现过程，详细步骤如下（主要分析跟动态效果有关的代码）：

1.默认状态下（transition产生慢慢变化过程，不显得突兀）：

svg四个path（#path1，#path2，#path3，#path4）都设置了透明度（opacity）为0和动作（transform）动画过渡0.3s（transition-duration）且根据path中心缩小到0（scale(0, 0)），且对四个path分别设置了延迟时间（transition-delay），模拟一个个冒泡的效果；

元素p的文字设置了动作（transform）动画过渡0.2s延迟0.35（transition）且文字向下偏移10px（translate(0, -10px)）。

2.鼠标浮动到图片上：

svg四个path慢慢从图片位置向左一个个冒泡显示（opacity: 1和transform: scale(1, 1)），从而实现冒泡效果；

元素p的文字慢慢向上移动10px显示（opacity: 1和transform: translate(0, 0)）。

3.鼠标离开图片：

所有元素按设置的动画过渡恢复原来的排版。