Статья написана в декабре 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