[关闭]
@Wangww0925 2019-08-07T07:58:41.000000Z 字数 4343 阅读 271

jquery 淘宝加入购物车 贝塞尔曲线 动画

jQuery

实际需求：

当点击“购买”按钮后，当前货物“飞向”侧边的购物车。设计要求，飞行轨迹必须是一条“曲线”。

解决

TweenMax官方文档

BezierPlugin插件可以很好的解决这个问题。这是greensock.com提供的GreenSock Animation Platform (GSAP)库的一个插件

js 使用

TweenMax-tween核心库
EasePack-缓动库，如果没有特别缓动，可不加载
BezierPlugin-贝塞尔曲线库，必须

  1. <script src="http://cdn.bootcss.com/gsap/1.9.7/TweenMax.min.js"></script>
  3. <script src="http://cdn.bootcss.com/gsap/1.9.7/easing/EasePack.min.js"></script>
  5. <script src="http://cdn.bootcss.com/gsap/1.9.7/plugins/BezierPlugin.min.js"></script>

例子

TweenMax 具体使用请参考官方文档

TweenMax.to()

曲线运动----结合TweenMax可直接产生曲线运动

  1. /*
  2.  * target   object  是   需要动画的对象
  3.  * duration number  是   动画持续时间，单位（秒）
  4.  * vars     object  是   动画参数（CSS属性、延迟、重复次数等）
  5.  */
  6. TweenMax.to( target, duration, vars )

demo

demo下载

重要部分

  1. TweenMax.to($(".box")[0], 1.5, {
  2.     bezier: [   // 起点坐标不用放到代码中，以下三个点分别是第2点，第3点及终点
  3.         {left: that.left2, top: that.top2},
  4.         {left: that.left1, top: that.top1}
  5.     ],
  6.     width: 20,      // 由初始宽度慢慢变成宽20px，【注意此处不需要加单位】
  7.     height: 20,     // 由初始高度慢慢变成高20px，【注意此处不需要加单位】
  8.     ease: Power1.easeOut,
  9.     onComplete: function (){} // 动画完成回调
  10. });

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         /*动画元素*/
  8.         .move{
  9.             width: 35px;
  10.             height: 35px;
  11.             background-color: #ff8200;
  12.             -webkit-border-radius: 50%;
  13.             -moz-border-radius: 50%;
  14.             -ms-border-radius: 50%;
  15.             -o-border-radius: 50%;
  16.             border-radius: 50%;
  17.             position: fixed;
  18.         }
  20.         .btn {
  21.             margin: 150px 0px 0px 500px;
  22.         }
  24.         /*购物车*/
  25.         .box {
  26.             width: 50px;
  27.             height: 100px;
  28.             background-color: red;
  30.             position: fixed;
  31.             top: 50%;
  32.             right: 0px;
  33.             -webkit-transform: translateY(-50%);
  34.             -moz-transform: translateY(-50%);
  35.             -ms-transform: translateY(-50%);
  36.             -o-transform: translateY(-50%);
  37.             transform: translateY(-50%);
  38.         }
  39.         .box p{
  40.             padding: 0px 15px;
  41.             text-align: center;
  42.             color: #fff;
  43.             font-size: 14px;
  44.         }
  46.         /*加入购物车提示*/
  47.         .cart{
  48.             display: none;
  49.             position: absolute;
  50.             top: 10px;
  51.             right: 55px;
  52.             -webkit-border-radius: 4px;
  53.             -moz-border-radius: 4px;
  54.             -ms-border-radius: 4px;
  55.             -o-border-radius: 4px;
  56.             border-radius: 4px;
  57.             border: 1px solid #D6D6D6;
  58.             background-color: #fff;
  59.             cursor: pointer;
  60.         }
  61.         .cart:after{
  62.             position: absolute;
  63.             top: 15px;
  64.             right: -8px;
  65.             display: block;
  66.             content: "";
  67.             width: 0px;
  68.             height: 0px;
  69.             border-top: 8px solid transparent;
  70.             border-bottom: 8px solid transparent;
  71.             border-left: 8px solid #fff;
  72.         }
  73.         .cart:before{
  74.             position: absolute;
  75.             top: 14px;
  76.             right: -9px;
  77.             display: block;
  78.             content: "";
  79.             width: 0px;
  80.             height: 0px;
  81.             border-top: 9px solid transparent;
  82.             border-bottom: 9px solid transparent;
  83.             border-left: 9px solid #D6D6D6;
  84.         }
  85.         .cart p{
  86.             padding: 0px 10px;
  87.             white-space: nowrap;
  88.             color: #333;
  89.             font-size: 12px;
  90.         }
  91.     </style>
  92. </head>
  93. <body>
  94.     <button class="btn">加入购物车</button>
  96.     <div class="box">
  97.         <p>购物车</p>
  99.         <div class="cart">
  100.             <p>加入购物车成功</p>
  101.         </div>
  102.     </div>
  103. </body>
  105. <script src="js/jquery.min.js"></script>
  106. <script src="js/TweenMax.min.js"></script>
  107. <script src="js/BezierPlugin.min.js"></script>
  108. <script src="js/demo.js"></script>
  109. </html>

