Шпаргалка по функциям плавности (easing)
Функция плавности (easing) определяет скорость течения анимации, делая её более реалистичной.
Объекты в реальной жизни не начинают двигаться мгновенно и с постоянной скоростью. Открывая ящик стола, мы в начале ускоряем его, а затем тормозим. Уроните что-нибудь на пол, оно сначала ускорится вниз, а затем отскочит вверх после удара об пол.
Этот сайт поможет подобрать нужную функцию плавности.
Открытый код
Help translate site to your language
x
t
CSS
В CSS свойства transition и animation позволяют указывать функцию плавности.
.block { transition: transform 0.6s ; }
Редактировать на cubic-bezier.com.
В CSS эту функцию можно реализовать с помощью
@keyframes:Размер
Загрузка...
Положение
Загрузка...
Прозрачность
Загрузка...
PostCSS
В PostCSS функцию плавности описывать сильно проще. Есть плагин postcss-easings, который берёт информацию о переходе с этого сайта.
.block { transition: transform 0.6s ; }
Эта декларация преобразуется в подобную, которая описана выше.
К сожалению, такую функцию плавности нельзя задать с помощью какого-либо плагина PostCSS. Это можно сделать с помощью
@keyframes, смотрите выше.Градиент
Нарисовать градиент возможно с помощью postcss-easing-gradients.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
Математическая функция
Ниже вы видите код функции перехода, написанный на TypeScript. Переменная x — это абсолютный прогресс анимации, где 0 (начало анимации) и 1 (конец анимации).
function (x: number): number {
}Ниже вы видите код функции перехода, написанный на TypeScript. Переменная x — это абсолютный прогресс анимации, где 0 (начало анимации) и 1 (конец анимации).
function (x: number): number {
}Проверить плавность на изменение:
Текущая функция:
Текущая функция
Линейная функция:
Линейная функция