jquery材质弧运动动画

Question

继Material Design Guidelines of movement之后，我该如何使用jQuery对它进行动画制作？ 我有这个绝对位置的图像，我想通过使用this弧移动（或明显需要时向下）在窗口中移动它，我该怎么做？

Answer 1

我keept试图使它创造了以下功能：

(function ($) { 
     $.fn.materialMovement = function (endX, endY, time, params, pro, complete) { 
      time = time === null || typeof time === "undefined" ? 350 : time; 
      params = params === null || typeof params === "undefined" ? {opacity: 1} : params; 
      var el = $(this); 
      var startX = parseInt($(el).css("left")), startY = parseInt($(el).css("top")); 
      var diffLeft = endX - startX, diffTop = endY - startY; 
      var down = endY > startY; 
      $(el).animate(params, { 
       progress: function (a, p, c) { 
        var top = down ? startY + (diffTop * p) : startY + ((diffTop * p) * p); 
        var left = down ? startX + (diffLeft * p) * p : startX + diffLeft * p; 
        $(el).css({left: left, top: top}); 
        if ($.isFunction(pro)) { 
         pro(a, p, c); 
        } 
       }, 
       easing: "swing", 
       duration: time, 
       complete: function() { 
        if ($.isFunction(complete)) { 
         complete(); 
        } 
       } 
      }); 
     }; 
    }(jQuery)); 

但是，当它与尺寸的变化交易，动画比一个没有大小的变化有很大不同...