Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Эффекты гравитации, растягивания и сжатия с использованием анимаций CSS

1 сентября 2016 | Опубликовано в css | 2 Комментариев »

Значения свойств ease-in и ease-out , используемые для улучшения анимации движения, могут быть также названы трением и инерцией, результатами гравитации. Гравитацию еще можно рассматривать как настроение: тяжелое, пугающее и скучное или легкое, привлекательное и игривое. Создавая такие типы движения с помощью CSS, можно оживить сайт привлекательным движением.

 

 


Простой пример — отскакивающий мяч выше, движение которого может быть использовано для уведомления пользователя о критически важном сообщении. Разметка в этом случае — единственный блочный элемент, которому заданы стили и форма мяча:

 

#redball {
        border-radius: 50%;
        width: 20vw; height: 20vw;
        background-image: radial-gradient(ellipse farthest-corner at 25% 25%, #f00,#000);
        margin: 0 auto;
}

После этого следующий код CSS передвигает мяч с помощью некоторых значений, полученных Albie Brown, он показан без приставок производителей для ясности, в этом случае они почти нигде и не понадобятся для большинства современных версий браузеров:

 

@keyframes bounce {
        from, to {
                transform: translateY(30vh);
        }
        80% {
                transform: translateY(15vh);
        }
}

Единицы измерения vw и vh использованы для задания размеров мячу и его движению, чтобы оба эти значения были адаптивными в современных версиях браузеров без использования @media queries.

@keyframes bounce {
        from, to {
                transform: translateY(30vh);
        }
        80% {
                transform: translateY(15vh);
        }
}

Для вызова анимации мяча используется этот код CSS:

 

#redball {
        transform-origin: center bottom;
        animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;
}

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

Сама по себе анимация создает иллюзию гравитации, но не ее полное действие: мягкий предмет, такой как резиновый мяч, слегка сожмется при ударе о землю и расширится, отскакивая. Художник-мультипликатор Уолт Дисней называл это движением растягивания и сжатия, наиболее важным законом анимации. Художники используют его для придания персонажам и предметам жизненности и реалистичности. Его не сложно создать с помощью CSS, добавляя трансформацию масштабирования к уже имеющимся в анимации трансформациям CSS:

 

@keyframes bounce {
        from, to {
                transform: translateY(30vh) scaleY(.98);
        }
        80% {
                transform: translateY(15vh) scaleY(1.02);
        }
}

Насколько используется сжатие и растяжение, зависит частично от предмета и частично от стиля анимации: в некоторых видах анимации, таких как японская анимация аниме, используется гипертрофированная степень.

Конечно, в приведенной выше анимации остается нереалистичным то, что движение продолжается бесконечно.

Если Вы хотите придать анимации, над которой работаете, больше естественного движения, рекомендуем ознакомиться со следующими уроками:

Готовимся к приходу осени: создание падающих листьев с использованием CSS, гравитации, смещения и реалистичных теней.

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Павел Рафеев
    Thumb up Thumb down +1

    Эт ктож такие кривые анимации у вас рисует, Дежурка?

    Ответить

Оставить ответ


5 − = три

Вставить изображение