Всім привіт!
Привіт друзі! Нещодавно Apple провела велику презентацію для розробників, на якій показала гарнітуру змішаної реальності під назвою Vision Pro. Я не могла залишитись осторонь цієї теми і сьогодні хотіла б показати, як намалювати анімований віртуальний екран в стилі Apple Vision Pro. Поїхали!
Якщо ви потрапили на цей канал вперше і цікавитесь всім, що пов’язано з Adobe Illustrator і Figma, підпишіться на канал і натисніть на дзвіночок, щоб не пропустити нові відео. Отже, створюємо робочу область.
Відкриваємо плагін Pixels. Додаємо картинку кімнати. Тепер створюємо всередині нашої кімнати фрейм з екраном. Розміри будуть 882 на 600 пікселів. Додаємо заливку, налаштовуємо ефект блюру і зменшуємо непрозорість. Далі створюємо контур, змінюємо тип контуру на лінійний і налаштовуємо кут та кольори. Заокруглюємо нашу фігуру.
Переходимо до створення невеликого меню з вкладками. Додаємо текст “Роки”, створюємо автолейаут та налаштовуємо педінги, додаємо заливку, зменшуємо її непрозорість, далі робимо ефект блюру і заокруглюємо кути. Дублюємо об’єкт двічі та перейменовуємо. Виділяємо всі три вкладки, створюємо автолейаут, налаштовуємо його, також додаємо колір і ефект блюру.
Налаштовуємо анімацію. Додатково збільшуємо заокруглення внутрішніх елементів. Далі додаємо нашому меню такий самий контур, як у великого фрейму. Приховуємо заливку двох вкладок і цим самим робимо їх неактивними.
Тепер додаємо карточки, робимо заливку, заокруглюємо кути, дублюємо, створюємо автолейаут, розміщуємо його по центру, двічі дублюємо та підрівнюємо. Далі відкриваємо плагін Pixels і додаємо кожній картці зображення.
Тепер пишемо “Роки”. Наша вкладка з роками готова. Дублюємо і перейменовуємо наші фрейми. Видаляємо автолейаут у карточок, розгруповуємо їх, виділяємо останню колонку та дублюємо її. Тепер виділяємо всі елементи, звужуємо їх та розміщуємо на екрані. Приховуємо заливку на вкладці “Роки” і робимо видимою заливку на вкладці “Місяці”. Змінюємо “Роки” на назви місяців.
Ще раз відкриваємо плагін Pixels і додаємо інші зображення. Готово! Дублюємо фрейм ще раз, додаємо ще одну колонку з карточками, виділяємо все, звужуємо. Додатково можемо змінити їм трохи розміри та вигляд. Змінюємо назви місяців на дати.
І робимо активною вкладку “Дні”. Далі переходимо в прототип і з’єднуємо вкладку “Місяці” з фреймом місяців. Налаштовуємо анімацію так, як я показую на екрані. Так само тягнемо стрілочку від вкладки “Дні” до відповідного фрейму. І аналогічно поєднуємо всі вкладки з їх фреймами.
Остання деталь: додаємо тінь нашому віртуальному екрану і дублюємо її на всі фрейми. Готово! Ну а тепер включаємо режим презентації і дивимося, що у нас вийшло.
На цьому все. Сподіваюсь, що вам сподобалось. Якщо ви хочете ще більше уроків по анімації у Figma, напишіть про це в коментарях, а також ставте лайки цьому відео та підписуйтесь на канал. З вами була Адолька, до зустрічі!