Вступ до анімації із записом Hype

• Квітня 27, 2024

Hype має дуже приємну функцію для початківця аніматора, яку називають функцією Record. Щоб скористатися цією функцією, просто натисніть велику червону кнопку запису. Ось що ми зробимо в цьому підручнику.

Як ми дізналися, для створення анімації нам потрібен лише кадр для початку та зупинки. Наприклад, щоб зменшити розмір прямокутника під час переміщення по екрану, ми б сказали Hype, на якому кадрі запустити анімацію та на якому кадрі зупинитися. Оскільки ми працюємо з анімацією на основі часової шкали, ми можемо поговорити з Hype, використовуючи ключові кадри на шкалі часу. І, ви здогадалися, ми розмістимо ці ключові кадри на цих двох спеціальних кадрах для запуску та зупинки.

Коли Hype бачить ключовий кадр, він враховує властивості об'єкта, такого як прямокутник, на екрані. Лише деякі з властивостей, які Hype візьме на замітку, - це непрозорість, джерело вліво, джерело вправо, висота розміру та ширина розміру. Ці властивості відповідають властивостям стилю CSS у документі HTML5. Hype зберігає значення цих властивостей разом з відповідною позицією або кадром на часовій шкалі.

Наш перший крок у створенні цієї зразкової анімації - це сказати Hype, який розмір зробити прямокутник і де розмістити його на екрані на початку та в кінці анімації. Все це ми можемо зробити за допомогою кнопки Запис.

1. Клацніть Файл - Новий, щоб запустити новий документ у Hype, використовуючи налаштування за замовчуванням.
   
   Додамо прямокутник на екран.
   
   
2. Клацніть піктограму «Елементи» на панелі інструментів і виберіть «Прямокутник». Hype розмістить новий прямокутник у центрі екрана.
   
   Поставимо прямокутник там, де ми хочемо, щоб він був для початку анімації. Ми збережемо розмір за замовчуванням, тому все, що нам потрібно зробити, - це перемістити прямокутник.
   
   
3. Перетягніть прямокутник до лівого краю екрана.
   
   
4. Погляньте на інспектора метрики. Прямокутник зараз становить 7 пікселів від лівого краю та 149 пікселів від верхнього краю. Також це 102 x 102 пікселя.
   
   

Тепер ми хочемо, щоб прямокутник перемістився до правого краю і зменшив 50%. Крім того, ми хочемо, щоб це відбувалося протягом всього 30 кадрів. Давайте повідомимо Hype цю інформацію за допомогою функції Record у наступному навчальному посібнику.

Продовжуйте

Відео Інструкція: How a Depressed Introvert Built a 7-Figure Web Design Company (Квітня 2024).