Глава 17. Графика и анимация

Глава 17. Графика и анимация

17.0. Введение

Не сомневаюсь, что вам доводилось видеть программы для iPhone и iPad с очень красивой графикой. Кроме того, вы, наверное, встречали забавную анимацию в играх и других программах. При совместном использовании среды времени исполнения iOS и фреймворков программирования Cocoa Touch можно создавать самые разнообразные графические и анимационные эффекты с помощью сравнительно простого кода. Разумеется, качество этой графики и анимации частично зависит от эстетического вкуса программиста и его коллег-художников. Но в этой главе вы увидите, как много можно сделать в области графики и анимации, обладая весьма скромными навыками программирования.

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

В Cocoa Touch приложение состоит из окон (Window) и видов (View). Если у приложения есть пользовательский интерфейс, то в нем присутствует как минимум одно окно. Окно, в свою очередь, может содержать один или несколько видов. В Cocoa Touch окно является экземпляром класса UIWindow. Обычно в приложении открывается главное окно, и программист добавляет в это окно виды, представляющие разные компоненты пользовательского интерфейса. Видами являются, в частности, кнопки, подписи, изображения и специальные элементы управления, создаваемые самим программистом (Custom Controls). Отрисовка всех этих элементов пользовательского интерфейса и управление ими обеспечиваются во фреймворке UIKit.

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

Apple предоставляет разработчикам мощные фреймворки, предназначенные для управления графикой и анимацией в операционных системах iOS и OS X. Далее перечислены некоторые из этих фреймворков и технологий.

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

• Quartz 2D — это основной движок, который работает «под капотом» операционной системы и обеспечивает отрисовку в iOS. Quartz применяется и во фреймворке UIKit.

• Core Graphics — фреймворк, поддерживающий графический контекст (подробнее об этом — в дальнейшем), загружающий изображения, отрисовывающий изображения и т. д.

• Core Animation — как следует из его названия, этот фреймворк обеспечивает применение анимации в iOS.

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

Например, если вы хотите заполнить весь экран на iPhone 5, ваш экранный элемент должен иметь ширину 320 и высоту 568. Однако мы знаем, что истинное разрешение экрана у iPhone 5 составляет 640 ? 1136. В этом и заключается прелесть точек: оказывается, при работе с ними учитывается коэффициент масштабирования.

Здесь необходимо подробнее объяснить, что такое коэффициент масштабирования. Это обычное число с плавающей точкой, позволяющее iOS определить точное количество пикселов на экране. Для этого проверяется число логических точек, которые можно отобразить на этом экране. На iPhone 5 коэффициент масштабирования равен 2,0. Соответственно, iOS умножает 320 на 2, чтобы получить точное количество пикселов, которое устройство может отобразить по горизонтали, и умножает 568 на 2, чтобы получить количество пикселов по вертикали.

На экране устройства с iOS начало координат расположено в левом верхнем углу. Такие экраны также именуются ULO-экранами (от английского термина Upper Left Origin — «начало в левом верхнем углу»).

Это означает, что точка с координатами (0; 0) — крайняя точка в левом верхнем углу экрана. В таком случае положительные значения по оси X идут от нее направо, а положительные значения по оси Y — вниз. Иными словами, точка с координатой x = 20 находится на экране правее, чем точка с координатой x = 10. По оси Y точка с координатой y = 20 расположена ниже, чем точка y = 10.

В этой главе мы будем использовать объекты-виды типа UIView для отрисовки фигур, строк и любых других элементов, видимых на экране.

Предполагается, что вы работаете с новейшей версией Xcode on Apple. Если нет, откройте OS X, скачайте и установите новейшую версию Xcode.

Чтобы включить некоторые рассматриваемые здесь примеры кода в приложение, я сначала покажу, что нужно сделать для создания нового проекта в Xcode и подкласса от UIView, куда мы сможем поместить наш код.

1. Откройте Xcode.

2. В меню File (Файл) выполните команду New — Project (Новый — Проект).

3. Убедитесь, что в левой части экрана выбрана категория iOS. В этой категории укажите вариант Application (Приложение) (рис. 17.1)

