Android Transition - плавные переходы на Android

Анимация плавных
переходов на Android
Артем Шевченко
Киев 2018
https://github.com/shevart/AndroidTransitions
shevartsoft@gmail.com

Пример плавного перехода

Transition API и разработчик

План доклада:
Зачем
нужна
анимация?
Scene
Transition’s
TransitionManager
Анимация переходов
Activity
Fragments
Разбор
кейсов и
проблем

теория
Или причины зачем разработчику напрягаться?

Причина №1
Это красиво!

Причина №2
Дизайнерское исследование

Маша
Эксперт
🧠Мозг
🏄Транзишены
💊Транзишены
$Не навреди

🧠
Мозг:
Любит упрощать (оптимизировать)
Искать взаимосвязь

Транзишены:
Простота и однозначность
Правильная физика 🏄

Транзишены:
Обратная связь
Понимание происходящего 💊Развлечение

Не навреди
Нет лагам
Нет усложнению
Не мешает работе с приложением
$

Идем дальше
Зачем
нужна
анимация?
Scene
Transition’s
TransitionManager
Activity
Fragments
Разбор
кейсов и
проблем

Scene - основные понятия
Не с документации! :)

sceneRoot
Scene - основа
ViewGroup
Где делаем изменения?
Холст для Scene
Обязательное поле

contentView
Какие делаем изменения?
Что рисуем на холсте?
Необязательное поле
Это абстракция

contentView
Это может быть:
View
xml

Разметка
Ничего
Ну

почти ничего

Enter/Exit-Actions
Callback’s для enter() и exit()
Можем здесь сделать изменения в sceneRoot
Необязательны
Можем изменять contentView только здесь
Runnable

Применение Scene
Это вызов метода enter()
Изменение contentView внутри sceneRoot

Выход/Отмена Scene
Это вызов метода exit()
Под капотом - вызов Exit Action
* Бонус - вызывается автоматически

Scene - еще чуток
теории

Scene - о методе enter()
public void enter() {
if (mLayoutId > 0 || mLayout != null) {
getSceneRoot().removeAllViews();
if (mLayoutId > 0) {
LayoutInflater.from(mContext).inflate(mLayoutId, mSceneRoot);
} else {
mSceneRoot.addView(mLayout);
}
}
if (mEnterAction != null) {
mEnterAction.run();
}
setCurrentScene(mSceneRoot, this);
}
О методе enter() подробнее

} else {
}
}
mEnterAction.run();
}
}
Приоритет для ContentView
* mLayout - это View для contentView

} else {
}
}
mEnterAction.run();
}
}
Битые ссылки

} else {
}
}
mEnterAction.run();
}
}
Enter Action

} else {
}
}
mEnterAction.run();
}
}
Что такое setCurrentScene?

Что такое setCurrentScene?
static void setCurrentScene(View view, Scene scene) {
view.setTagInternal(com.android.internal.R.id.current_scene, scene);
}
Зачем?
Scene previousScene = Scene.getCurrentScene(sceneRoot);
if (previousScene != null) {
previousScene.exit();
}
TransitionManager

Пример
Картинка + Текст

Сделаем при помощи Scene

Scene
sceneRoot
<android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="320dp"
app:cardCornerRadius="4dp"
app:cardElevation=«1.5dp"/>

Scene
contentView - в XML
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/contentView"
android:layout_height="match_parent">
<ImageView
android:id="@+id/ivSea"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="@drawable/sea" />
<TextView
android:id="@+id/tvSea"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|bottom"
android:text="@string/sea"
android:textColor="@color/white"
android:layout_margin="16dp"
android:textSize="32sp" />
</FrameLayout>

Scene
contentView
ImageView
TextView

Scene
Применяем - код
val scene = Scene.getSceneForLayout(cardView,
R.layout.layout_scene_content,
context = this)
Создаем Scene
Применяем Scene
scene.enter()

Scene
Как это работает?
Scene A Scene B
Transition
Scene

Scene
TransitionManager
scene.enter()
Меняем
TransitionManager.go(scene)
На

Хм, это не та анимация!?

Scene
TransitionManager - анимация по умолчанию
Удобно - работает с коробки
Можно указать собственную анимацию

