Графика и анимация Android
Android предоставляет обширную и разнообразную платформу для поддержки двухмерной графики и анимации. В этом разделе рассматриваются эти платформы и обсуждаются способы создания пользовательских графиков и анимаций для использования в приложении Xamarin. Android.
Обзор
Несмотря на то, что работает на устройствах, имеющих ограниченную мощность, самые высокие оценки мобильных приложений часто имеют опыт взаимодействия с пользователем (UX) с высококачественной графикой и анимацией, которые обеспечивают интуитивно понятную и динамическую работу. По мере того, как мобильные приложения получают больше и сложнее, пользователи начали использовать больше и больше приложений.
К счастью, современные мобильные платформы имеют очень мощные платформы для создания сложных анимаций и пользовательских графиков, сохраняя простоту использования. Это позволяет разработчикам добавлять широкие интерактивные возможности с минимальными усилиями.
Платформы API пользовательского интерфейса в Android можно разделить на две категории: графика и анимация.
Графика разбивается на различные подходы для выполнения двухмерной и трехмерной графики. Трехмерная графика доступна через ряд встроенных платформ, таких как OpenGL ES (версия OpenGL для мобильных устройств) и сторонних платформ, таких как «коигру» (кросс-платформенный набор средств, совместимый с XNA Toolkit). Хотя трехмерная графика не выходит за рамки этой статьи, мы рассмотрим встроенные методы двухмерной прорисовки.
Android предоставляет два разных API для создания двухмерной графики. Один из них является декларативным подходом высокого уровня и другим программным ИНТЕРФЕЙСом низкого уровня:
Графические ресурсы — используются для создания пользовательских рисунков программным способом или (чаще) путем встраивания инструкций по рисованию в XML-файлы. Графические ресурсы обычно определяются как XML-файлы, которые содержат инструкции или действия для Android, чтобы визуализировать 2D-график.
Canvas — это API низкого уровня, который включает рисование непосредственно на базовом точечном рисунке. Он обеспечивает очень детализированный контроль над отображаемыми сведениями.
Помимо этих приемов двухмерной графики, Android также предоставляет несколько различных способов создания анимации:
Анимация с отрисовкой . Android также поддерживает анимацию по кадрам, известную как нарисованная анимация. Это самый простой API анимации. Android последовательно загружает и отображает отображаемые ресурсы в последовательности (во многом похоже на мультипликационный рисунок).
Просмотр анимации — просмотр анимации — это исходный API анимации в Android и доступны во всех версиях Android. Этот API ограничен тем, что он будет работать только с объектами представления и может выполнять только простые преобразования этих представлений. Анимации представления обычно определяются в XML-файлах, находящихся в /Resources/anim папке.
Анимация свойств — в Android 3,0 появился новый набор API анимации, известный как анимация свойств. В этих новых API реализована расширяемая и гибкая система, которая может использоваться для анимации свойств любого объекта, а не только для просмотра объектов. Такая гибкость позволяет инкапсулировать анимацию в отдельные классы, упрощающие совместное использование кода.
Анимации представлений лучше подходят для приложений, которые должны поддерживать старый API-интерфейс до Android 3,0 (API уровня 11). В противном случае приложения должны использовать более новые API анимации свойств по указанным выше причинам.
Все эти платформы являются приемлемыми вариантами, но там, где это возможно, предпочтение следует предоставить анимациям свойств, так как это более гибкий API для работы с. Анимация свойств позволяет инкапсулировать логику анимации в отдельные классы, что упрощает совместное использование кода и упрощает обслуживание кода.
Специальные возможности
Графики и анимации помогают сделать приложения Android привлекательными и приятными в использовании; Однако важно помнить, что некоторые взаимодействия выполняются через средств, альтернативные устройства ввода или при помощи масштабирования. Кроме того, некоторые взаимодействия могут происходить без звуковых возможностей.
Приложения более удобны в таких ситуациях, если они были разработаны с учетом специальных возможностей: предоставление подсказок и помощника по переходу в пользовательском интерфейсе и обеспечение наличия текстового содержимого или описаний для элементов виде рисунков пользовательского интерфейса.
Дополнительные сведения об использовании интерфейсов API специальных возможностей Android см. в руководстве по специальным возможностям Google .
2D-графика
Нарисованные ресурсы являются популярным приемом в приложениях Android. Как и в случае с другими ресурсами, нарисованные ресурсы являются декларативными — они определяются в XML-файлах. Такой подход позволяет четко отделить код от ресурсов. Это может упростить разработку и обслуживание, поскольку нет необходимости изменять код для обновления или изменения графики в приложении Android. Однако в то время как графические ресурсы полезны для многих простых и распространенных графических требований, они не обладают возможностями и контроля над API Canvas.
Другой метод, использующий объект Canvas , очень похож на другие традиционные платформы API, такие как System. Drawing или основной чертеж iOS. Использование объекта Canvas обеспечивает наибольший контроль над созданием двухмерной графики. Он подходит для ситуаций, когда рисуемый ресурс не будет работать или будет трудно работать с. Например, может потребоваться нарисовать настраиваемый элемент управления Slider, внешний вид которого изменится на основе вычислений, связанных со значением ползунка.
Давайте сначала рассмотрим рисуемые ресурсы. Они проще и охватывают самые распространенные пользовательские варианты рисования.
Рисуемые ресурсы
Нарисованные ресурсы определяются в XML-файле в каталоге /Resources/drawable . В отличие от внедрения PNG или JPEG, нет необходимости предоставлять зависящие от плотности версии для нарисованных ресурсов. Во время выполнения приложение Android загрузит эти ресурсы и будет использовать инструкции, содержащиеся в этих XML-файлах, для создания двухмерной графики. Android определяет несколько различных типов рисуемых ресурсов:
Шапедравабле — это рисуемый объект, который рисует примитивную геометрическую форму и применяет к этой фигуре ограниченный набор графических эффектов. Они очень полезны для таких задач, как Настройка кнопок или настройка фона Текствиевс. Мы рассмотрим пример использования ShapeDrawable Далее в этой статье.
Стателистдравабле — это рисуемый ресурс, который изменит внешний вид в зависимости от состояния мини-приложения или элемента управления. Например, кнопка может изменить внешний вид в зависимости от того, была ли она нажата.
Лайердравабле — этот рисуемый ресурс, который помещает несколько других драваблес друг на друга. Пример лайердравабле показан на следующем снимке экрана:
Транситиондравабле — это лайердравабле , но с одним отличием. Транситиондравабле может анимировать один слой, который отображается поверх другого.
Левеллистдравабле — это очень похоже на стателистдравабле в том, что он будет отображать изображение на основе определенных условий. Однако, в отличие от стателистдравабле, левеллистдравабле отображает изображение на основе целочисленного значения. Примером левеллистдравабле может быть отображение силы сигнала Wi-Fi. При изменении силы сигнала WiFi отображаемый рисунок изменится соответствующим образом.
Скаледравабле Клипдравабле — как следует из названия, эти драваблес предоставляют функции масштабирования и обрезки. Скаледравабле будет масштабировать другой рисунок, в то время как клипдравабле будет обрезать другой рисунок.
Инсетдравабле — этот рисунок будет применяться к инсетс на сторонах другого ресурса, который может быть нарисован. Он используется, если для представления требуется фон, меньший по отношению к фактическим границам представления.
XML битмапдравабле — этот файл представляет собой набор инструкций в формате XML, которые должны выполняться на фактическом точечном рисунке. Некоторые действия, которые может выполнять Android, — мозаичное смешение, сглаживание и сглаживание. Одно из наиболее распространенных применений заключается в мозаичном заполнении точечного рисунка на фоне макета.
Пример с рисованием
Рассмотрим краткий пример создания двухмерной графики с помощью ShapeDrawable . ShapeDrawable Может определять одну из четырех базовых фигур: прямоугольник, овал, линия и кольцо. Также можно применить основные эффекты, такие как градиент, цвет и размер. Следующий код XML ShapeDrawable можно найти в проекте-компаньоне ShapeDrawable (в файле Resources/drawable/shape_rounded_blue_rect.xml ). Он определяет прямоугольник с фиолетовым градиентным фоном и скругленными углами:
Мы можем ссылаться на этот рисуемый ресурс декларативно в макете или на другом рисунке, как показано в следующем коде XML:
Нарисованные ресурсы можно также применять программно. В следующем фрагменте кода показано, как программным способом задать фон TextView:
Чтобы увидеть, как это будет выглядеть, запустите проект аниматионсдемо и в главном меню выберите фигурный элемент Shape (рисунок). Мы должны увидеть нечто вроде следующего снимка экрана:
Дополнительные сведения о XML-элементах и синтаксисе для нарисованных ресурсов см. в документации Google.
Использование API рисования Canvas
Драваблес являются мощными, но имеют свои ограничения. Некоторые вещи невозможны или очень сложны (например, применение фильтра к изображению, которое было получено камерой на устройстве). Было бы очень сложно применить сокращение красных глаз, используя рисуемый ресурс. Вместо этого API Canvas позволяет приложению иметь очень детализированный контроль для выборочного изменения цветов в определенной части изображения.
одним из классов, обычно используемых с Canvas, является класс Paint . Этот класс содержит сведения о цвете и стиле рисования. Он используется для предоставления таких объектов, как цвет и прозрачность.
API Canvas использует модель по образцу для рисования двухмерной графики. Операции применяются в последовательных слоях поверх других. Каждая операция охватывает некоторую область базового точечного рисунка. Когда область пересекается с ранее закрашенной областью, Новая заливка будет частично или полностью скроет старую. Это аналогично тому, как многие другие API рисования, такие как System. Drawing и основные графические объекты iOS, работают.
Получить объект можно двумя способами Canvas . Первый способ заключается в определении объекта Bitmap , а также при создании экземпляра объекта с ним. Например, следующий фрагмент кода создает новый холст с базовым точечным рисунком:
Другим способом получения Canvas объекта является метод обратного вызова Canvas , который предоставляет базовый класс представления . Android вызывает этот метод, когда необходимо, чтобы представление соработало и передавало Canvas объект для работы с представлением.
Класс Canvas предоставляет методы для программного предоставления инструкций Draw. Например:
Canvas. дравпаинт — заполняет растровое изображение всего холста заданными красками.
Canvas. дравпас — Рисует указанную геометрическую форму с помощью указанной краски.
Canvas. DrawText — рисует текст на холсте с указанным цветом. Текст отображается в месте расположения x,y .
Рисование с помощью API Canvas
Ниже приведен пример API Canvas в действии. В следующем фрагменте кода показано, как нарисовать представление:
В приведенном выше коде сначала создается красная заливка и зеленый объект Paint. Он заполняет содержимое холста красным цветом, а затем указывает холсту нарисовать зеленый прямоугольник размером 25% от ширины холста. Пример можно просмотреть в AnimationsDemo Project, который включен в исходный код для этой статьи. Запустив приложение и выбрав элемент Drawing в главном меню, мы должны выглядеть следующим образом:
Анимация
Пользователи, такие как элементы, которые переходят в свои приложения. Анимация — это отличный способ улучшить взаимодействие с пользователем приложения и помочь ему в его выводе. Лучшими анимациями являются те, которые пользователи не заметят, так как они естественным образом. Android предоставляет следующие три API для анимации:
Просмотреть анимацию — это исходный API. Эти анимации привязаны к определенному представлению и могут выполнять простые преобразования содержимого представления. В связи с простотой этот API-интерфейс все еще полезен для таких объектов, как анимация альфа, вращение и т. д.
Анимация свойств — анимации свойств появились в Android 3,0. Они позволяют приложению анимировать практически любую. Анимация свойств может использоваться для изменения любого свойства любого объекта, даже если этот объект не виден на экране.
Восрисованная анимация — это специальный рисуемый ресурс, который используется для применения очень простого эффекта анимации к макетам.
Как правило, анимация свойств является предпочтительной системой для использования, так как она является более гибкой и предлагает больше функций.
Просмотр анимаций
Анимация представлений ограничена представлениями и может выполнять анимацию только по таким значениям, как начальная и конечная точки, размер, поворот и прозрачность. Эти типы анимации обычно называют анимациями анимации. Анимации представлений можно определить двумя способами — программно в коде или с помощью XML-файлов. XML-файлы — это предпочтительный способ объявления анимаций представлений, так как они более удобочитаемы и удобны в обслуживании.
XML-файлы анимации будут храниться в /Resources/anim каталоге проекта Xamarin. Android. Этот файл должен иметь один из следующих элементов в качестве корневого элемента:
alpha — Эффект затухания или затухания.
rotate — Анимация вращения.
scale — Анимация изменения размера.
translate — Горизонтальное и (или) вертикальное перемещение.
set — Контейнер, который может содержать один или несколько других элементов анимации.
По умолчанию все анимации в XML-файле будут применяться одновременно. Чтобы анимация выполнялась последовательно, установите android:startOffset атрибут для одного из элементов, определенных выше.
Можно повлиять на скорость изменения анимации с помощью интерполяции. Интерполяция делает возможным ускорение, повтор или замедление эффектов анимации. Платформа Android предоставляет несколько предустановленных интерполяций, например (но не ограничиваясь ими):
AccelerateInterpolator / DecelerateInterpolator — Эти интерполяции увеличивают или уменьшают скорость изменения в анимации.
BounceInterpolator — изменение посылается в конце.
LinearInterpolator — Частота изменений является постоянной.
В следующем коде XML показан пример файла анимации, объединяющего некоторые из этих элементов:
Эта анимация будет выполнять все анимации одновременно. Первая анимация шкалы растягивает изображение по горизонтали и сжимает его вертикально, а затем изображение будет повернуто в 45 градусов по часовой стрелке и уменьшено, после чего на экране появляется экран.
Анимацию можно программно применить к представлению, увеличив анимацию и применив ее к представлению. Android предоставляет вспомогательный класс Android.Views.Animations.AnimationUtils , который увеличит ресурс анимации и возвратит экземпляр Android.Views.Animations.Animation . Этот объект применяется к представлению путем вызова StartAnimation и передачи Animation объекта. В следующем фрагменте кода приведен пример.
Теперь, когда у нас есть фундаментальное представление о работе анимации представлений, можно перейти к анимации свойств.
Анимация свойств
Анимированные свойства — это новый API, который появился в Android 3,0. Они предоставляют более расширяемый API, который можно использовать для анимации любого свойства любого объекта.
Все анимации свойств создаются экземплярами подкласса аниматор . Приложения не используют этот класс напрямую, вместо этого они используют один из подклассов:
Валуеаниматор — этот класс является наиболее важным классом в API анимации всего свойства. Он вычисляет значения свойств, которые необходимо изменить. Объект не ViewAnimator обновляет эти значения напрямую; вместо этого он создает события, которые могут использоваться для обновления анимированных объектов.
Обжектаниматор — этот класс является подклассом . Он предназначен для упрощения процесса анимации объектов путем приема целевого объекта и свойства для обновления.
Animation — этот класс отвечает за координацию выполнения анимации по отношению друг к другу. Анимации могут выполняться одновременно, последовательно или с заданной задержкой между ними.
Оценивающие являются специальными классами, которые используются в анимации для вычисления новых значений во время анимации. Android предоставляет следующие средства оценки:
Интевалуатор — вычисляет значения для целочисленных свойств.
Флоатевалуатор — вычисляет значения для свойств float.
Аргбевалуатор — вычисляет значения для цветовых свойств.
Если свойство, для которого выполняется анимация, не является float , int или цветное, приложения могут создать собственный оценщик путем реализации ITypeEvaluator интерфейса. (Реализация пользовательских оценивающих выходит за рамки данного раздела.)
Использование Валуеаниматор
Анимация состоит из двух частей: вычисление анимированных значений и последующее задание этих значений для свойств некоторого объекта. Валуеаниматор вычисляет только значения, но не будет обрабатывать объекты напрямую. Вместо этого объекты будут обновляться внутри обработчиков событий, которые будут вызываться во время существования анимации. Такая схема позволяет обновлять несколько свойств из одного анимированного значения.
Экземпляр можно получить ValueAnimator , вызвав один из следующих методов фабрики:
- ValueAnimator.OfInt
- ValueAnimator.OfFloat
- ValueAnimator.OfObject
После этого ValueAnimator экземпляр должен иметь установленную длительность, после чего он может быть запущен. В следующем примере показано, как анимировать значение от 0 до 1 в диапазоне 1000 миллисекунд:
Но сам фрагмент кода, приведенный выше, не очень полезен — аниматор будет работать, но для обновленного значения нет цели. Animator Класс вызовет событие Update, когда принимает решение о необходимости информирования прослушивателей нового значения. Приложения могут предоставлять обработчик событий для реагирования на это событие, как показано в следующем фрагменте кода:
Теперь, когда у нас есть понимание ValueAnimator , вы можете узнать больше о ObjectAnimator .
Использование Обжектаниматор
Обжектаниматор является подклассом , объединяющим ядро времени и вычисление значений ValueAnimator с логикой, необходимой для подключения обработчиков событий. ValueAnimator Приложение требует, чтобы приложения явно подстроили обработчик событий ObjectAnimator . для нас потребуется выполнить этот шаг.
API для ObjectAnimator очень похож на API для ViewAnimator , но требует предоставления объекта и имени обновляемого свойства. В следующем примере показан пример использования ObjectAnimator :
Как видно из предыдущего фрагмента кода, ObjectAnimator может уменьшить и упростить код, необходимый для анимации объекта.
Рисованные анимации
Окончательный API анимации — это интерфейс API для рисования. При рисовании можно загружать ряд рисуемых ресурсов один за другим и отображать их последовательно, аналогично перевернутому.
Эта анимация будет выполняться через шесть кадров. android:duration Атрибут объявляет, сколько времени будет отображаться для каждого кадра. В следующем фрагменте кода показан пример создания рисуемой анимации и ее запуска при нажатии пользователем кнопки на экране:
На этом этапе мы рассмотрели основы интерфейсов API анимации, доступных в приложении Android.
Итоги
В этой статье представлено множество новых концепций и API-интерфейсов, помогающих добавить графику в приложение Android. Сначала мы рассмотрели различные API двухмерной графики и продемонстрировали, как Android позволяет приложениям рисовать непосредственно на экране с помощью объекта Canvas. Мы также рассмотрели некоторые альтернативные методы, позволяющие декларативно создавать графики с помощью XML-файлов. Затем мы собрались обсудить старый и новый API для создания анимаций в Android.
Источник
