Как адаптировать ваше приложение к новым динамическим взаимодействиям iOS 7.

Для того чтобы анимировать компоненты вашего iOS 7 приложения и сделать их похожими на реальные объекты, необязательно нужно усердно штудировать учебник физике. Благодаря появлению у iOS 7 нового Dynamics API (интерфейс прикладного программирования) в различных представлениях стала возможной реализация различных эффектов, например, симуляции упругих сил. Создается впечатление, что между двумя объектами как бы находится пружина и если их свести, а потом отпустить, то они отпрыгнут вверх относительно границ и относительно друг друга.

Физические движки довольно хорошо знакомы разработчикам компьютерных игр. Будь то идеальная параболическая траектория, вызванная гравитационным влиянием в Angry Birds или качающаяся конфета в Cut the Rope (Перережь веревку). В играх мы привыкли взаимодействовать с объектам, которые во многом напоминают реальные. Чтобы получить этот эффект разработчики компьютерных игр не пишут специальный код, в котором бы вручную выполнялась установка положения каждого объекта. Вместо этого они используют физический движок, который при симуляции воспринимает эти элементы в качестве тел, и который использует законы Ньютона для расчета траектории движения, учитывая временные показатели.

Angry Birds screenshot

Птицы движутся по траектории, определяемой физическими законами (Источник изображения).

При использовании движка разработчики определяют упругость объекта, его плотность, уровень силы тяжести и то, как все предметы привязаны друг к другу. В iOS 7 Apple сделал эту технологию доступной для всех приложений на основе UIKit. С этими новыми возможностями UIKit, мы можем интегрировать динамическое поведение без необходимости обучаться программированию игрового движка. При корректном использовании этих возможностей, созданный вами опыт пользовательского взаимодействия с приложением будет еще более захватывающим и интуитивно понятным. Это объясняется в первую очередь тем, что пользователи будут взаимодействовать с элементами интерфейса таким же образом, как и с объектами в реальном мире.

Где вы можете использовать существующие возможности анимации?

Если в своем приложении вы ищете подходящие места для обновления и создания схожести с родными iOS 7 приложениями, то в первую очередь следует обратить внимание на анимации. Вы можете проанализировать встроенные приложения, что позволит вам получить некоторые полезные идеи. Очень часть разработчики прибегают к использованию нескольких параллельных анимаций с накладывающимися временными графиками и расчетным временем запуска следующей анимации. Будете ли вы пытаться сделать так, чтобы динамическая система автоматически выполняла за вас всю работу?

Также следует обратить внимание на все те места, где вы используете сенсорные жесты для манипулирования представлениями, в частности, на экраны переходов. В качестве примера поиграйте с иконкой камеры на экране блокировки вашего телефона. Нажатие иконки создаст импульс силы снизу, которая, в конечном счете, преодолевает силу тяжести. Перетаскивая и отпуская иконку, вы увидите, что у представления имеется эластичное основание, которое подпрыгивает относительно края телефона. Вы даже можете задать представлению начальную скорость, оттягивая его вниз.

Как все это выглядит в действии.

Я сгенерировал простой видео пример, чтобы наглядно показать возможности представления переходов. Первая часть видео показывает, что вы можете сделать в iOS 6 и версиях ниже. Представление подвергается влиянию простого сенсорного жеста и используется y-translation переход для установки центра представления. Таким образом, удается вызвать иллюзию непосредственного перемещения представления. Затем, когда вы в конечном итоге завершаете сенсорный жест, подняв палец, происходит вызов Core Animation, которая возвращает центр в исходное положение. Представление автоматически двигается вниз, и создается впечатление, как будто оно падает.

Демо видео UIDynamics в действии.

Вторая часть аналогична, но выполнена с использованием физического движка Dynamics. Мы все еще пытаемся сделать сенсорную панель и придать ей эффект упругости. Затем в нижней части экрана мы создаем жесткий барьер, который будет ограничивать движение представления и добавляем эффект влияния силы тяжести. Теперь, при касании к представлению оно будет следовать траектории движения пальца, как и прежде (но с использованием упругой связи). Когда мы отпускаем представление, то происходит его падение с ускорением, определяемым гравитационным полем. Когда представление достигает нижней границы экрана, то отскакивает. Мы также можем толкнуть представление резким движением пальца. Скорость движения вашего пальца будет передана представлению.

Вы можете получить в свое распоряжение уже готовый проект, путем клонирования DynamicUtility на GitHub. Если на вашей машине не установлен Xcode, то вы можете установить его через Mac App Store. В Xcode необходимо открыть DynamicUtility.xcodeproj и запустить его в симуляторе (Command + R). Если у вас есть аккаунт разработчика с Apple, то вы можете использовать телефон и эффект будет еще лучше.

Компановка с использованием Core Animation.