Давайте сделаем
свою анимацию!

Scene
Custom Transition для Scene
val imageFadeTransition = Fade().addTarget(R.id.ivSea)
val textSlideTransition = Slide().addTarget(R.id.tvSea)
val customAnimTransition = TransitionSet().apply {
duration = 1000L // 1 sec
addTransition(imageFadeTransition)
addTransition(textSlideTransition)
}
TransitionManager.go(scene, customAnimTransition)

Scene
Плавное появление для картинки
}

Scene
Текст приедет снизу
}

Scene
Создаем TransitionSet
}

Scene
Можно указать время
}

Scene
go() - уже с нашей анимацией
}

Что делает Transition?
Transition - основа
Scene A Scene B
View До View После
Transition
Анимирует переход

Принцип работы
Scene A Scene B
Сохраняем параметры SceneA
Сохраняем параметры SceneB
Только «свои» параметры
Transition
Создание анимации изменения

2 главные задачи
Сохранение
параметров View в
SceneA и SceneB
Создание анимации
для
изменения View

Transition - теория
Как Transition сохраняет параметры
View?
void captureStartValues(@NonNull TransitionValues transitionValues)
void captureEndValues(@NonNull TransitionValues transitionValues)
А что такое TransitionValues?

Что такое TransitionValues?
public class TransitionValues {
/**
* The set of values tracked by transitions for this scene
*/
public final Map<String, Object> values = new HashMap<>(); // properties
//...
public View view; // view
}

TransitionValues - пример
Есть кнопка
100%
Alpha на SceneA
0%
Alpha на SceneB

void captureStartValues(@NonNull TransitionValues transitionValues) {
float alpha = transitionValues.view.getAlpha();
transitionValues.values.put("ButtonAlpha", alpha);// alpha = 1.0f
}
void captureEndValues(@NonNull TransitionValues transitionValues) {
transitionValues.values.put("ButtonAlpha", alpha);// alpha = 0.0f
}
Сохраняем параметры SceneA
Сохраняем параметры SceneB

void captureStartValues(@NonNull TransitionValues transitionValues) {
transitionValues.values.put("ButtonAlpha", alpha);
}

Transition - создание анимации
Transition.java
@Nullable
public Animator createAnimator(@NonNull ViewGroup sceneRoot,
@Nullable TransitionValues startValues,
@Nullable TransitionValues endValues) {
return null;
}

Transition - targets

Как Transition определяет какую View анимировать а какую нет?
Плавно появляется только картинка
Приезжает только текст

По умолчанию:
Targets - все View
Можно указывать
конкретные Target’s Удобно

Target-ом может быть:
TransitionName
ID - View
View
Class

Match order
public void setMatchOrder(@MatchOrder int... matches)
public static final int MATCH_INSTANCE
public static final int MATCH_NAME
public static final int MATCH_ID
public static final int MATCH_ITEM_ID
- View
- transition name
- View ID
- Item view ID - для android.widget.Adapter

Как добавить target:
<changeBounds>
<targets>
<target android:targetId="@+id/ivSmallAvatar" />
</targets>
</changeBounds>
Код
val changeBounds = ChangeBounds()
changeBounds.addTarget(R.id.ivBigAvatar)
XML

Как удалить target:
changeBounds.excludeTarget(R.id.ivBigAvatar, exclude = false)
Код
if (exclude) {
list = ArrayListManager.add(list, target);
} else {
list = ArrayListManager.remove(list, target);
}
Transition.java

Неочевидно!
if (exclude) {
list = ArrayListManager.add(list, target);
} else {
list = ArrayListManager.remove(list, target);
}
Transition.java
Роберт Мартин
exclude (исключить) == true -> add?

Как удалить target:
changeBounds.removeTarget(R.id.ivBigAvatar)
Код

Резюме Target’s
Точная настройка
анимации
Экономия
времени на поиск
совпадений

Базовые параметры анимации
Задержка Продолжительность Интерполятор

Задержка анимации
val transition = Fade()
transition.startDelay = 200L
Код
XML
<fade android:startDelay="2000"/>

Продолжительность анимации
transition.duration = 200L
Код
XML
<fade android:duration="2000"/>

Interpolator для анимации
transition.interpolator = BounceInterpolator()
Код
XML
<fade android:interpolator="@android:interpolator/bounce"/>

Есть еще «приятность»!

За ходом анимации можно следить!

TransitionListener
public interface TransitionListener {
void onTransitionStart(@NonNull Transition transition);
void onTransitionEnd(@NonNull Transition transition);
void onTransitionCancel(@NonNull Transition transition);
void onTransitionPause(@NonNull Transition transition);
void onTransitionResume(@NonNull Transition transition);
}

Базовый набор Transition’s

Transition - базовый набор
Fade Slide Explode ChangeBounds
ChangeTransform
ArcMotion* PatternPathMotion*
ChangeImageTransform ChangeClipTransform ChangeScroll AutoTransition TransitionSet
*Это не совсем Transition

Fade
Код
Плавно показывает или скрывает View
Fade()

Slide
Плавно перемещает View за пределы экрана
Плавно перемещает View на экран
Направление движения устанавливает
Gravity
Код
Slide()

Explode
Двигает View в сторону от центра или
указанного эпицентра
Код
Explode()

Explode - пример

Explode
Есть набор View для Explode
Все они одинаковые
Эпицентром будет верхний левый квадрат

Explode - эпицентр
fun createEpicenterCallback(): Transition.EpicenterCallback {
var rect: Rect? = null
val centralView = yourView
if (centralView != null) {
rect = Rect()
centralView.getGlobalVisibleRect(rect)
}
return object : Transition.EpicenterCallback() {
override fun onGetEpicenter(transition: Transition) = rect
}
}
Нужно создать EpicenterCallback

rect = Rect()
}
}
}
EpicenterCallback возвращает Rect с координатами эпицентра

rect = Rect()
}
}
}
Мы можем взять Rect у нашей View

Explode
val explode = Explode()
explode.epicenterCallback = createEpicenterCallback()
Создаем Explode с EpicenterCallback

Explode

Что-то пошло не так…

Explode
Добавляем Targets:
val transitionSet = Explode().apply {
addTarget(R.id.frameLayout)
addTarget(R.id.frameLayout2)
}

Explode
Получилось!

Explode
Надо что-то улучшить!
}

Explode
val transitionSet = TransitionSet().apply {
addTransition(Explode().addTarget(FrameLayout::class.java))
}
}

ChangeBounds
Анимирует изменение местоположения View
Анимирует изменение размеров View
Код
ChangeBounds()

ArcMotion
Делает перемещение View по окружности
Работает в связке с ChangeBounds
Код
ChangeBounds().apply {
setPathMotion(ArcMotion())
}
Настройка угла окружности

PatternPathMotion
Перемещение View по кастомному пути
Работает в связке с ChangeBounds

PatternPathMotion
Код
val path = createPath()
return ChangeBounds().apply {
setPathMotion(PatternPathMotion(path))
}
private fun createPath() = Path().apply {
moveTo(0f,0f)
quadTo(0f,0f, 1f, 0.0f)
quadTo(1f,0.0f, 0.3f, 0.6f)
quadTo(0.3f,0.6f, 1f, 1f)
}

PatternPathMotion
Код
val path = createPath()
return ChangeBounds().apply {
setPathMotion(PatternPathMotion(path))
}
private fun createPath() = Path().apply {
moveTo(0f,0f)
quadTo(0f,0f, 1f, 0.0f)
quadTo(1f,0.0f, 0.3f, 0.6f)
quadTo(0.3f,0.6f, 1f, 1f)
}
Указываем
свой
путь движения

Сравнение ChangeBounds/Arc/Pattern

ChangeClipBounds
Анимирует изменение clipBounds у View
Код
ChangeClipBounds()

ChangeImageTransform
Анимирует матричное изменение
внутри ImageView
Код
ChangeImageTransform() + ChangeBounds

ChangeTransform
Анимирует изменение размера View и
поворот
Код
ChangeTransform() +ChangeBounds

ChangeScroll
Анимирует изменение scrollX и scrollY
Код
ChangeScroll()

AutoTransition
Анимиция появления/исчезновения
Код
AutoTransition()
Анимиция размеров и местоположения
View
Fade + ChangeBounds

