0

我有这段代码：

$({ speed: 0 }).animate({ speed: 500 }, {
    duration: duration,
    easing: 'easeInSine', // can be anything
    step: function (now, fx) { // called on every step
        var $current = $(self.settings.itemClass).first();
        var left = parseInt($current.css("left"));

        //console.log(now);

        if (left <= distance) {
            $current.hide(now, "linear", function () {
                $(this).appendTo(self.settings.itemContainerClass).show(now, "linear");
            });
        }
    },
    complete: function () {
        var $container = $(self.settings.itemContainerClass);
        var $current = $(self.settings.itemClass).first();
        var id = parseInt($current.attr("id"));

        $.post("/Draw/SelectWinner/" + id, function (data) {
            $container.delay(1000).hide("fast", function () {
                var $name = $current.find("h3");
                var $img = $current.find(".carousel-photo").find("img");
                var $profileImage = ($img.attr("src") == "/img/transparent.png") ? "" : $img;
                var twitter = ($current.find(".twitter").length > 0) ? $current.find(".twitter").text() : "";

                var $winner = $('<div class="winner" />')
                    .css({
                        width: "100%",
                        height: "100%",
                        display: "none"
                    })
                    .addClass("red")
                    .appendTo(self.element)
                    .append("<div><h2>We have a winner!</h2></div>")
                    .append($name)
                    .append("<h4>" + twitter + "</h4>")
                    .append($profileImage)
                    .show("slow");
            });
        });
    }
});

如您所见，我使用easeInSine缓动函数将速度从 0 设置为 500。这有效，但并没有给我我想要的东西。我想要的是以恒定速度运行这个动画10秒，然后逐渐减速直到停止5秒，但我不知道如何编写缓动函数。

我知道您可以通过以下方式编写自己的缓动函数：

$.easing.crazy = function(t, millisecondsSince, startValue, endValue, totalDuration) {
    if(t<0.5) {
        return t*4;
    } else {
        return -2*t + 3;  
    }
};

我需要的部分是做类似的事情

$.easing.crazy = function(t, millisecondsSince, startValue, endValue, totalDuration) {
    if(t < 10) {
        return 500;
    } else {
        // return a speed that gradually slows down
    }
};

如果有人能帮我解决这个问题，我将非常感激。

更新

多亏了火花，我现在设法得到了这个：

$.easing.wheel = function (x, t, b, c, d) {
    return (t == d) ? b + c : c * (-Math.pow(2, -25 * t / d) + 1) + b;
}

但我还有一个问题。这运行了 15 秒，但在最初的几秒内，它又快又好（我会说 3 秒），然后在剩下的时间里它会慢慢停止。我需要它快速运行 10 秒，然后在最后 5 秒内减速。

有谁知道我可以如何修改示例以使其更好？

干杯

4

0 回答 0