d3-ease

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

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

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

Установка

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

<script src="https://d3js.org/d3-ease.v2.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. См. исследователь сглаживания для визуального примера. Например, чтобы применить сглаживание cubic:

var te = d3.easeCubic(t);

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

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

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) Источник

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

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

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

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

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

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

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

back.overshoot(s) Источник

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

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

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

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

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

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

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