Android анимация для всех activity

Метод overridePendingTransition() — анимации между активностями

Анимация при старте активности

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

Создадим файл анимации rotate.xml в папке res/anim/:

Добавим в активность два ImageView:

Нам нужно запустить анимацию в методе onCreate() или в onResume():

Метод overridePendingTransition()

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

У класса Activity есть метод overridePendingTransition() и он должен идти сразу после вызова метода startActivity() или finish(). Метод принимает два параметра: ресурс анимации для запускающей активности и ресурс анимации для уходящей активности.

Таким образом вам нужно создать в папке res/anim два файла анимации и передать их идентификаторы в метод.

Предположим, первый файл будет diagonaltranslate.xml:

Второй файл — alpha.xml:

В одном из старых проектов я нашёл метод startActivity() и применил этот способ:

Запускаем проект и переходим на другую активность. Новая активность будет расти из нижнего правого угла по диагонали, а текущая активность будет становиться прозрачной. Тут всё зависит от вашей фантазии, придумайте собственные сценарии анимации. Для примера я использовал достаточно большие значения duration, на самом деле не стоит увлекаться и старайтесь указывать короткие интервалы.

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

res/anim/left_out.xml

res/anim/right_in.xml

res/anim/top_out.xml

res/anim/bottom_in.xml

Анимация при помощи XML

Кстати, есть способ использовать анимацию без единой строчки Java-кода, только XML.

Создайте в папке res/anim четыре файла:

activity_down_up_enter.xml

activity_down_up_exit.xml

activity_down_up_close_enter.xml

activity_down_up_close_exit.xml

Теперь пропишем стили на основе наших файлов.

res/values/styles.xml

Создадим файл для темы.

res/values/themes.xml

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

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

Рекомендую вживую посмотреть на эффекты, вам понравится.

Источник

Кастомизация переходных анимаций между Activity в ОС Android

Добрый день! В этой статье мы будем рассматривать процесс создания кастомных анимаций переходов между Activity в Android при помощи ObjectAnimator и AnimatorSet. Всем, кому это интересно — добро пожаловать под кат.

PS: статья написана в основном для начинающих разработчиков.

Весь исходный код доступен на GitHub

Мы рассмотрим 2 вида переходных анимаций:

• анимируем старую Activity на фоне новой
• анимируем новую Activity на фоне старой

Для демонстрации были выбраны 2 типа анимации: одновременная анимация нескольких объектов (створки двери) и последовательная анимация нескольких объектов (сворачивание листа бумаги)

Анимация старой Activity

Итак, создадим 3 Activity: FirstActivity, SecondActivity и ThirdActivity.

Функция getBitmap возвращает Bitmap текущего окна. При клике по основному элементу Activity создаем новый Intent, и в качестве Extra задаем наш Bitmap, преобразованный в байтовый массив. После чего запускаем SecondActivity.

В качестве главного элемента нашей Activity мы задаем FrameLayout, который содержит в себе 2 LinearLayout. В первом размещается весь необходимый контент(в нашем случае это TextView). Во втором находятся 2 ImageView, которые делят экран пополам. Онb необходимы нам для анимации.

Для анимации нам необходимо предпринять следующие шаги:

1. Создать Bitmap из байтового массива, переданного из первыой Activity
2. Разделить Bitmap на 2 части и загрузить их в соответствующий ImageView
3. При помощи AnimatorSet одновременно воспроизвести анимацию поворота обоих ImageView

В функции onCreate мы получаем Bitmap из Extras, делим его на 2 Bitmap при помощи Bitmap.createBitmap() и устанавливаем полученные изображения в ImageView. После этого регистрируем Observer, который будет следить за onDraw событием ImageView и вызываться только один раз перед первой отрисовкой объекта. В нем мы запускаем анимацию открытия Activity.

Непосредственно сама анимация описана в функции startEnterAnimation(). При помощи функций setPivotX() и setPivotY() мы устанавливаем точки, вокруг которых будут вращаться наши изображения. Далее мы задаем сами анимации вращения при помощи объекта ObjectAnimator.
ObjectAnimator — компонент системы, появившийся с Android 3.0. Он помогает анимировать какое-либо свойство любого объекта. В данном случае, мы анимируем свойство rotationX типа float объекта left.
Далее, мы создаем набор анимаций AnimatorSet, задаем длительность анимации в 500 мс и говорим ему, что будем одновременно проигрывать 2 анимации.
Анимация закрытия Activity задается аналогично. Для ее запуска мы переопределяем функцию Activity onBackPressed(). В ней мы запускаем анимацию закрытия, не забыв добавить listener с функцией finish().

