Анимация ImageView между двумя действиями с использованием общих переходов элементов с помощью ChangeImageTransform

Я пытаюсь анимировать один ImageView на другую позицию между двумя действиями в Android API уровня 21. Поскольку "MoveImage" в Android L Preview был удален, я использую "ChangeImageTransform" вместо этого, но пример кода в документах не работает (два изображения анимируются отдельно).

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeImageTransform>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeImageTransform>
</transitionSet>

Есть ли какой-нибудь рабочий пример? Спасибо!

Ответ 1

Чтобы сделать анимацию перехода на экран между двумя действиями, которые имеют общий элемент, вы можете прочитать эту статью и выполнить следующие шаги:

  • Включить переходы содержимого окна в вашей теме.
  • Укажите общий переход элементов в вашем стиле.
  • Определите свой переход как ресурс XML.
  • Назначьте общее имя совместно используемым элементам в обоих макетах с атрибутом android: transitionName.
  • Используйте метод ActivityOptions.makeSceneTransitionAnimation().

О 3-м шаге, согласно документации :

В сочетании с ChangeBounds ChangeImageTransform позволяет ImageViews изменять размер, форму или ImageView.ScaleType для плавного анимации содержимого.

Res/transition/your_transition.xml должен выглядеть следующим образом:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeBounds>
    <changeImageTransform>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeImageTransform>
</transitionSet>

или просто так, если нужно анимировать только ivA и ivB:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds/>
    <changeImageTransform/>
</transitionSet>

Ответ 2

У меня есть эта работа, следующая этому руководству, несколько других и ссылочный материал.

Переходный набор в этом стиле. Я поставил это под res/transition:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeBounds>
    <changeImageTransform>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeImageTransform>
</transitionSet>

В исходном и целевом ImageViews вам нужно добавить тег имени. Имя должно быть одинаковым.

<ImageView
...
android:transitionName="MYTRANSITIONVIEW"

/>

В styles.xml добавьте тему приложения:

<item name="android:windowContentTransitions">true</item>
<item name="android:windowActivityTransitions">true</item>
<item name="android:windowSharedElementEnterTransition">@transition/my_transition</item>
<item name="android:windowSharedElementExitTransition">@transition/my_transition</item>

Я запускаю это внутри фрагмента, поэтому я запускаю новое действие следующим образом:

Bundle bundle = null;

if (activity != null) {
    ActivityOptionsCompat options =
                ActivityOptionsCompat.makeSceneTransitionAnimation(activity, Frag2_, "MYTRANSITIONVIEW");
    bundle = options.toBundle();
}
activity.startActivity(i, bundle);

Он работает с клиентами API 21. Он не работал на клиенте API 16, так как теги XML недействительны.

Надеюсь, это поможет.

Небольшое обновление, чтобы получить обратный переход при выходе, мне пришлось вызвать

supportFinishAfterTransition();

а не finish();