jQuery.easing - easeOutCubic - подчеркивая легкость - PullRequest
Новая
       21

jQuery.easing - easeOutCubic - подчеркивая легкость

8 голосов
/ 13 октября 2011

Я использую плагин jQuery замедление Роберта (http://gsgd.co.uk/sandbox/jquery/easing/)), и мне нужно подчеркнуть или растянуть эффект легкости.

По сути, я хочу, чтобы эффект замедления был действительно быстрым, но затем сильно замедлялся во время замедления.

Я считаю, что могу сделать это, используя jQuery.easing.easeOutCubic( null, current_time, start_value, end_value, total_time), но я не могу понять, как правильно его использовать.

Как этого достичь?

1 Ответ

19 голосов
/ 13 октября 2011

Вам не нужен плагин замедления, чтобы выполнять произвольное смягчение с помощью jQuery.Вам нужен только исходный код JavaScript той функции замедления, которую вы собираетесь использовать.

Вот функция easeOutCubic, полученная из исходного кода jQuery UI.См. эту тему для получения дополнительной информации . 

$.easing.easeOutCubic = function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
}

Теперь вы можете редактировать функцию и / или переименовывать ее ... 

$.easing.myEasing = function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
}

(ВсеВ следующих примерах используется синий квадрат размером 375 пикселей с длительностью slideToggle() длительностью 3 секунды. Вы можете изменить длительность 3 секунды (3000 мс), чтобы продемонстрировать эффект по своему вкусу. Я выбрал 3 секунды, чтобы сделать его достаточно медленным, чтобы увидетьразличия.)

Затем вы просто помещаете его в свой jQuery, что-то вроде этого, возможно ... 

$(document).ready(function(){

        $.easing.myEasing = function (x, t, b, c, d) {
            return c*((t=t/d-1)*t*t + 1) + b;
        }

        $("#button").click(function() {
            $('#myDiv').slideToggle(
                3000, // <-- Animation Duration (3000 ms)
                'myEasing'  // <-- the Name of your easing function
            );
        });

});

Вот демонстрация приведенного выше кода, которая содержит easeOutCubic функция переименована в myEasing и применена к slideToggle() кубу с продолжительностью 3 секунды.

http://jsfiddle.net/kJZxQ/

Хорошо, теперь к вашей проблеме: Вы сказали, что хотите «... эффект замедления должен быть очень быстрым, но затем значительно замедляться во время замедления».

Вот график easeOutCubic: easeoutcubic

У вас есть два варианта, вы можете манипулировать самим уравнением замедления или посмотреть, есть ли у другой функции замедления аналогичная кривая,но круче (быстрее), пока не выйдет легкая часть.

Эта демонстрационная страница наглядно показывает вам все кривые замедления ...

http://api.jqueryui.com/easings/

Как видите,несколько кривых имеют форму, аналогичную (7) - easeOutCubic, но все же круче на передней части.Вот несколько примеров ...

(10) - easeOutQuart easeoutquart Демоверсия easeOutQuart

(13) - easeOutQuinteaseoutquint easeOutQuint Demo

(16) - easeOutExpo easeoutexpo easeOutExpo Demo

Похожепоследняя, ​​easeOutExpo - самая крутая функция из доступных.Сравнивая различия в приведенных выше уравнениях, мы также можем манипулировать уравнением easeOutExpo, чтобы еще больше усилить кривую.

Это пользовательское уравнение невероятно быстро, а затем сильно замедляется ...

http://jsfiddle.net/kJZxQ/11/

Даже более экстремально, чем в прошлом ...

http://jsfiddle.net/kJZxQ/12/

Продолжительность увеличена в последней демонстрации до 6 секунд, чтобы преувеличить эффект ...

http://jsfiddle.net/kJZxQ/13/

Сравнивая математические уравнения вышеприведенных демонстраций, вы можете увидеть, какой переменной манипулируют, чтобы усилить эффект и соответственно внести свои точные корректировки.

Я действительно думаю, что easeOutExpo больше похоже на то, что вы описываете.По сути, это ваше easeOutCubic уравнение, но только быстрее впереди и медленнее в конце.

...