Анимация переходов android что это

Анимация в Android: переходы, ч. 1

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

Автор статьи: Андрей Ващенко, разработчик BytePace.

Анимация с помощью Transition представляет собой изменение свойств объекта (View), исходя из местоположения объекта на экране и примененного эффекта. С момента появления Transition в Android (с выхода версии 4.4 KitKat), появилось понятие сцены (Scene), и переход между двумя сценами это и есть Transition. Грубо говоря, чтобы сделать анимацию, нужна начальная сцена и конечная сцена. Например, чтобы сделать анимированное увеличение какого-либо объекта, можно сделать 1 лэйаут, затем скопировать его, и у копии сделать размер элемента больше. В итоге можем получить что-то подобное:

Анимация фрагментов

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

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

Разметка для активности:

Создадим разметки для фрагментов.

fragment1.xml

fragment2.xml

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

Фрагмент должен иметь свой класс. Для примера достаточно простейшего кода, где нужно указать разметку фрагмента.

Fragment1.java

 package ru.alexanderklimov.fragmentsanimation; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Fragment1 extends Fragment < @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) < return inflater.inflate(R.layout.fragment1, null); >> 

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

Теперь перейдём к коду для главной активности:

 package ru.alexanderklimov.fragmentsanimation; import android.os.Bundle; import android.app.Activity; import android.app.Fragment; import android.app.FragmentTransaction; import android.view.Menu; import android.view.View; public class MainActivity extends Activity < private Fragment fragment1; private Fragment fragment2; private FragmentTransaction transaction; @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); fragment1 = new Fragment1(); fragment2 = new Fragment2(); transaction = getFragmentManager().beginTransaction(); // transaction.setCustomAnimations(R.animator.slide_in_left, R.animator.slide_in_right); transaction.replace(R.id.fragment, fragment1); transaction.addToBackStack(null); transaction.commit(); >public void onClick(View v)< transaction = getFragmentManager().beginTransaction(); // transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN); // transaction.setCustomAnimations(R.animator.slide_in_left, R.animator.slide_in_right); if(fragment1.isVisible())< transaction.replace(R.id.fragment, fragment2); >else < transaction.replace(R.id.fragment, fragment1); >transaction.commit(); > > 

В коде я закомментировал две строчки для анимации. В таком виде переключение между фрагментами происходит стандартным способом без анимации. Теперь раскомментируйте первую строчку transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);. В классе FragmentTransaction есть несколько готовых анимаций. С помощью метода setTransition(int transit) мы можем указать нужную анимацию и увидеть её в действии.

• TRANSIT_FRAGMENT_CLOSE
• TRANSIT_FRAGMENT_OPEN
• TRANSIT_FRAGMENT_FADE
• TRANSIT_NONE

Снова закомментируйте строку и раскомментируйте вторую строку transaction.setCustomAnimations(R.animator.slide_in_left, R.animator.slide_in_right);. Метод setCustomAnimations() позволяет указать собственную анимацию. Методу передаются два параметра. Первый параметр описывает анимацию для фрагмента, который появляется, а второй — описывает анимацию для фрагмента, который убирается с экрана устройства. Метод следует вызывать до появления фрагментов, иначе анимация не будет применена.

С методом setCustomAnimations() нужно быть осторожным при работе с фрагментами из support-библиотеки. В одной из версий библиотеки разработчики из Гугла всё поломали и код перестал работать. Неизвестно когда починят. Поэтому используйте стандартные фрагменты.

Для анимации нужно создать XML-файлы в папке res/animator (её тоже нужно создать вручную).

slide_in_left.xml

slide_in_right.xml

Элементы визуальных эффектов задаются в теге objectAnimator. У атрибута propertyName указывается свойство фрагмента, которое мы будем изменять при анимации, valueType указывает тип изменяемого параметра. Атрибуты valueFrom и valueTo указывают диапазон изменения параметра, указанного в propertyName. Если параметр valueFrom не указан, то значение берётся равное текущему. В нашем случае valueFrom равен -1280, это означает, что движение фрагмента по оси y будет начинаться со значения -1280 и перемещение будет происходить пока значение y не станет равным 0 для верхнего левого угла нашего фрагмента в течении 1500 миллисекунд (атрибут duration).

Тег set служит для объединения эффектов либо их разделения. В файле slide_in_right.xml используется атрибут ordering со значением together, что означает проигрывать эффекты одновременно, в противовес ему существует значение sequentially, которое требует последовательного отображения эффектов в анимации.

Переворачиваем карту

Напишем ещё один пример для закрепления материала.

Найдите в интернете две картинки, например, изображения карты и её рубашки. Подготовим четыре файла в папке res/animator.

Как сделать более быструю анимацию переходов на Андроиде. Длительность анимации

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

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

Настройки разработчика

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

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

• Как включить режим разработчика на телефоне Андроид
• Как включить режим разработчика на Xiaomi MIUI 12
• Включение режима разработчика на Самсунг

На устройствах Samsung и Huawei (Honor) инструкция может незначительно отличаться.

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

Как изменить скорость анимации окон и переходов

Включили настройки разработчика? Тогда продолжим. Если не включили, то как это сделать читайте на несколько абзацев выше.

Заходим в настройки разработчика и листаем до раздела Отрисовка.

Нужные нам пункты находятся здесь — это:

• Анимация окон
• Анимация переходов
• Длительность анимации

Анимация окон, означает анимацию открытия и закрытия окон. Анимация переходов — скорость анимации переходов в приложении между окнами. Длительность анимации — анимация в рамках одного окна.

По умолчанию, напротив всех пунктов стоит анимация х1. Это означает, что скорость будет не одну секунду, а будет стандартной. Данное число — это множитель скорости анимации. В некоторых оболочках х1 может быть и 400 миллисекунд и 600. х1 просто означает, что скорость анимации стандартная.

