Question

在Material Design Guidelines of movement之后，我如何使用jQuery为其设置动画？我有这个绝对位置的图像，我希望使用this弧线移动（或者显然需要时向下）移动窗口，我该怎么做？

Answer 1

我希望尝试制作并创建以下功能：

(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));

但是，当它处理尺寸变化时，动画与没有尺寸变化的动画有很大不同......

使用jquery的材质弧运动动画

1 个答案: