Процедурные анимации - 7

(English version)

Продолжаем говорить о процедурных анимациях. Сегодня будем обсуждать тряску объектов. Ввели неправильный пароль - кнопка с паролем немножечко трясётся. Еще примеры:

• землетрясение 
• тряска камеры от взрывов
• иконка будильника 

Да много где может пригодиться. Так как же объекты встряхнуть? При этом, чтобы было круто и поменьше кода? Сейчас разберемся.

Если коротко...

Нет времени читать весь текст? Тогда смотрим вот эту гиф. Основная идея там уместилась.

Колокольчик

А теперь подробнее...
Чтобы звонить в колокол, его можно просто потрясти. Сделаем это! Хотим такую анимацию:

Основное движение простое - это косинус. Вот такой:

bell.rotation = Math.cos(time * Speed) * Amplitude;

где

• Speed - скорость движения
• Amplitude - амплитуда движения

Посмотрите на гифку еще раз. Можно заметить, что вторая часть (язык) движется с небольшим запозданием. У языка как бы появилась физическая инерция!

Круто! Для этого просто добавим смещение в косинус:

bell_part.rotation = Math.cos(time * Speed - 0.7) * Amplitude;

Здесь Speed и Amplitute оставляем прежними.

Вот и всё! Две одинаковые формулы для двух объектов. Вуаля.

Кнопка с текстом

Поговорим про интерфейс. Кнопки постоянно требуют небольшой тряски.

• Неправильно что-то ввёл - кнопка трясется. 
• Не хватает денег - цена мигает. 
• Кто-то звонит - трубка трясется. 
• Утро наступило - будильник дребезжит.

Рисуем кнопку, текст делаем отдельным объектом. 

Как и с колоколом, мы используем косинус. Но теперь меняем позицию:

rect.x = Math.cos(time * 25) * 5;

text.x = Math.cos(time * 25 - 0.3) * 8

Результат:

Снова небольшой сдвиг. Но теперь уже у текста. Он движется с запозданием, по инерции. Здесь

• Speed = 25
• Amplitude = 5 (и 8 у текста)

Иконка звонка

Чуть усложняем предыдущий пример. Добавим изменение масштаба. Рисуем такое:

Иконка трубки всё так же движется по косинусу:

phone.x = Math.cos(time * 50 - 0.3) * 3;

Супер! Уже движется:

Один минус - трубка трясется постоянно. А я хочу сделать движение периодичным. Для этого модулируем амплитуду вот такой добавкой:

Math.pow(Math.sin(time), 6)

График этой функции:

Перемножаем и получаем:

phone.x = Math.cos(time * 50 - 0.3) * 3 * Math.pow(Math.sin(time), 6)

Движение теперь клевое:

Ну и добавляем изменение масштаба для эпичности:

phoneScale = 0.7 + Math.pow(Math.sin(time), 6) * 0.3;

circleScale = 0.7 + Math.pow(Math.sin(time - 0.4), 6) * 0.3;

Трям:

Блендер

Еще один пример постоянно трясущихся предметов - блендер.
Разбиваем его на несколько объектов.

А дальше трясем по отдельности:

part_1.rotation = Math.cos(time * 65) * 2;

juice.rotation = Math.cos(time * 65 - 0.8) * 2;

juice_2.rotation = Math.cos(time * 65 - 3.6) * 2;

Результат:

Вот и всё на сегодня...

Сообщения, схожие по тематике: