Статьи

Пользовательский интерфейс Android в действии: анимация макета

Примечание редактора: Этот пост является бесплатной главой из публикации Manning Publications «Android UI in Action» Карлоса Сессы.

Android имеет три основных типа анимации. Они есть:

  •  Рамочный
  •  Просмотр на основе
  •  Недвижимость на основе

Эти три типа анимации делятся на две категории: кадровая анимация и анимация движения. Неудивительно, что анимации на основе кадров представляют собой тип анимации кадров, тогда как анимации на основе представлений и свойств представляют собой типы анимации движения.

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

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

 

Рисунок 1 Поворот квадрата с измененными значениями

 

Посмотреть анимацию

Анимация просмотра — анимация на основе анимации. С анимацией просмотра мы можем только анимировать виды. Анимации на основе вида используют ряд классов, которые можно найти в пакете android.view.animation. С этим типом анимации мы можем применить четыре различных анимационных эффекта к видам, это:

  • Масштаб анимации — изменение размера.
  • Перевести анимацию-перемещение вида.
  • Альфа-анимация — настройка прозрачности вида.
  • Повернуть анимацию — Повернуть вид на заданный угол.

Для каждой из анимаций у нас есть соответствующий класс анимации в android.view.animations. Все классы анимации расширяют общий абстрактный класс Animation. На рисунке 2 показана иерархия классов для этих классов.

Рисунок 2 Иерархия классов для представления Анимации

 

Обратите внимание, что на рисунке 2 мы также показали класс AnimationSet. Этот класс позволяет группировать анимации и ставить хореографию, как они воспроизводятся. Набор AnimationSet позволяет одновременно воспроизводить несколько анимаций или организовывать их для последовательного воспроизведения.

Существует два основных этапа использования анимации просмотра. Сначала мы должны создать и определить анимацию, а затем мы должны запустить анимацию в представлении, которое мы хотим анимировать. Чтобы создать View Animation, вы можете просто создать новый класс в коде Java.  

Давайте посмотрим на создание анимации макета, которая включает в себя использование анимации перевода.

Макет анимации

В анимации просмотра у нас также есть анимации макета. С Android также можно применять анимацию к макетам. Анимации макета позволяют применять анимацию к каждому дочернему виду макета по мере его добавления или удаления. В макете анимации нам не нужно явно запускать анимацию; он будет запущен при отображении макета. Android использует класс LayoutAnimationController для анимации макета. Любой класс ViewGroup в Android может иметь класс LayoutAnimationController. Это означает, что мы можем применить анимацию макета к любому типу макета, например LinearLayout, или к любому типу AdapterView, например ListView.

LayoutAnimationController может быть определен в Java или XML, но чаще всего он определяется в XML. Таблица 1 показывает атрибуты для LayoutAnimationController.

Таблица 1 Атрибуты LayoutAnimationController

атрибут

Описание

андроид: анимация

Анимация, применяемая к каждому дочернему виду в макете.

андроид: animationOrder

Порядок, в котором применяются анимации, может быть нормальным, обратным или случайным.

Android: задержка

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

андроид: Интерполятор

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

 

LayoutAnimationController имеет ряд атрибутов, которые управляют применением анимации макета. У вас есть атрибут animation, который определяет анимацию, которая будет применяться к каждому дочернему представлению в макете. Это может быть простая одиночная анимация или более сложный набор анимации. Атрибут delay устанавливает время между запусками анимации для каждого дочернего элемента в макете. Это процентное значение. Вы также можете установить порядок анимации. Это может быть установлено как нормальное, что означает, что первый дочерний элемент в макете добавляется первым; наоборот, последний потомок добавляется первым или случайным образом; наконец, вы также можете установить интерполятор для изменения скорости изменения между задержками анимации.

В качестве примера, вот LinearLayout с примененной к нему анимацией макета. Здесь у нас есть очень простая LinearLayout с тремя текстовыми представлениями.

Рисунок 3 Простая LinearLayout с TextViews

 

Мы определили очень простой линейный макет, но нам нужно добавить один очень важный атрибут — атрибут анимации макета, который указывает, какой контроллер макета мы будем использовать для анимации TextView в макете. XML для этого контроллера LayoutAnimation показан в листинге 1.

XML перечисления 1 для LayoutAnimationController

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:delay="25%"
    android:animationOrder="normal"
    android:animation="@android:anim/slide_in_left" />

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

 

Рисунок 4 Перемещение ImageView с анимацией перевода

 

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

 

Рисунок 5 TextViews анимированные на макете

 

To bring this all together, we simply load the layout via an Activity. This is a layout animation so we don’t have to start it. Listing 2 shows the Activity used to run this example.

Listing 2 Activity to load layout with a LayoutAnimationController

public class AnimateLayoutActivity extends Activity {

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout_animation);
    }
}

What we’ve shown here is just a simple example of what can be done with a layout animation. This type of animations can be used with any type of ViewGroup including AdapterViews, such as the ListView and GridView. In fact, GridView has its own type of layout animation controller, GridLayoutAnimationController. This controller extends the LayoutAnimationController, so that we can control how animations are sequenced on a column and row basis. For more examples of using layout animations, take the sample API Demos code on the Google developers’ website.

Summary

View animations are simple to understand and use and give a great way to animate Android Views. With View animations, you can animate the scale, position, rotation, and alpha of any type of View. To create more complex animations, you can also group View animations into sets while using different types of interpolators to achieve realistic movement. In this article, we zeroed in on layout animations, a type of View animations that allows you to apply an animation to each child view in the layout as it is added or removed.

 

Android UI

By Carlos Sessa

With View animations, you can animate the scale, position, rotation, and alpha of any type of View. In this article, based on chapter 10 of Android UI, the author a type of View animations that allows you to apply an animation to each child view in the layout as it is added or removed.

Here are some other Manning titles you might be interested in:

Android in Action, Third Edition

W. Frank Ableson, Robi Sen, Chris King, and C. Enrique Ortiz

Android in Practice

Charlie Collins, Michael D. Galpin, and Matthias Kaeppler

60 Android Hacks

Carlos Sessa