Освой программирование играючи

Сайт Александра Климова

Шкодим

/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000

LayoutAnimation - Анимация разметки и групп компонентов

Класс LayoutAnimation нужен для применения анимации к группам представлений: передает одиночный объект Animation (или AnimationSet) для каждого дочернего компонента в заранее определенной последовательности.

Используйте объект LayoutAnimationController для задания объекта Animation (или AnimationSet), который применяется к каждому компоненту в группе. Ко всем компонентам, содержащим этот объект, будет применена одна и та же анимация, но вы можете задействовать LayoutAnimationController для указания порядка и времени запуска для каждого компонента.

Для этих целей в Android предусмотрено два класса:

  • LayoutAnimationController — позволяет выбирать начальный сдвиг для каждого компонента (в миллисекундах) и порядок (нормальный, обратный или случайный), в каком анимация применится для каждого дочернего элемента;
  • GridLayoutAnimationController — как производный класс назначает анимационную последовательность для дочерних компонентов с использованием ссылки на строки и столбцы;

Создание анимации для разметки

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

Создадим простую анимацию в файле popin.xml в каталоге res/anim

popin.xml


<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator" >

    <scale
        android:duration="400"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />

</set>

А также зададим описание LayoutAnimation в файле popinlayout.xml в той же папке. Элемент LayoutAnimation в случайном порядке применит всплывающую анимацию к каждому дочернему представлению заданной группы.

popinlayout.xml


<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/popin"
    android:animationOrder="random"
    android:delay="0.5" />

Теперь можно применить созданную анимацию к группе представлений двумя способами - с помощью XML-ресурса или программно. В XML это делается при помощи атрибута android:layoutAnimation у разметки:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    android:layoutAnimation="@anim/popinlayout" >

Чтобы применить анимацию для разметки в коде программы, вызовите метод setLayoutAnimation() из объекта ViewGroup, передавая ему ссылку на соответствующий экземпляр LayoutAnimation.

В обоих случаях анимация выполнится один раз, при первом появлении группы представлений. Вы можете вызвать её повторно, запустив метод scheduleLayoutAnimation() из объекта ViewGroup. Таким образом, анимация выполнится при следующем появлении группы представлений.

Анимация для разметки также имеет поддержку интерфейса AnimationListener.

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


aViewGroup.setLayoutAnimationListener(new AnimationListener() {
    public void onAnimationEnd(Animation _animation) {
        // TODO: Действия, выполняемые по завершении выполнения анимации.
    }
    public void onAnimationRepeat(Animation _animation) {}
    public void onAnimationStart(Animation _animation) {}
});
aViewGroup.scheduleLayoutAnimation();

Создание анимации для Splash-экрана

Ссылка на исходный код приведена в конце статьи

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

Если на таком экране-заставке вывести просто текст о названии и версии игры, а также логотип, то будет скучно. Мы пойдем по другому пути и сделаем следующее:

  • Поместим на форму TextView для отображения верхней текстовой строки
  • Далее разместим контейнер TableLayout с двумя строками и столбцами - получается четыре ячейки
  • В каждой ячейке разместим элемент ImageView
  • Снова размещаем TextView с другой текстовой информацией
  • И снова размещаем TextView, где будет содержаться информация о версии программы

Далее добавляем ресурсы в проект: картинки (res/drawable), цвета для текстовой информации (colors.xml), размеры для шрифтов (dimens.xml).

В итоге мы получим следующий результат

Создание анимации

Создание анимации

Будем использовать анимацию преобразований. Создаем папку res/anim, в котором создадим три новых файла fade_in.xml, fade_in2.xml и custom_anim.xml.

В первом файле анимация плавно увеличивает непрозрачность (альфа-канал) верхнего текста от значения 0 (прозрачный) до значения 1 (непрозрачный) в течение 2.5 секунд.

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

Третья анимация самая интересная. Она будет вращать картинки вокруг своей оси (rotate), а также менять их прозрачность (alpha). Причём вращаться они будут парами. Сначала будут вращаться левые две картинки, а затем - правые. Кроме вращения и изменения прозрачности, также будут меняться их размеры (scale).

Управление анимации происходит программным путём. Чтобы применить первую анимацию к верхнему тексту, нужно получить экземпляр элемента TextView в методе onCreate(), загрузить анимационный ресурс в объект Animation и вызвать метод startAnimation() элемента TextView.


TextView logo1 = findViewById(R.id.TextViewTopTitle);
        
Animation fade1 = AnimationUtils.loadAnimation(this, R.anim.fade_in);
logo1.startAnimation(fade1);

Аналогично поступаем и со вторым текстовым элементом.

Чтобы остановить анимацию, например, в методе onPause(), нужно вызвать метод clearAnimation().

Анимация всех элементов в элементе-контейнере

Помимо возможности применения анимации к отдельным элементам, вы можете применить анимацию к каждому элементу View, содержащему в элементе-контейнере (например, TableLayout и к каждому элементу TableRow), используя класс LayoutAnimationController.

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


Animation spinin = AnimationUtils.loadAnimation(this, R.anim.custom_anim);
LayoutAnimationController controller = new LayoutAnimationController(spinin);
TableLayout table = (TableLayout)findViewById(R.id.TableLayout01);
for (int i = 0; i < table.getChildCount(); i++){
	TableRow row = (TableRow)table.getChildAt(i);
	row.setLayoutAnimation(controller);
}

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

Если после второй строчки вставить метод setOrder(), то анимация пар картинок будет происходить в случайном порядке:


controller.setOrder(2);

Скачать исходный код

Примеры

Анимация при загрузке списка

Реклама