Створення цікавих і привабливих анімацій простими функціями Spine (всередині важкі gif)



(Прим. пер.: 1. Spine — це патентований багатоплатформовий пакет для створення двовимірних скелетних анімацій з підтримкою різних ігрових тулкитов.
2. Обережно, в пості є близько 38 МБ gif'ок, всі вони заховані під кат.)


Як створити плавне перемикання або поворот спрайтів?
Створення плавного і природного перемикання і поворот спрайтів при роботі з Spine або будь-яким іншим інструментом інтерполяції анімації часто буває важким завданням. Воно може розвалити порядок анімації і зробити остаточний результат дергающимся або незграбним.

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

Читати далі →

Прототипування iOS-анімацій з Framer

Пропоную читачам «Хабрахабра» переклад статті «Using Framer to Prototype iOS Animations» з сайту raywenderlich.com.

Статичні, нерухомі прототипи, м'яко кажучи, відстій. Зі статичними прототипами можна показати візуальний дизайн, але не дизайн взаємодії.
Розмірковуючи про важливість дизайну взаємодії для додатків, можна сказати, що статичний прототип — це як пазл з відсутніми шматочками. Так чому б усім не створювати інтерактивні прототипи замість усього цього? Що ж, з допомогою утиліт начебто After Effects прототипування може зайняти занадто багато часу. А сам прототип може так і не знадобитися.
Спробуйте Framer: утиліта для дизайнерів і розробників досить проста у використанні.

Читати далі →

Ідеально плавні UITableView

Кілька років я займаюся промисловою розробкою для прекрасної мобільної платформи — iOS. За цей час я бачив багато різних додатків, і людей, які ці програми роблять.

Хороші розробники для пристроїв Apple є, але я все одно часто помічаю, що хтось не знає, як використовувати весь потенціал одних із самих популярних мобільних пристроїв на ринку для створення справді плавних додатків.

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

Читати далі →

Покращуємо форму оплати з допомогою дизайну та анімації

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

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

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

Читати далі →

Переходи за допомогою CoreAnimation: анимируем поява зображення

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

Читати далі →

Створення view з анімацією зміни властивості

Однією з типових задач при розробці додатків під iOS є створення кастомних елементів UI, в тому числі іноді може знадобитися анімувати зміни значення будь-якої з властивостей. У статті розглядається процес створення підкласу UIView, що має властивості, значення яких можна змінювати з анімацією. Простий приклад: необхідно намалювати кругової прогрес з можливістю анімувати зміна кольору та значення в межах від 0 до 1.


Читати далі →

Створення гри на ваших очах - частина 7: 2D-анімації в Unity («як у флеші»)

    У цій статті поговоримо про 2D анімації в Unity. Я розповім про свій досвід роботи з рідними анімаціями в ЮНИТИ, про те, наскільки тайм-лайни схожі на флешевскіе, про управління анімаціями, event'ах, вкладеності, і про те, як художник справляється з анимирования.
 
Для початку, трохи теорії.
 
В Unity є дві сутності:
 
1. Анімація (те, що відображається у вікно «Animation»)
2. Mechanim дерево анімацій (те, що відображається у вікні «Animator»).
 
 
 
Нижче я трохи розповім, що це таке і як нам може припадати (або не згодитися).
 
Читати далі →