Анимация новой Activity

Для того, чтобы анимировать новую Activity на фоне старой, нам не нужно ничего передавать в новую Activity. Нужно просто сделать фон ACtivity прозрачным. Для этого мы изменяем в файле AndroidManifest тему ThirdActivity на Transparent, и добавляем эту тему в styles.xml

Сам процесс анимации будет заключаться в следующем:

• при помощи наблюдателя OnPreDrawListener и функции getBitmap мы получаем Bitmap нашего Layout, после чего делаем его невидимым и запускаем анимацию открытия Activity
• делим полученный Bitmap на 4 части, устанавливаем каждую часть в соответствующий Bitmap, после чего делаем невидимыми все изображения кроме начального
• анимация открытия будет похожа на предыдущую, за исключением того, что после окончания анимации каждого куска изображения нам необходимо сделать видимым следующий кусок изображения
• ну и в конце всей анимации мы делаем видимым Layout с контентов этой Activity, а изображения скрываем

Вся анимация запускается при помощи все того-же AnimatorSet, только задаются они при помощи функции playSequentially. Это означает, что все анимации будут запускаться последовательно друг за другом.

Анимация закрытия Activity делается аналогично, только в обратном порядке.

Заключение

Мы рассмотрели 2 способа создания переходной анимации между Activity. Весь код в статье адаптирован под версию системы выше 3.0, однако его легко можно адаптировать и под более ранние версии, начиная с 1.6, при помощи библиотеки NineOldAndroids от всем известного Jake Wharton’а. Единственное, о чем хотелось бы заострить внимание — это на установке относительных точек для поворота и увеличения. В этой библиотеке они устанавливаются при помощи объекта AnimatorProxy.

На этом все, если понравится эта статья — продолжу публикации на тему создания анимаций в ОС Android.

Источник

Создание анимаций переходов между Activity в Android

Начиная с Android 4.4 в арсенале разработчиков появился дополнительный инструмент для создания анимаций — Transitions Framework. Изначально он предназначался для создания анимаций изменения состояния приложения путём манипулирования несколькими View. С выходом Android 5.0 набор доступных для использования анимаций был расширен, чтобы соответствовать представленной тогда же концепции Material Design.

Transitions Framework позволяет быстро и безболезненно создавать различные анимации. Поэтому в процессе работы над iFunny было невозможно пройти мимо этого инструментария. Вниманию читателей предлагается частный случай использования Transitions API — создание анимации перехода между Activity с эффектом «бесшовности».

С визуальной точки зрения представленные в Transitions Framework анимации переходов между Activity можно условно разделить на два типа: обычные анимации и анимации с общим элементом. Концепт анимации с общим элементом продемонстрирован на честно украденном с сайта developer.android.com рис. 1. На нём в роли общих элементов выступают аватар и имя контакта.

Рис. 1. Анимация перехода между Activity с общими элементами

Но никто не любит длинные вступления, поэтому сразу перейдём к рассказу о том, как создавались анимации данного типа в приложении iFunny. В качестве первого примера рассмотрим анимацию, показанную на рис. 2. Для её использования нам потребуется Android версии 5.0 и выше.

Рис. 2. Анимация перехода между Activity на экране аутентификации пользователя

С точки зрения пользователя, здесь нет ничего необычного: один экран, простенькая анимация. Но, как вы уже могли догадаться, «под капотом» — переход между двумя экранами с одним общим элементом.

Первым шагом к созданию подобного перехода является, как ни странно, выбор этого самого элемента и определение его местоположения в вёрстке обеих Activity. После этого в описание каждого View, отображающего выбранный элемент, нужно добавить атрибут android:transitionName, а также назначить им android:id, если таковой отсутствует.

В нашем случае это обычные ImageView следующего вида:

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

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

Примечание. Под «второй» подразумевается запускаемая Activity, переход к которой должен быть осуществлён, а под «первой» — запускающая Activity.

Делается это следующим образом:

В приведённом листинге:

• R.id.auth_logo — ImageView из первой Activity, используемый в анимации;
• activity — первая Activity;
• R.string.email_auth_transition — метка, ранее оставленная в вёрстке обоих ImageView;
• SecondActivity.class — вторая Activity.

И сейчас внимательный читатель может испытать недоумение: во вступлении речь шла об использовании API level 19, в примере фигурировал API level 21, а в листинге выше стоит ограничение на API level 22. К сожалению, при написании кода выяснилось, что анимации перехода с общим элементом могут вести себя некорректно на телефонах c API level 21. Проявляется это в виде подтормаживаний анимации в целом и артефактов на анимируемом View в частности. Если вы уже знакомы с темой, знаете причины подобного поведения и/или способы решения описанной проблемы — расскажите нам об этом в комментариях.

На третьем шаге необходимо описать анимацию перехода, т.е. указать путь, проходимый анимируемым View, и трансформацию самого View. Для этого создадим отдельный файл projectName/src/main/res/transitions/email_auth_transition.xml со следующим содержимым:

Немного теории. Тег transitionSet предназначен для описания сразу нескольких трансформаций, применяемых к анимируемому View. Параметр transitionOrdering отвечает за порядок применения этих трансформаций. В нашем случае они применяются одновременно. Существует несколько типов готовых трансформаций, представленных в Transitions Framework. С полным списком можно ознакомиться на этой странице. Мы же остановимся на двух конкретных: changeBounds и changeImageTransform.

Первая предназначена для трансформации размера View. Вторая работает только с ImageView и в связке с первой позволяет изменять не только размер, но и форму ImageView. Использовав данные трансформации, получаем на выходе анимацию изменения размера изображения, представленную на рис. 2. Если не указывать тип движения анимируемого View, то он будет двигаться по кратчайшему пути. Более интересный способ передвижения рассмотрим во втором примере.

Последним шагом создания анимации является её объявление в темах обеих Activity. Для этого отредактируем описание тем следующим образом (или создадим новые в папке projectName/src/main/res/values-v22/theme.xml):

• android:windowActivityTransitions разрешает выполнение анимации перехода;
• android:windowSharedElementEnterTransition указывает на файл с описанием анимации перехода от первой Activity ко второй;
• android:windowSharedElementExitTransition указывает на файл с описанием анимации перехода при возвращении из второй Activity в первую.

Следует отметить, что для версий ОС ниже 5.1 необходимо создать темы с идентичными стилями, чтобы избежать вполне ожидаемых последствий в виде падения приложения. Например, поместим их в файл projectName/src/main/res/values/theme.xml:

Итак, для создания анимации перехода от Activity к Activity необходимо:

1. Описать анимации (в нашем случае в xml-файле);
2. Добавить эти анимации в xml-описание темы Activity;
3. Пометить анимируемый общий элемент (View) в разметке;
4. При запуске второй Activity указать в параметрах запуска, что для неё необходимо задействовать анимацию перехода.

Как видите, создавать такие анимации совсем не трудно, если не считать некоторых ограничений, упомянутых в первом примере. Теперь рассмотрим второй, более сложный пример. Тут нас интересует переход из раздела комментариев к профилю пользователя (рис. 3).

Рис. 3. Анимация перехода из комментариев к профилю пользователя

Все шаги по созданию перехода, рассмотренные выше, также подходят для этой анимации. А вот трансформация общего элемента реализована немного иначе. В приведённом ниже листинге описано перемещение общего элемента «по дуге» вместе с изменением его размера.

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

Для решения первой можно было бы собственноручно закэшировать изображение на диск или же передать его адрес в параметре второй Activity. Однако решение данной проблемы переложили на используемую в приложении библиотеку для загрузки изображений — Glide. При загрузке изображения достаточно просто добавить параметр diskCacheStrategy(DiskCacheStrategy.SOURCE), и оно будет закэшировано самой библиотекой (актуально для Glide версии 3.x). Следовательно, при повторном обращении к данному ресурсу из второй Activity будет использоваться кэшированный файл, что поможет нам избежать моргания анимируемого ImageView.

Вторая проблема также решается достаточно просто. В то время как осуществляется анимация перехода, профиль пользователя вместе с аватаром в более высоком разрешении скачиваются из сети и ожидают её завершения. Как только выполняются оба условия (завершение анимации и завершение загрузки), аватар пользователя обновляется. Добиться такого поведения можно, если использовать специальный Listener, в котором реализованы колбэки, вызываемые при смене статуса анимации. Для этого во Fragment, который принадлежит второй Activity, зададим этот самый Listener:

Здесь происходит следующее:

1. С помощью getSharedElementEnterTransition().addListener() задаётся Listener для анимации появления Activity;
2. В методе setAvatar() производится попытка загрузки и установки аватара (который уже лежит в кэше).

Рассмотрим, как именно реализован Listener:

В методе onProfileUpdated() мы обновляем содержимое профиля, в т.ч. и аватар.

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

Рис. 4. Анимация возвращения из профиля в комментарии

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

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

Источник