4. В правой части экрана выберите Single View Application (Приложение с единственным видом) и нажмите Next (Далее) (рис. 17.1).

Рис. 17.1. Создание приложения с единственным видом для iOS в Xcode

5. В поле Product Name (Название продукта) (рис. 17.2) наберите имя вашего проекта.

Рис. 17.2. Установка параметров для нового проекта в Xcode

6. В поле Company Identifier (Идентификатор компании) введите префикс, идентифицирующий пакет, который предшествует выбранному вами названию продукта. Обычно идентификатор записывается в формате com.company.

7. Из списка Devices (Устройства) выберите Universal, а затем нажмите кнопку Next (Далее).

8. В следующем окне выберите, где вы хотите сохранить ваш проект, и нажмите Create (Создать).

Теперь проект Xcode открыт. В левой части окна Xcode раскройте группу Graphics (Графика) и просмотрите все файлы, которые Xcode создала для проекта. Теперь потребуется создать объект вида для контроллера вида. Для этого выполните следующие шаги.

1. Щелкните правой кнопкой мыши на корневом каталоге группы вашего проекта в Xcode и выберите New File (Новый файл).

2. Убедитесь, что в диалоговом окне New File (Новый файл) слева в качестве категории указан вариант iOS, и в качестве подкатегории выберите Cocoa Touch (рис. 17.3)

3. В правой части окна выберите класс Objective-C, а потом нажмите Next (Далее) (см. рис. 17.3).

Рис. 17.3. Создание нового класса Objective-C в Xcode

4. Убедитесь, что в следующем окне (рис. 17.4) в поле Subclass of (Подкласс) написано UIView, а потом задайте для вашего класса имя View. Далее сохраните файл на диске и нажмите Next (Далее).

Рис. 17.4. Создание подкласса от UIView

5. Теперь откройте ваш файл раскадровки для iPhone и выберите вид для контроллера вида. Раскройте раздел Utilities (Вспомогательная область) в конструкторе интерфейсов и измените имя класса того вида, в котором находится ваш контроллер вида, на View (рис. 17.5).

Рис. 17.5. Изменение имени класса контроллера вида в раскадровке

Поскольку мы создали универсальное приложение, те же манипуляции понадобится выполнить в файле раскадровки для iPad. Обычно два этих файла называются Main_iPhone.storyboard и Main_iPad.storyboard.

Итак, мы готовы приступить к написанию кода. А ведь сделать пришлось не так уж много — просто создать класс вида, относящегося к типу UIView, чтобы позже можно было изменять код этого класса. Потом мы воспользовались конструктором интерфейсов, чтобы задать в качестве класса вида контроллера вида тот самый объект вида, который мы создали ранее. Это означает, что вид контроллера вида теперь будет экземпляром созданного нами класса View.

Полагаю, вы уже просмотрели содержимое объекта-вида, сгенерированного Xcode. Один из самых важных методов этого объекта — drawRect:. Cocoa Touch автоматически вызывает этот метод всякий раз, когда приходит время отрисовывать вид. Данный метод используется для того, чтобы приказать объекту-виду отрисовать свое содержимое в графическом контексте. В свою очередь, Cocoa Touch автоматически готовит такой контекст для вида. Графический контекст можно сравнить с холстом (Canvas). Он предлагает огромное количество свойств, в частности цвет кисти (Pen Color), ее толщину (Pen Thickness) и т. д. Имея контекст, вы можете начать рисовать прямо внутри метода drawRect:, а Cocoa Touch гарантирует, что атрибуты и свойства контекста будут применены к вашим рисункам. Мы подробнее обсудим эти детали в дальнейшем, а пока перейдем к более интересным темам.

Данный текст является ознакомительным фрагментом.



Поделитесь на страничке

Следующая глава >

Похожие главы из других книг:

ГЛАВА 4. Графика и мультимедиа 

Из книги автора

ГЛАВА 4. Графика и мультимедиа  В предыдущих главах мы работали с текстом. Но не текстом единым жива WWW. Web-страницы могут содержать также графику и мультимедийные данные (аудио- и видеоролики). Умело примененные, они способны значительно оживить Web- сайт. И это не говоря уже


ГЛАВА 22. Программируемая графика 

Из книги автора

