Введение в анимацию с Hype Record

• May 17, 2024

Hype имеет очень хорошую функцию для начинающего аниматора, которая называется функцией записи. Чтобы использовать эту функцию, просто нажмите большую красную кнопку записи. Вот что мы будем делать в этом уроке.

Как мы узнали, для создания анимации нам нужен только начальный и конечный кадры. Например, чтобы уменьшить размер прямоугольника во время его перемещения по экрану, мы бы сказали Hype, в каком кадре запустить анимацию, а в каком - остановить. Поскольку мы работаем с анимацией на временной шкале, мы можем общаться с Hype, используя ключевые кадры на временной шкале. И, как вы уже догадались, мы разместим эти ключевые кадры в этих двух специальных кадрах запуска и остановки.

Когда Hype видит ключевой кадр, он принимает к сведению свойства объекта, такого как прямоугольник, на экране. Вот лишь некоторые из свойств, которые Hype примет к сведению: Непрозрачность, Левое начало, Правое начало, Размер, Высота и Ширина. Эти свойства соответствуют свойствам стиля CSS в документе HTML5. Hype хранит значения этих свойств вместе с соответствующей позицией или кадром на временной шкале.

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

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

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

Продолжить

Видео инструкция: Subway Surfers The Animated Series - Episode 11 - Flux (May 2024).