d3-ease

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

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

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

Установка

Если вы используете npm, npm install d3-ease. Также можно скачать последнюю версию на GitHub. Для обычного HTML в современных браузерах импортируйте d3-ease из Skypack:

<script type="module">

import {easeCubic} from "https://cdn.skypack.dev/d3-ease@3";

const e = easeCubic(0.25);

</script>

Для устаревших сред вы можете загрузить UMD-пакет d3-ease с CDN, основанной на npm, например, jsDelivr; экспортируется глобальная переменная d3:

<script src="https://cdn.jsdelivr.net/npm/d3-ease@3"></script>
<script>

const e = d3.easeCubic(0.25);

</script>

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

Справочник API

ease(t)

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

const te = d3.easeCubic(t);

Аналогично, чтобы применить пользовательское сглаживание elastic:

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

// During the animation, apply the easing function.
const 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. Например, чтобы создать эквиваленты linear, quad и cubic:

const linear = d3.easePoly.exponent(1);
const quad = d3.easePoly.exponent(2);
const 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) Source

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

elastic.amplitude(a) Source

Возвращает новое упругое плавное изменение с заданной амплитудой 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

Возвращает новое плавное изменение с предвосхищением с заданным перескоком 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].