d3-ease

Сглаживание — это метод искажения времени для управления видимым движением в анимации. Он чаще всего используется для замедления в начале и в конце. Сглаживая время, анимированные переходы становятся плавнее и демонстрируют более правдоподобное движение.

Типы сглаживания в этом модуле реализуют метод ease, который принимает нормализованное время t и возвращает соответствующее «сглаженное» время tʹ. И нормализованное время, и сглаженное время обычно находятся в диапазоне [0,1], где 0 представляет начало анимации, а 1 — конец; некоторые типы сглаживания, такие как упругое, могут возвращать сглаженные времена немного за пределами этого диапазона. Хороший тип сглаживания должен возвращать 0, если t = 0, и 1, если t = 1. Смотрите исследователь сглаживания для визуальной демонстрации.

Эти типы сглаживания в значительной степени основаны на работах Роберта Пеннера.

Установка

Если вы используете NPM, npm install d3-ease. В противном случае, скачайте последнюю версию. Вы также можете загрузить напрямую с d3js.org, как отдельную библиотеку, или как часть D3 4.0. Поддерживаются среды AMD, CommonJS и vanilla. В vanilla экспортируется d3 глобальная переменная:

<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script>

var ease = d3.easeCubic;

</script>

Попробуйте d3-ease в вашем браузере.

Справочник по API

ease(t)

Принимая указанное нормализованное время t, обычно в диапазоне [0,1], возвращает «сглаженное» время tʹ, также обычно в [0,1]. 0 представляет начало анимации, а 1 — конец. Хорошая реализация возвращает 0, если t = 0, и 1, если t = 1. Смотрите исследователь сглаживания для визуальной демонстрации. Например, для применения кубического сглаживания:

var te = d3.easeCubic(t);

Аналогично, для применения пользовательского упругого сглаживания:

// Before the animation starts, create your easing function.
var customElastic = d3.easeElastic.period(0.4);

// During the animation, apply the easing function.
var te = customElastic(t);

d3.easeLinear(t) Источник

Линейное сглаживание; функция тождества; linear(t) возвращает t.

d3.easePolyIn(t) Источник

Полиномиальное сглаживание; возводит t в указанную степень. Если степень не указана, по умолчанию используется 3, что эквивалентно cubicIn.

d3.easePolyOut(t) Источник

Обратное полиномиальное сглаживание; эквивалентно 1 - polyIn(1 - t). Если степень не указана, по умолчанию используется 3, что эквивалентно cubicOut.

d3.easePoly(t) Источник
d3.easePolyInOut(t) Источник

Симметричное полиномиальное сглаживание; масштабирует polyIn для t в [0, 0.5] и polyOut для t в [0.5, 1]. Если степень не указана, по умолчанию используется 3, что эквивалентно cubic.

poly.exponent(e) Источник

Возвращает новое полиномиальное сглаживание с указанной степенью e. Например, для создания эквивалентов линейного, квадратичного и кубического:

var linear = d3.easePoly.exponent(1),
    quad = d3.easePoly.exponent(2),
    cubic = d3.easePoly.exponent(3);

d3.easeQuadIn(t) Источник

Квадратичное сглаживание; эквивалентно polyIn.exponent(2).

d3.easeQuadOut(t) Источник

Обратное квадратичное сглаживание; эквивалентно 1 - quadIn(1 - t). Также эквивалентно polyOut.exponent(2).

d3.easeQuad(t) Источник
d3.easeQuadInOut(t) Источник

Симметричное квадратичное сглаживание; масштабирует quadIn для t в [0, 0.5] и quadOut для t в [0.5, 1]. Также эквивалентно poly.exponent(2).

d3.easeCubicIn(t) Источник

Кубическое сглаживание; эквивалентно polyIn.exponent(3).

d3.easeCubicOut(t) Источник

Обратное кубическое сглаживание; эквивалентно 1 - cubicIn(1 - t). Также эквивалентно polyOut.exponent(3).

d3.easeCubic(t) Источник
d3.easeCubicInOut(t) Источник

Симметричное кубическое сглаживание; масштабирует cubicIn для t в [0, 0.5] и cubicOut для t в [0.5, 1]. Также эквивалентно poly.exponent(3).

d3.easeSinIn(t) Источник

Синусоидальное сглаживание; возвращает sin(t).

d3.easeSinOut(t) Источник

Обратное синусоидальное сглаживание; эквивалентно 1 - sinIn(1 - t).

d3.easeSin(t) Источник
d3.easeSinInOut(t) Источник

Симметричное синусоидальное сглаживание; масштабирует sinIn для t в [0, 0.5] и sinOut для t в [0.5, 1].

d3.easeExpIn(t) Источник

Экспоненциальное сглаживание; возводит 2 в степень 10 * (t - 1).

d3.easeExpOut(t) Источник

Обратное экспоненциальное сглаживание; эквивалентно 1 - expIn(1 - t).

d3.easeExp(t) Источник
d3.easeExpInOut(t) Источник

Симметричное экспоненциальное сглаживание; масштабирует expIn для t в [0, 0.5] и expOut для t в [0.5, 1].

d3.easeCircleIn(t) Источник

Круговое сглаживание.

d3.easeCircleOut(t) Источник

Обратное круговое сглаживание; эквивалентно 1 - circleIn(1 - t).

d3.easeCircle(t) Источник
d3.easeCircleInOut(t) Источник

Симметричное круговое сглаживание; масштабирует circleIn для t в [0, 0.5] и circleOut для t в [0.5, 1].

d3.easeElasticIn(t) Источник

Упругое сглаживание, как резинка. Амплитуда и период колебаний настраиваются; если не указаны, по умолчанию равны 1 и 0.3 соответственно.

d3.easeElastic(t) Источник
d3.easeElasticOut(t) Источник

Обратное упругое сглаживание; эквивалентно 1 - elasticIn(1 - t).

d3.easeElasticInOut(t) Источник

Симметричное упругое сглаживание; масштабирует elasticIn для t в [0, 0.5] и elasticOut для t в [0.5, 1].

elastic.amplitude(a) Источник

Возвращает новое упругое сглаживание с указанной амплитудой a.

elastic.period(p) Source

Возвращает новое плавное ускорение с указанным периодом p.

d3.easeBackIn(t) Source

Ускорение с предвосхищением, как у танцора, сгибающего колени перед тем, как оттолкнуться от пола. Степень перескока настраивается; если не указано, она по умолчанию равна 1.70158.

d3.easeBackOut(t) Source

Обратное ускорение с предвосхищением; эквивалентно 1 - backIn(1 - t).

d3.easeBack(t) Source
d3.easeBackInOut(t) Source

Симметричное ускорение с предвосхищением; масштабирует backIn для t в [0, 0.5] и backOut для t в [0.5, 1].

back.overshoot(s) Source

Возвращает новое ускорение back с указанным перескоком s.

d3.easeBounceIn(t) Source

Ускорение с отскоком, как у резинового мячика.

d3.easeBounce(t) Source
d3.easeBounceOut(t) Source

Обратное ускорение с отскоком; эквивалентно 1 - bounceIn(1 - t).

d3.easeBounceInOut(t) Source

Симметричное ускорение с отскоком; масштабирует bounceIn для t в [0, 0.5] и bounceOut для t в [0.5, 1].