js

  1. (function (win){
  2.     var that = "";
  4.     function Tween(startDom, endDom, options){
  5.         this.startDom = startDom;
  6.         this.endDom = endDom;
  8.         this.opts = {
  9.             prefix: "move",     // 动画类名前缀， 避免类名重复
  10.             speed: 1.5,         // 动画时间，单位（秒）
  11.             width: 20,
  12.             height: 20,
  13.             ease: Power1.easeOut,
  14.         };
  16.         this.tweenArr = []; // dom元素名称存放
  18.         that = this;
  19.     }
  21.     // 初始化定位
  22.     Tween.prototype.init = function (callback){
  23.         that.scrollTop = $("html").scrollTop();  // 获取页面滚动的高度
  25.         // 获取动画初始定位
  26.         that.top = $(that.startDom).offset().top - that.scrollTop - 40;
  27.         that.left = $(that.startDom).offset().left + 80;
  29.         // 获取动画终点的定位
  30.         that.top1 = $(that.endDom).offset().top - that.scrollTop + 10;
  31.         that.left1 = $(that.endDom).offset().left + 8;
  33.         // 判断曲线第二个点的定位
  34.         that.top2 = that.top1 - that.top1/3*0.6;
  35.         that.left2 = (that.left1 - that.left)/3*1.2 + that.left;
  37.         // 创建动画元素，并将动画添加到body中
  38.         var name = new Date().getTime();
  39.         that.name = name;
  40.         $("body").append('<div class="' + that.opts.prefix + " " + name + '" style="top:' + that.top + 'px;left:' + that.left + 'px;"></div>');
  42.         // 将name添加到数组中，方便动画完毕删除
  43.         that.tweenArr.push(name);
  45.         that.animate(callback); // 动画
  46.     }
  48.     // 动画
  49.     Tween.prototype.animate = function (callback){
  50.         TweenMax.to($("." + that.opts.prefix + "." + that.name)[0], that.opts.speed, {
  51.             bezier: [   // 起点坐标不用放到代码中，以下三个点分别是第2点，第3点及终点
  52.                 {left: that.left2, top: that.top2},
  53.                 {left: that.left1, top: that.top1}
  54.             ],
  55.             width: that.opts.width,
  56.             height: that.opts.height,
  57.             ease: that.opts.ease,
  58.             onComplete: function (){ // 动画完成回调
  59.                 $("." + that.opts.prefix + "." + that.tweenArr[0]).stop().fadeOut(200).remove();  // 动画消失、移除
  60.                 that.tweenArr.shift();  // 删除第一个元素
  62.                 callback ? callback() : "";
  63.             }
  64.         });
  65.     }
  67.     win.Tween = Tween
  68. })(window)
  71. var timer = ""; // 定时器
  72. $(".btn").unbind();
  73. $(".btn").click(function (){
  74.     var tween = new Tween('.btn', '.box');
  76.     tween.init(function (){
  77.         $(".cart").show(); //  显示加入购票车样式
  79.         clearTimeout(timer); // 清除定时
  81.         timer = setTimeout(function (){
  82.             $(".cart").hide();
  83.         }, 10000);
  84.     })
  85. })

效果图

具体动画效果可下载demo查看

未点击之前
image_1dcj7ecfr1p9r1sscst5m2kkin9.png-20.2kB

点击
image_1dcj7eofp16co483isc1gmlk5sm.png-13.8kB

动画消失 提示加入购物车成功
image_1dcj7fp1p1q1qbhdp9ppsvokp13.png-21kB

参考文献

BezierPlugin插件（js/jquery）--模拟曲线贝塞尔运动、绘制曲线的实用插件
TweenMax官方文档
TweenMax使用方法

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注