TransitionSet
Позволяет группировать Transitions вместе
Код
TransitionSet()
Сам по себе не создает анимацию

TransitionSet
XML
<?xml version="1.0" encoding="utf-8"?>
<transitionSet>
<changeBounds/>
// …
</transitionSet>

TransitionSet
Порядок проигрывания анимации
public static final int ORDERING_TOGETHER = 0;
public static final int ORDERING_SEQUENTIAL = 1;
public TransitionSet setOrdering(int ordering)

TransitionManager
Обзор
TransitionManager
Transition Scene

TransitionManager
Основные методы
setTransition() - сохраняет пару Scene-Transition
transitionTo() - применяет Scene с указанными или по умолчанию Transition-ом
endTransition() - останавливет все текущие и отложенные Transition’s для View
static go() - применяет Scene + Transition (default или custom)
static beginDelayedTransition() - применяет Scene + Transition (default или custom)

TransitionManager
beginDelayedTransition

flTestContent.visibility = View.INVISIBLE
val transition = AutoTransition()
transition.doOnEnd { showWithAlpha() }
TransitionManager.beginDelayedTransition(cardView, transition)
flTestContent.setHeight(height = 500) // your height
TransitionManager
Как это сделать просто

TransitionManager
Скрываем содержимое cardView

TransitionManager
Создаем наш Transition

TransitionManager
Что делает showWithAlpha?
private fun showWithAlpha() {
TransitionManager.beginDelayedTransition(cardView)
flTestContent.visibility = View.VISIBLE
}

TransitionManager
Готовимся анимировать изменения

TransitionManager
Это действительно просто
Делаем изменения

Scene
Transition’s
TransitionManager
Activity
Fragments
Разбор
кейсов и
проблем

TransitionПереходы
между экранами

Transitions между экранами

2 вида анимаций
Content transitions
или
Анимация содержимого
Shared elements 
или
Общие элементы

Content Transitions
Анимация содержимого

Итак, у нас есть…
Screen B
Screen A
2 экрана
4Анимации

4 анимации
Screen BScreen A
ScreenA - уходит - Exit Transition
ScreenB - появляеться - Enter Transition
Переход ScreenA - ScreenB
Возвращаемся ScreenB - ScreenA
ScreenA - снова приходит - Reenter Transition
ScreenB - закрывается - Return Transition

4 анимации - в профиль
Screen BScreen A
С ScreenA
открыли ScreenB
Exit Transition Enter Transition
Screen B Screen A
Закрыли ScreenB
вернулись на ScreenA
Return Transition Reenter Transition

Плюсы Content transitions
Transitions Targets Каждую View
можно
анимировать отдельно

Content transitions - Activity
Два пути
class FirstContentProgrammaticallyActivity : AbsActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// set content transitions
setContentTransition()
setContentView(R.layout.activity_first_content_programmatically)
initToolbar()
val adapter = MockSimpleItemAdapter()
adapter.updateItems(nextSimpleItemsList())
adapter.setOnItemClickListener(this::onItemSelected)
rvPCScreenA.adapter = adapter
rvPCScreenA.layoutManager = LinearLayoutManager(this)
}
private fun setContentTransition() {
window.apply {
requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
exitTransition = Explode()
}
}
private fun initToolbar() {
enableToolbarBackButton()
setTitle(R.string.activity_content_programmatically)
}
private fun onItemSelected(item: SimpleItem) {
val intent = Intent(this, SecondContentProgrammaticallyActivity::class.java)
intent.putExtra(SIMPLE_ITEM, item)
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle())
}
}
Код XML - Theme

Theme
<style name="ContentTransitionAppTheme" parent="Theme.AppCompat.Light">

<item name="android:windowContentTransitions">true</item>

<item name="android:windowEnterTransition">@transition/slide</item>
<item name="android:windowExitTransition">@transition/slide</item>
<item name="android:windowReturnTransition">@transition/slide</item>
<item name="android:windowReenterTransition">@transition/slide</item>
</style>
Создаем тему для Activity

Theme
</style>
Включаем transitions

Theme
</style>
Указываем 4 анимации

Результат

Что-то оно не очень…

Slide vs AutoTransition

