UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Анимации в Xcode без кода
Редакція
Редакція

Опубліковано • Оновлено

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

Статья написана в декабре 2013 года, сегодня нашлась и я решил ее опубликовать. Надеюсь кому-то будет полезна. После написания руководства по использованию Xcode 5 для дизайнеров, я сразу почувствовал необходимость в продолжении, чтобы как можно больше дизайнеров избавились от страха анимировать свои творения самостоятельно. Читайте также: Обучение Swift и Xcode для дизайнера. Создание своего приложения на Swift

Canvas

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


Перевод статьи Meng To

Топ коментарі (0)