Skip to content

Latest commit

 

History

History
76 lines (56 loc) · 3.45 KB

File metadata and controls

76 lines (56 loc) · 3.45 KB

🧪 Практическая задача: Анимация пульсирующей кнопки

🎯 Цель

Создать анимацию для UI-кнопки, которая плавно увеличивается, уменьшается и меняет цвет, привлекая внимание игрока. Анимация должна зацикливаться.


📦 Что понадобится

  • Сцена Unity с UI Canvas
  • Объект Button на Canvas
  • Компонент Image на кнопке (есть по умолчанию)

📝 Задание (шаг за шагом)

Шаг 1. Подготовка

  1. Создайте новую сцену.
  2. Добавьте Canvas (если его нет, ПКМ → UI → Canvas).
  3. Добавьте Button (ПКМ на Canvas → UI → Button — Legacy).
  4. Переименуйте кнопку в PulsingButton.

Шаг 2. Открытие Animation Window и создание клипа

  1. Выделите PulsingButton в Hierarchy.
  2. Откройте Animation Window (Ctrl + 6).
  3. Нажмите Create, дайте имя PulseAnimation, сохраните.

Шаг 3. Добавление свойств

Нажмите Add Property и добавьте:

  • Rect TransformScale (будем менять размер)
  • ImageColor (будем менять цвет)

Шаг 4. Создание ключевых кадров для масштаба (Scale)

Время Значение Scale (X и Y)
0:00 (1, 1)
0:30 (1.2, 1.2)
1:00 (1, 1)

🔧 Как сделать: переместите красную полосу, измените Scale в инспекторе.

Шаг 5. Создание ключевых кадров для цвета (Color)

Время Цвет (в Image → Color)
0:00 Белый (255,255,255)
0:30 Красный (255,0,0)
1:00 Белый

🔧 Совет: кликните на цветовую палитру в инспекторе при активной записи 🔴.

Шаг 6. Настройка зацикливания

  1. В окне Project найдите клип PulseAnimation.
  2. Нажмите на него, в Inspector поставьте галочку Loop Time.
  3. Нажмите Apply.

Шаг 7. Проверка

Нажмите Play в редакторе Unity. Кнопка должна плавно увеличиваться, краснеть и возвращаться обратно — бесконечно.


✅ Критерии успеха

  • Кнопка плавно меняет размер (от 1 до 1.2 и обратно)
  • Кнопка плавно меняет цвет (белый → красный → белый)
  • Анимация повторяется без остановки
  • Анимация работает во время выполнения сцены (Play mode)

🧠 Вопросы для самопроверки

  1. Что произойдёт, если в Scale в 0:30 поставить (0.5, 0.5)?
  2. Как сделать анимацию длительностью 2 секунды вместо 1?
  3. Как добавить третий цвет (синий) в середине анимации?

⭐ Если этот проект был полезен, поставьте звезду на GitHub!