Код
ActivityA
setContentView(R.layout.activity_a)
// ...
}

Код
ActivityA - перед вызовом setContentView
setContentView(R.layout.activity_a)
// ...
}

Код
ActivityA - запроси фичу, укажи transition
window.apply {
exitTransition = Explode()
// set other transitions
}
}

Код
ActivityB - аналогично
window.apply {
enterTransition = Fade()
}
}

Код
Запуск ActivityB - важный момент
startActivity(intent)startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

Content transitions - Fragments
Только код! ;)
fun openScreenB() {
val fragment = FragmentB()
fragment.enterTransition = // your transition
fragment.returnTransition = // your transition
supportFragmentManager
.beginTransaction()
.replace(R.id.flContainer, fragment)
.addToBackStack(fragment::class.java.simpleName)
.commit()
}

Content transitions - Fragments
Transitions для FragmentA
val fragment = FragmentA()
fragment.exitTransition = // transition
fragment.reenterTransition = // transition
Бонус
Перед каждой транзакцией можно менять transitions!

С фрагментами удобно

Shared Elements
Общие элементы

Shared Elements - теория
Почти тоже самое
Screen B
Screen A
2 экрана
2
Анимации
у Fragments
1
Target
4
Анимации
у Activity

4 анимации - Activity
ScreenA - уходит - Shared Elements Exit Transition
ScreenB - появляеться - Shared Elements Enter Transition
Возвращаемся ScreenB - ScreenA
ScreenA - снова приходит - Shared Elements Reenter Transition
ScreenB - закрывается - Shared Elements Return Transition

4 анимации - Activity
ScreenB - появляеться - Shared Elements Enter Transition
Достаточно указать одну:

2 анимации - Fragments
SharedElementsEnterTransition - при открытии фрагмента
SharedElementsReturnTransition - при удалении (pop) фрагмента из стека

2 анимации - Fragments
SharedElementsEnterTransition - FragmentB
Можно указать только 1

1 target
TransitionName

Shared Elements - Activity
Activity - Тема
<style name="SharedElementsTheme" parent="Theme.AppCompat.Light">
<item name="android:windowActivityTransitions">true</item>
<item name=«android:windowSharedElementEnterTransition">
@android:transition/move
</item>
</style>
ActivityB

Activity - Код
ActivityB
private fun sharedElementsInit() {
window.apply {
requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
sharedElementEnterTransition = ChangeBounds()
}
}
sharedElementsInit() // перед setContentView
setContentView(R.layout.activity_b)
// ...
}

Запуск ActivityB
В ActivityА
val intent = Intent(this, ActivityB::class.java)
val activityOptions = ActivityOptionsCompat
.makeSceneTransitionAnimation(this, view, view.transitionName)
startActivity(intent, activityOptions.toBundle())

Готовим ActivityB
В ActivityB
yourView.transitionName = «transitionName» // your transitionName

Shared Elements - Fragments
Fragment
В транзакции
.beginTransaction()
.replace(R.id.flFragmentsContainer, FragmentB())
.addToBackStack(TAG)
.addSharedElement(view, view.transitionName)
.commit()

Fragment
Добавляем sharedElement
.beginTransaction()
.commit()

Fragment
Вернутся красиво
.beginTransaction()
.commit()

FragmentB
Понадобится Transition
sharedElementEnterTransition = TransitionInflater
.from(context)
.inflateTransition(android.R.transition.move)
}

Activity
Fragments
Разбор
кейсов и
проблем

Дополнение
Transitions + AsyncWorld =
postponeEnterTransition()
viewWithLongLoading.doOnPreDraw {
startPostponedEnterTransition()
}

Дополнение
Почему не работают sharedElements?
TransitionName - либо не указано либо дубликаты
View measure - View еще не знает свои размеры/положение
SharedElementsEnterTransition - null/не тот Transition
Keyboard - сначала закрой потом анимируй
SharedElementsReturnTransition - null - не сработает переход обратно

Android Transition - плавные переходы на Android

Recommended

Recommended

More Related Content

Similar to Android Transition - плавные переходы на Android

Similar to Android Transition - плавные переходы на Android (20)

Android Transition - плавные переходы на Android