Анимации в Xcode без кода

Анимации в Xcode без кода

Статья написана в декабре 2013 года, сегодня нашлась и я решил ее опубликовать. Надеюсь кому-то будет полезна.

После написания руководства по использованию Xcode 5 для дизайнеров, я сразу почувствовал необходимость в продолжении, чтобы как можно больше дизайнеров избавились от страха анимировать свои творения самостоятельно.

Читайте также:

Обучение Swift и Xcode для дизайнера. Создание своего приложения на Swift

Canvas

http://canvaspod.io — так как кодинг макета может вызывать трудности в Xcode, мы постарались сделать Canvas максимально легковесным и мощным в работе. Наша цель – ускорить iOS-разработки в разы, используя готовую библиотеку, решающую большую часть задач по макету, чтобы вы могли сфокусироваться на других вопросах. Примеры таких задач – анимации, кастомные шрифты, звуки, фоновые размытия, диалоги и т.д. – все это недоступно в Xcode.

Скачайте приложение Canvas Xcode

Canvas
Да, мы создали приложение для iOS 7, чтобы показать всю мощь Canvas, и оно open-source. Скачайте его себе!

Работа с Xcode Storyboard

Недавно @jamztang, наш iOS-инженер, показал, как создавать функции, которые будут напрямую подключаться к Storyboard используя атрибуты времени выполнения (Runtime Attributes) инспектора Identity. Это означает, что вам не нужно ничего кодить руками, чтобы запускать функции. С помощью простой библиотеки Animations вы можете вызывать анимации, регулируя разные параметры, такие как задержка и длительность. Точь-в-точь как Animate.css, но для iOS-разработок.

Использование анимации fadeIn
Использование анимации fadeIn (затухания) из Canvas, которая длится 0.5sec и начинается после 0.5sec задержки.

Установите CocoaPods

CocoaPods – менеджер библиотек для iOS — очень похоже на Bower (веб) или NPM (узел).

CocoaPods

Если вы не установили CocoaPods, сначала запустите эту команду. Для подробностей перейдите на http://beta.cocoapods.org

CocoaPods Xcode
Перейдите на свой проект Xcode, используя терминал, и создайте Pod-файл.

CocoaPods указываем библиотеку
Затем, просто добавьте 2 строки кода, чтобы указать библиотеку, которую хотите установить

pod install
Когда закончите, сделайте “pod install”. Теперь открывайте .xcworkspace, и ваш основной Xcode-проект будет обращаться ко всем файлам через поды.

Встраивание во View

Xcode View
Выделите любой элемент или группу элементов и встройте ее в вид, чтобы можно было вызвать анимацию. Xcode требует определенности с объектом, который вы вызываете. В целях простоты, анимация будет работать только если все обернуто в представление (View).

CSAnimationView
Укажите CSAnimationView и настройте задержку, длительность и тип

Использование с кодом

Простите, что? Кодинг опционален на данном этапе, но если вы хотите продвинуться, например, начать анимацию по нажатию кнопки, придется немного поработать вручную.

Каждый экран подключен к ViewController.h /.m. Вот там вы и можете писать код под свой UI.

Storyboard
Думайте, что это ваш CSS или Javascript, где можно кастомизировать все, что нельзя кастомизировать через Storyboard.

IBOutlet View и IBAction
Давайте создадим представление IBOutlet View и IBAction.

 

IBOutlet “listView”
Мы назвали этот IBOutlet “listView”, параметры которого заданы в Storyboard.

ViewController.m
Затем, в ViewController.m, импортируйте CSAnimationView.h и сделайте startCanvasAnimation.

Готовая анимация Xcode

Вуаля! Кодить не так и плохо, да? :)

Компоненты

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

Кастомные шрифты

Кастомные шрифты Xcode
В каждом проекте есть info.plist. Тут можно указать кастомные параметры приложения. В данном случае мы настроим только что добавленные шрифты.

Property Fonts
Теперь просто добавьте Property Fonts для приложения. Включайте свои шрифты, используя имена файлов.
В Storyboard, Runtime Attributes, задайте fontName для мени PostScript.
В Storyboard, Runtime Attributes, задайте fontName для мени PostScript.

PostScript из Font Book
Название шрифта, которое распознает Xcode – это название PostScript из Font Book.

Кастомный шрифт в Xcode
Вот, теперь у вас есть красивый кастомный шрифт :)

Размытый фон

Размытый фон Xcode
Размытые фоны не так-то просто реализовать в iOS7. К счастью, есть метод достичь того же эффекта, который включен в эту библиотеку.

Включите класс CSBlurView Clas
Включите класс CSBlurView Class, задайте параметру barStyle значение 1 для Black translucence или 0 для White. Убедитесь, что Object, к которому применяются настройки, – это View.

Светлая строка статуса

В iOS 7 сложновато переключаться с черной статусной строки на светлую. Вдобавок, тема экрана загрузки отдельна от основной темы приложения.

info.plist параметр Status Bar style
Перейдите на info.plist и добавьте параметр Status Bar style в значении Light

Скачайте Ripple-demo 1.1

Я обновил проект, добавив эти крутые анимации, CocoaPod-ы и кастомизации, так что вперед, играйтесь! К сожалению, не могу поделиться файлами шрифтов, так что придется вам использовать свои.

Скачать Ripple 1.1

Чего ждать?

К библиотеке планируется добавить больше анимаций. Также, больше атрибутов для анимаций, таких как Ease-In/Out, Enter/Exit, Distance и т.д.

В качестве компонентов мы также планируем добавить параллакс, заголовки-липучки, онбординг, размытый фон и целый ряд кастомизаций, недоступных в Xcode, и через Storyboard,и через код.

Разработчикам нужна ваша помощь

В этот проект было вложено много часов: мы разработали iOS-приложение, CanvasPod.io, демо Ripple и библиотеку CocoaPod, а также уроки. Если вам нравятся эти работы, делитесь ими с окружающими. Чем больше фидбека мы получим, тем лучше ! :)

Следите за проектом: @canvaspod

Или его создателями: @mengto, @jamztang

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Практические советы по улучшению микровзаимодействий вашего интерфейса
Подробнее

Практические советы по улучшению микровзаимодействий вашего интерфейса

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

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share