🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
#статья дня
У Джоша Комо вышел разбор squash and stretch — старого анимационного приёма, который нормально работает и в интерфейсах.
Суть простая: объект во время движения немного растягивается, а при остановке или ударе — сжимается. Из-за этого движение выглядит не таким механическим.
В интерфейсах это можно использовать совсем незаметно. Например, при наведении стрелка не только удлиняется, но ещё чуть меняет форму:
.arrow {
transition: transform 200ms;
}
.button:hover .arrow {
transform: scaleX(1.15) scaleY(0.9);
}
Особенно хорошо это работает с пружинной анимацией вместо обычного easing. Но выкручивать эффект сильно не стоит: тогда кнопка уже начинает вести себя как желе.
Ну а сама статья тут: Squash and Stretch
#animation #tutorial