Core Animation представляет собой мощную систему благодаря которой вы можете получить абсолютно такие же результаты, которые были описаны ранее (для их достижения требовалось достаточно много усилий работы). Преимущество системы Dynamics заключается в том, что вы получаете возможность реализовать поведение объекта с точки зрения его физических характеристик. Вы можете достаточно легко экспериментировать и работать над реализацией все более и более сложного поведения. В эквивалентных Core Animation настройках ключевые переменные, управляющие поведением, не столь очевидны. Давайте рассмотрим простой пример.

В шаблоне Xcode Utility Application (шаблон для создания утилит) мы начнем с двух представлений, главного и вспомогательного окна приложения. Для начала давайте добавим механизм перехода пользователя к панели главного окна, через которую он сможет добраться до вспомогательного окна, используя жесты и Core Animation.

Все, что нужно сделать, это добавить pan жест в раскадровку и привязать его к нашему представлению. Затем, мы можем установить действие selector для отправки следующего сообщения:

- (IBAction)onPan:(UIPanGestureRecognizer*)pan {
    static CGFloat startY;
    CGPoint delta = [pan translationInView:self.view.superview];

    if (pan.state == UIGestureRecognizerStateBegan) {
        startY = self.view.center.y;
        [pan setTranslation:CGPointZero inView:pan.view.superview];
    }
    else if (pan.state == UIGestureRecognizerStateChanged) {
        CGFloat newY = self.view.center.y + delta.y;

        // detect a collision with the bottom
        if (newY > startY) {
            newY = startY;
        }
        // attach the pan to the view
        self.view.center = CGPointMake(self.view.center.x, newY);

        [pan setTranslation:CGPointZero inView:pan.view.superview];
    } else if (pan.state == UIGestureRecognizerStateEnded) {
        // gravity?
        [UIView animateWithDuration:.3 animations:^{
            self.view.center = CGPointMake(self.view.center.x, startY);
        }];
    }
}

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

Это отличный старт, но задумайтесь над тем, как бы вы реализовали следующие функции:

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

Даже после реализации перечисленных функций и изменения анимации таким образом, чтобы сила тяжести превосходила упругие силы, обилие используемых переменных приведет к громоздкости программного кода. Перефразируя Филипа Гринспана (Philip Greenspun) хочу отметить, что вы, в конечном счете, останетесь с плохо определенным, наполовину реализованным физическим движком. Взамен мы можем использовать Dynamics систему.

Новая динамическая система iOS 7 значительно упрощает ваши задачи.

Система Dynamics позволяет воссоздать сложную поведенческую модель путем комбинирования нескольких простых концепций. Давайте воспользуемся одной из таких моделей, чтобы сделать эффект скольжения более реалистичным.

Необходимые настройки.

Система Dynamics состоит из трех основных частей. UIDynamicAnimator контролирует всю систему, выполняя симуляцию физики, движения и вращения объектов. Каждое тело в процессе моделирования представлено UIDynamicItem, протоколом, реализованным на UIView. В конце, мы задаем требуемую модель поведения, создавая и добавляя UIDynamicBehavior объекты в аниматоре.

Чтобы получить требуемый эффект, мы попробуем объединить несколько поведенческих моделей:

UIAttachmentBehavior
Эта команда позволяет нам связывать элементы друг с другом или с опорной точкой. Эти связи могут быть либо жесткими, либо упругими.
UICollisionBehavior
Эта команда определяет границу, в пределах которой содержатся представления. Если бы мы использовали более одного представления, то благодаря этой команде могли бы заставить их отталкиваться друг от друга.
UIGravityBehavior
Эта команда определяет гравитационное поле. Если представление не имеет привязки и не будет находиться на одном уровне с границей, то сила притяжения заставит его сползать вниз (или в любом заданном направлении).
UIDynamicItemBehavior
Эта команда описывает атрибуты элемента, к которому выполняется привязка. Благодаря ей у элемента появляется возможность поворачиваться. Вы также можете задать величину упругой силы и на сколько сильным будет сопротивление движению.

Для использования системы Dynamics мы должны создать требуемую поведенческую модель, которую затем необходимо будет прикрепить к выбранным элементам. Далее необходимо добавить эту модель в аниматор.

Простая демонстрация действия силы притяжения.

Давайте создадим простой пример. Это необходимо для того, чтобы вы приобрели элементарные навыки, прежде чем мы перейдем к работе с анимацией. Во-первых, вам нужно будет разместить следующие свойства в заголовке:

@property (strong, nonatomic) UIView *body;
@property (strong, nonatomic) UIDynamicAnimator *gravityAnimator;

Далее в сообщение viewDidLoad необходимо добавить вызов этого сообщения:

-(void)addBodyView
{
  self.body = [[UIView alloc] initWithFrame:CGRectMake(155, 40, 10, 10)];
  self.body.backgroundColor = [UIColor blackColor];
  [self.view addSubview:self.body];
}

Этот фрагмент позволит вставить черный квадрат в верхнюю часть представления. В область раскадровки необходимо добавить кнопку “Demo Gravity” …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Мобильные приложения → 17.03.2014 by Newsbot