анімації форм

Про анімації форм

При анімації форми в окремому кадрі на часовій шкалі малюється векторна форма, а в іншому кадрі ця форма змінюється, або малюється нова форма. Animate потім интерполирует фігури для проміжних кадрів, створюючи анімацію однієї фігури, що перетікає в іншу.

Animate дозволяє додавати анімацію форми в однакові суцільні обведення і довільні фантазійні обведення. Також можна додавати анімацію форми в обведення, поліпшені за допомогою інструменту «Мінлива ширина». Поупражняйтесь з потрібними фігурами, щоб побачити, що виходить. Можна використовувати контрольні точки, щоб вказати Animate, які точки початкової фігури відповідають конкретним точкам кінцевої фігури.

Також можна анімувати положення і колір форм в рамках анімації форми.

Щоб застосувати анімацію форми для груп, примірників або растрових зображень, розбийте ці елементи. Див. Розбивка примірника символу.

Щоб застосувати анімацію форми до тексту, двічі розбийте текст, щоб перетворити текст в об'єкти. Див. Розбивка примірника символу.

Створення анімації форми

Нижче показано, як створити анімацію форми з 1 по 30 кадр тимчасової шкали. Проте, можна створювати анімацію в будь-якій частині тимчасової шкали.

У кадрі 1 намалюйте квадрат за допомогою інструменту «Прямокутник».

Виберіть кадр 30 в тому ж шарі і додайте порожній ключовий кадр, вибравши «Вставка»> «Тимчасова шкала»> «Порожній ключовий кадр» або натиснувши F7.

Щоб застосувати для користувача уповільнення, клацніть значок «Змінити» поруч з елементом Уповільнення.

Діалогове вікно користувача уповільнення виводить діаграму, в якій дається графічне уявлення про швидкість руху в часі. На горизонтальній осі показані кадри, а на вертикальній - відсоток змін. Перший ключовий кадр представлений як 0%, а останній ключовий кадр - як 100%.

Нахил кривої діаграми показує швидкість змін об'єкта. Якщо крива горизонтальна (без нахилу), то швидкість дорівнює нулю; якщо крива вертикальна, то зміна відбувається миттєво.

анімації форм

Налаштувавши стандартні набори уповільнення, як показано на знімку екрана, можна копіювати зміни і використовувати їх в будь-якому іншому стандартному наборі параметрів. Щоб виконати операції «Копіювати», «Вставити», «Скасувати» або «Повторити», можна натиснути правою кнопкою миші в діалоговому вікні «користувача уповільнення» і вибрати потрібну команду в контекстному меню.

При застосуванні наборів налаштувань уповільнення до документа HTML5 Canvas можна створити оптимізований вихідний файл JS. При створенні вихідних даних технологія HTML5 Canvas використовує функції уповільнення анімації JS.

Управління змінами форми за допомогою хинтов кривих

Для управління більш складними або несподіваними змінами форми можна використовувати контрольні точки. Контрольні точки визначають точки, які повинні відповідати в початковій і кінцевій фігурах. Наприклад, при виконанні tween-анімації особи, вираз якого змінюється, контрольні точки можна використовувати, щоб відзначити кожне око. Тоді під час зміни форми обличчя не стає безформним і незрозумілим, кожне око залишається розпізнаваним і змінюється окремо під час переходу.

анімації форм

Хинти кривих містять букви (від a до z), які визначають точки, відповідні початковій і кінцевій фігурі. Можна використовувати до 26 хинтов кривих.

У початковому ключовому кадрі контрольні точки жовті, в кінцевому ключовому кадрі вони зелені, а поза кривої вони червоні.

При створенні tween-анімації форми для отримання найкращих результатів дотримуйтесь наступних правил.

У складній анімації форми створюйте проміжні форми і робіть для них tween-анімацію, замість того, щоб визначати тільки початкову і кінцеву форму.

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

Контрольні точки найкраще розміщувати проти годинникової стрілки, починаючи з лівого верхнього кута фігури.

Використання контрольних точок

Анімація обведення зі змінною шириною

У Animate CC можна додавати анімацію форми в обведення зі змінною шириною. Раніше в Animate можна було створювати анімацію форми тільки для суцільних однакових обводок і фігур. Це не дозволяло розробникам створювати анімацію форми для неоднорідних обводок, наприклад для вдосконалених за допомогою інструменту «Мінлива ширина». Анімація обводок зі змінною шириною значно розширює можливості дизайну в Animate CC.

Додавання анімації руху для фантазійних обводок здійснюється так само, як для фігур і суцільних однакових обводок. Робочий процес вимагає визначити початкову та кінцеву форму анімації, після чого Animate створює проміжні кадри анімації.

Інструмент «Мінлива ширина»

Інструмент «Мінлива ширина» дозволяє обробляти однакові суцільні обведення для створення витончених, фантазійних обводок. Додаткові відомості про використання інструменту «Мінлива ширина» см. В розділі Обробка обводок і фігур за допомогою інструмента «Мінлива ширина».

Додавання анімації форми в обведення зі змінною шириною