Створення елегантних (але простих) анімацій за допомогою Sketch та
Простий макет постера у Sketch за допомогою Magic Mirror
Поділитися
Ще одним таким стимулом став реліз бета-версії Atomic.io, який виявився напрочуд схожим зі Sketch щодо реалізованості цікавих інтерфейсних взаємодій.
У цьому пості ми розглянемо приклад анімації у прототипі Atomic, використовуючи намальовані у Sketch вихідні. Ось приклад анімації, про яку йтиметься далі.
Створення простої анімації екрана завантаження у Sketch
Коли ви відкриваєте програму вперше, вам майже завжди показується крихітна анімація, яка дає знати, що програма в процесі завантаження (а не зависла). Уявімо, що нас найняли, щоб створити таку ж анімацію на блозі. Спочатку ми намалюємо скрін у Sketch.
Відкрийте Sketch та натисніть “A”, виберіть iPhone 6 в інспекторі. Потрібно задати синій фон (#4494c2 підійде), але ми анімуватимемо артборд пізніше в Atomic, так що фон артбодра в даному випадку не підійде. Тому малюємо прямокутник (“R”) розміром з артборд і додаємо заливку синім як імітацію фону.
Видаліть межі, і повторіть цей крок ще раз із білим кольором заливки (залишіть його під синім).
Натисніть “T”, щоб надрукувати текст (будь-який колір, будь-який розмір – це неважливо), і знову перемістіть шар під решту шарів. Назвіть його “App”, це для імітації анімації гіпотетичної програми після скрина завантаження.
Малюємо логотип
Знову натисніть “R”, видаліть межі та створіть білий прямокутник розміром 50x16px та параметром Rotate (обертання) на -45градусів. Потім продублюйте його (функція Duplicate – клавіші command+d) та відобразіть погоризонталі за допомогою відповідної кнопки (наступна після Rotate). Повинно вийти так:
Утримуйте Shift, поки виділяєте обидва прямокутники одночасно, і перейдемо до інструментів з верхнього меню. Знадобляться такі інструменти у такому порядку:
- Union (об'єднати)
- Flatten (згладити)
- Edit (редагувати)
Після натискання Edit наші прямокутники стануть єдиною згладженою векторною фігурою, і ми зможемо редагувати її точки. Знову утримуючи Shift, виділіть три точки (внизу вони позначені чорним) і в інспекторі змініть параметр Corners (кути) на 5. Ми майже закінчили.
Продублюйте, відобразіть, і розмістіть шари так, щоб вийшло таке:
Копіювання шарів із Sketch в Atomic.io
З файлом .sketch покінчено. Відкрийте браузер та перейдіть на Atomic.io. Залогіньтесь (або зареєструйтеся, якщо ви раніше не користувалися ними), створіть новий проект (“New Project”) і потім натисніть “New Design”; Насамперед треба виділити вкладку "Pages" (ліворуч) і потім подивитися на протилежний бік екрану, вибрати iPhone 6 Portrait Preset.
Тепер у нас є порожнє полотно, і тут настав час скопіювати шари з Sketch до Atomic. Копіювати весь артборд цілком не підійде, тому що Atomic сприйме його як згладжений шар. Але це не має значення – нам потрібно розділити дизайн на кілька сторінок, щоб реалізувати кілька стадій анімації. У першу сторінку скопіюйте шари.
Налаштування стану Stage в Atomic
Давайте розмістимо всі шари на потрібні місця - так би мовити, "налаштуємо стан". Наш текстовийшар "App" буде рухатися праворуч, так що поки що він нам взагалі не потрібний. Задайте шару положення по осі “X” на “373px”, щоб він з'являвся ззовні. Те ж саме проробіть з білим тлом. Переконайтеся, що "App" введено по вертикалі.
Тепер потрібно перейти на панель шарів (Layers Panel) перед тим, як виділити індивідуальний шар. Поверніться на Pages, натисніть меню гамбургер, і виберіть Duplicate. Зробіть те саме так, щоб було три версії одного і того ж екрана. Тепер почнемо редагувати перший екран.
Одна сторінка “Page” еквівалентна одному стану анімації
Наша анімація буде починатися без логотипу, він не буде видно. Так як логотип складається з двох шарів, задайте його лівій частині координати так, щоб вона з'являлася зліва, а правою – праворуч. У наступному кроці ми змусимо ці шари злітатися по обидва боки екрана в центр за допомогою плавного ефекту. Перша сторінка виглядає трохи порожньою, але це потрібно.
Сторінка два не потребує жодних змін.
Перейдіть на сторінку три і виділіть всі шари відразу, утримуючи Shift, а потім перетягніть шари так, щоб біле тло повністю заповнило полотно, а синій фон (+логотип) тепер буде поза екраном. Оскільки всі шари конвертовані у зображення під час копіювання зі Sketch, текстовий шар “App” втратив свою авто-ширину. Вам потрібно пересунути цей шар вручну, щоб він був чітко посередині.
Створення різних кроків анімації:
Анімація скринів
Натисніть “H”, щоб активувати інструмент Hotspot (точка доступу) і намалюйте її (також, як ви малювали звичайний прямокутник), щоб за розмірами вона була як артборд. Справа з'явиться розділ "Interaction" (взаємодія), і там потрібно виставитинаступні налаштування:
- On: Click or Tap
- Go To: Page 2
- Animation: Elastic: Ease in-out
- Duration: 1000ms
- Delay: 0ms
Page 2 – створіть іншу точку доступу з такими параметрами:
- On: Click or Tap
- Go To: Page 3
- Animation: Expo: Ease in-out
- Duration: 1000ms
- Delay: 0ms