ГЛАВА 22. Программируемая графика  В предыдущей главе мы познакомились со свободно позиционируемыми элементами Web-страницы и использовали их, чтобы улучшить систему поиска на нашем Web-сайте. Получилось неплохо, правда?На этом мы закончим с поиском и обратим внимание на


ГЛАВА 4. Графика и мультимедиа

Из книги автора

ГЛАВА 4. Графика и мультимедиа В предыдущих главах мы работали с текстом. Но не текстом единым жива WWW. Web-страницы могут содержать также графику и мультимедийные данные (аудио- и видеоролики). Умело примененные, они способны значительно оживить Web- сайт. И это не говоря уже о


ГЛАВА 22. Программируемая графика

Из книги автора

ГЛАВА 22. Программируемая графика В предыдущей главе мы познакомились со свободно позиционируемыми элементами Web-страницы и использовали их, чтобы улучшить систему поиска на нашем Web-сайте. Получилось неплохо, правда?На этом мы закончим с поиском и обратим внимание на


Глава 8. Графика 2D и 3D

Из книги автора

Глава 8. Графика 2D и 3D Основу используемых в Qt средств графики 2D составляет класс QPainter (рисовальщик Qt). Этот класс может использоваться для рисования геометрически фигур (точек, линий, прямоугольников, эллипсов, дуг, сегментов и секторов окружности, многоугольников и


Глава 14 Векторная графика

Из книги автора

Глава 14 Векторная графика В первой главе части, посвященной профессиональной работе, мы познакомимся с основами векторной графики, что позволит нам проще и быстрее работать с объектами в тех случаях, когда нам, например, потребуются объекты или текстовые фреймы сложной


Глава 4 Анимация в среде 3ds Max 2008

Из книги автора

Глава 4 Анимация в среде 3ds Max 2008 • Анимация с использованием ключевых кадров• Использование контроллеров и выражений• Анимация частиц• Текст, уносимый порывами ветра• Использование модификатора Cloth (Ткань) для симуляции поведения тканейАнимацию можно представить как


Глава 6 Анимация

Из книги автора

Глава 6 Анимация ? Анимация с использованием ключевых кадров? Анимация частиц? Практическое задание. Повращаем шестеренками? Практическое задание. Наш ответ Голливуду – заставка в стиле кинокомпании UNIVERSAL? Практическое задание. Лейся, фонтан!Анимацию можно представить


Глава 6 Графика

Из книги автора

Глава 6 Графика Классы для программирования графики Программирование графики в .NET Compact Framework опирается на те же базовые приемы, что и работа с графикой для полной версии .NET Framework. Все основные классы для работы с графикой сосредоточены в пространстве имен System.Drawing. С


ГЛАВА 8 Графика и дизайн

Из книги автора

ГЛАВА 8 Графика и дизайн Еще лет пять назад для работы с графикой использовалась лишь несколько известных программ: Adobe Photoshop, Adobe Illustrator, CorelDRAW и ещё два-три графических продукта. Всплеск интереса к цифровой фотографии перевернул существующие представлении об


Графика и анимация

Из книги автора

Графика и анимация Анимация без мерцания Данная программа иллюстрирует применение процедур LockDrawing и Redraw для реализации анимации без мерцания:uses GraphABC;beginLockDrawing;for var i:=1 to 500 dobeginWindow.Clear;Brush.Color := clGreen;Ellipse(i,100,i+100,200);Redraw;Sleep(1);end;end.Основная идея состоит в следующем: отключим


Глава 11 Покадровая анимация

Из книги автора

Глава 11 Покадровая анимация Анимация — один из "коньков" Flash. Еще в самой первой версии этой программы фирма Macromedia сделала на нее ставку и не прогадала — анимация уже проникла в Интернет, и удивительные возможности Flash по созданию "мультиков" оказались востребованными.


Глава 12 Трансформационная анимация

Из книги автора

Глава 12 Трансформационная анимация А теперь настала пора познакомиться с трансформационной анимацией. То есть с тем, в чем так силен Macromedia Flash.Подробно о трансформационной анимации рассказывалось в главе 1. Давайте вспомним, что это такое. Мы рисуем всего два ключевых