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

红太狼 2022-02-25 07:10 455阅读 0赞

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1][]

### 购物车动效添加 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3][]

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 4][]

### svg动效提示 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 6][]

本文的实例都是由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.鼠标离开图片：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 9][]

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

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

svg的polygon设置虚线（stroke-dasharray）、虚线偏移量（stroke-dashoffset）、填充透明（fill-opacity）实现隐藏线和动作（transform）动画过渡1s；

元素p的文字设置了透明度0和动作（transform）动画过渡0.4s（transition）且文字缩小0.5倍（scale(.5)）。

2.鼠标浮动到图片上：

svg的polygon慢慢从图片上面的一个点开始慢慢围起来（stroke-dashoffset: 0和fill-opacity: 1），最终围成一个多边形；

元素p的文字慢慢放大原大小显示（opacity: 1和transform: translate(0, 0)）。

3.鼠标离开图片：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 10][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70]: /images/20220225/f764551b3b354af58b6d70a54e47b333.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1]: /images/20220225/d9f779b6549843eebc0fbd6150c98280.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2]: /images/20220225/8a4628dd23ba4a4bbddf9efd37c68aa4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3]: /images/20220225/8f5421edd73a446383eb2853aab0049c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 4]: /images/20220225/5e19583c410347afa56dc83ca4d7602b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 5]: /images/20220225/2f89f5e2b784438db965029e9ae2aa9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 6]: /images/20220225/19f9d427a9d44e8da38542b7dbd82f72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 7]: /images/20220225/6028c4a41b4f4fe0b32a6ab9399223c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 8]: /images/20220225/bfaa541b4c174e85adaca4d4006124f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 9]: /images/20220225/0fcf38e9c211463093ab44386a380474.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 10]: /images/20220225/cb1f109ea32f4091ba37359c130aabc7.png