Если нажать на один из пунктов, то появится окошко с выбором скорости. Всего пунктов 7 это:

• Без анимации
• Анимация 0.5х
• Анимация 1.0х
• Анимация 1.5х
• Анимация 2.0х
• Анимация 5.0х
• Анимация 10.0х

Если выбрать Без анимации, то анимации для выбранного пункта раздела не будет. Если вы хотите сделать анимацию более быстрой, то нужно выбрать Анимация 0.5х. 0.5х — означает, что скорость анимации будет в 2 раза быстрее стандартной. Это то что нам и нужно, а остальные пункты скорости нас не интересуют, потому что они делают скорость анимации более длительной. Если вам нужна скорость открытия окон или длительность более медленная, то выбирайте любое значение после 1x.

Для более быстрой анимации, устанавливаем все пункты на скорость 0.5х.

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

Таким вот нехитрым способом, можно установить скорость и длительность анимации на любом Андроид телефоне.

Анимация переходов между двумя фрагментами

Одним из краеугольных камней в Material design являются осмысленные движения между экранами. Lollipop предоставляет поддержку этих анимаций в форме фреймворка переходов между Activity и Fragment. Поскольку статей по данной теме не так много, я решил написать свою собственную!

Наш конечный продукт будет достаточно прост. Мы будем делать приложение-галерею с котиками. При нажатии на изображение будет открываться экран с подробностями. Благодаря фреймворку переход из сетки изображений в окно с подробностями будет сопровождаться анимацией.

Если вы желаете увидеть, что получилось — готовое приложение находится на GitHub.

Поддержка предыдущих версий Android?

У меня есть для вас две новости: хорошая и плохая. Плохая новость заключается в том, что до Lollipop данный фреймворк не работает. Не смотря на это, проблема решается методами библиотеки поддержки с помощью которой вы можете реализовать анимированые переходы доступные в API 21+.

В статье будут использоваться функции из библиотеки поддержки для обеспечения перемещения контента.

Имена переходов

Для ассоциации View на первом экране и его двойника на втором нужна связь. Lollipop предлагает использовать свойство “transition name” для связи View между собой.

Существует два способа добавления имени перехода (transition name) для ваших View:

• В коде можно использовать ViewCompat.setTransitionName() . Конечно, вы так же можете просто вызвать setTransitionName() , если поддержка начинается с Lollipop.
• Для добавления в XML, используйте атрибут android:transitionName .

Настройка FragmentTransaction

Настройка FragmentTransactions должна быть вам очень знакомой:

getSupportFragmentManager() .beginTransaction() .addSharedElement(sharedElement, transitionName) .replace(R.id.container, newFragment) .addToBackStack(null) .commit(); 

Чтобы указать какую View будем передавать между фрагментами — используем метод addSharedElement() .

Переданная View в addSharedElement() это View из первого фрагмента, которую вы хотите разделить (share) со вторым фрагментом. Имя перехода тут является именем перехода в разделенной (shared) View во втором фрагменте.

Настройка анимации перехода

Наконец-то пришел момент, когда мы зададим анимацию перехода между фрагментами.

Для shared элементов:

• Для перехода с первого фрагмента во второй используем метод setSharedElementEnterTransition() .
• Для возврата назад используем метод setSharedElementReturnTransition() . Анимация произойдет при нажатии кнопки назад.

Вы так же можете анимировать переходы для всех non-shared View. Для этих View, используйте setEnterTransition() , setExitTransition() , setReturnTransition() , и setReenterTransition() в соответствующих фрагментах.

Каждый из этих методов принимает один параметр Transition предназначенный для выполнения анимации.

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

Классы анимации перехода

Android предоставляет некоторые готовые анимации переходов, что подходят для большинства случаев. Fade выполняет анимацию исчезновения. Slide анимирует переход появления/исчезновения скольжением из угла экрана. Explode анимация подобная взрыву, изображение движется от краев экрана. И наконец, AutoTransition заставит изображение исчезать, двигаться и изменять размер. Это лишь некоторые примеры из пакета перемещений, их на самом деле намного больше!

Я упоминал, что нам понадобится кастомный переход для нашего изображения. Вот он:

public class DetailsTransition extends TransitionSet < public DetailsTransition() < setOrdering(ORDERING_TOGETHER); addTransition(new ChangeBounds()). addTransition(new ChangeTransform()). addTransition(new ChangeImageTransform())); >> 

Наш кастомный переход есть ни что иное как набор из трех готовых переходов собранных вместе:

• ChangeBounds
  анимирует границы (положение и размер) нашей view.
• ChangeTransform
  анимирует масштаб view, включая родителя.
• ChangeImageTransform
  позволяет нам изменять размер (и/или тип масштаба) нашего изображения

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

Все вместе

Код который в итоге у нас получился оказался достаточно простым:

DetailsFragment details = DetailsFragment.newInstance(); // Note that we need the API version check here because the actual transition classes (e.g. Fade) // are not in the support library and are only available in API 21+. The methods we are calling on the Fragment // ARE available in the support library (though they don't do anything on API < 21) if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) < details.setSharedElementEnterTransition(new DetailsTransition()); details.setEnterTransition(new Fade()); setExitTransition(new Fade()); details.setSharedElementReturnTransition(new DetailsTransition()); >getActivity().getSupportFragmentManager() .beginTransaction() .addSharedElement(holder.image, "sharedImage") .replace(R.id.container, details) .addToBackStack(null) .commit(); 

Вот и все! Простой способ реализации анимации переходов между двумя фрагментами готов!

• Android
• Fragment transitions

• Разработка мобильных приложений
• Разработка под Android