High force grid Android animated transitions

Foreword

Transition animations on the very edge interaction, the use of paper from the scene transitions and animation methods, and finally achieve the transition animation Nuggets in the user's head.

Transition animation applicable version

Activity transition APIs only in Android 5.0 (API 21) can be used on or higher version. So before you need to use version judgment. When using the version of the API greater than 21 animated transitions, or do not use.

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Also you need to be configured to allow window content transitions. That is, field: android: windowActivityTransitions. Activity may be performed as follows in a style file.

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>
</style>

May be arranged as follows in a dynamic code:

// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());

Transition animations use scene

Transition animation Android, there are three main scenarios:
1, between the two activity transition effect when switching interface.

Between the two, or two activity transitions Fragment shared elements.

3, the same activity in view of the animation.
The following are detailed description of these three ways.

1, when switching the interface between the two activity transitions

When the two switching activity, there are two animations, below, to switch from activity to activity A B, B into the animation of the animation and will exit the A.

High force grid Android animated transitions

The main activity of entry and exit methods:

Window.setEnterTransition () to set the animation approach
Window.setExitTransition () Set animated appearances
Window (). SetReturnTransition () set to return to activity animation
. Window () animation setReenterTransition () is provided to re-enter
the following figure:

android.transition.Transition package provided by Google switched from activity A to activity B in three ways: Explode, Slide and Fade.
1, Explode: to enter or exit from the middle of the screen.
2, Slide: from one side to the other side of the screen to enter or exit.
3, Fade: to appear or disappear by changing transparency.
Results as shown below:

The above three animation implemented in two ways:

1, by the xml declaration.

New folder transition in transition under the new activity_fade.xml file folder in the directory res.
res / transition / activity_fade.xml
```
<?xml version="1.0" encoding="utf-8"?>
<fade xmlns:android="http://schemas.android.com/apk/res/"
android:duration="1000"/>
```
res/transition/activity_slide.xml
```
<?xml version="1.0" encoding="utf-8"?>
<slide xmlns:android="http://schemas.android.com/apk/res/"
android:duration="1000"/>
```
ActivityA code is as follows: since the switching from ActivityA to ActivityB, so ActivityA exit animation method is used:. GetWindow () setExitTransition (slide);

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }

    private void setupWindowAnimations() {
        Slide slide = TransitionInflater.from(this).inflateTransition(R.transition.activity_slide);
        getWindow().setExitTransition(slide);
    }

ActivityB entering animation use:. GetWindow () setEnterTransition (fade) ;, ActivityB code is as follows

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }

    private void setupWindowAnimations() {
        Fade fade = TransitionInflater.from(this).inflateTransition(R.transition.activity_fade);
        getWindow().setEnterTransition(fade);
    }

2, implementation code mode.

ActivityA code is as follows: Slide objects and implement a set time of 1000 ms.

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }

    private void setupWindowAnimations() {
        Slide slide = new Slide();
        slide.setDuration(1000);
        getWindow().setExitTransition(slide);
    }

ActivityB Fide achieve a set target time of 1000 milliseconds and.

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }

    private void setupWindowAnimations() {
        Fade fade = new Fade();
        fade.setDuration(1000);
        getWindow().setEnterTransition(fade);
    }

The final effect is achieved above the following two ways:
High force grid Android animated transitions

上面的动画过程分析：
1、Activity A 启动Activity B
2、Transition FrameWork层得到Activity A的退出动画slide并且应用到全部可见的view中。
3、Transition FrameWork层得到Activity B的进入动画fade并且应用到全部可见的view中。
4、当从Activity B返回到Activity A的时候会分别执行Enter和Exit相反的动画（没有设置returnTransition，和reenterTransition时）。

ReturnTransition & ReenterTransition
Return 和Reenter Transition是enter 和exit相反的过程。当从Activity A进入到Activity B时会执行 exit和enter当从Activity B退回到Activity A时会执行Return Transition和Reenter Transition。

EnterTransition <--> ReturnTransition

ExitTransition <--> ReenterTransition
如果没有定义Return 或者 Reenter，那么Android会反向执行Enter和Exit变换。如下图从Activity B退回到Activity A：
High force grid Android animated transitions
给Activity A增加了ReturnTransition的代码如下：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_transition);
    setupWindowAnimations();
}

private void setupWindowAnimations() {
    Fade fade = new Fade();
    fade.setDuration(1000);
    getWindow().setEnterTransition(fade);

    Slide slide = new Slide();
    slide.setDuration(1000);
    getWindow().setReturnTransition(slide);        
}

增加了返回动画和没有增加返回动画的对比效果如下：
High force grid Android animated transitions

High force grid Android animated transitions

2、 Shared elements between Activities

Shared elements转换确定两个Activity之间共享的视图如何在这两个Activity之间转换。例如，如果两个Activity在不同的位置和大小中具有相同的图像，则通过Shared elements转换会在这两个Activity之间平滑地转换和缩放图像。

主要方法

High force grid Android animated transitions
如下图，当从Activity A跳转到Activity B时，ActivityA， ActivityB中的两个item有动画变化，但是要注意的时ActivityA ，ActivityB中的item是两个独立的item。

shared elements转换包括以下几种：

changeBounds 改变目标布局中view的边界
changeClipBounds 裁剪目标布局中view的边界
changeTransform 实现旋转或者缩放动画

changeImageTransform 实现目标布局中ImageView的旋转或者缩放动画
实现上面的效果需要三个步骤：

1、 Enable Window Content Transition

设置styles.xml文件，允许windowContentTransitions如下：
value/style.xml

<style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar">
...
<item name="android:windowContentTransitions">true</item
...
</style>

2、定义一个相同的transition名称

分别在Activity A 和Activity B的布局文件中定义item，这两个item的属性可以不一样，但是android:transitionName必须一样。如下：
layout/activity_a.xml

<ImageView
    android:id="@+id/small_blue_icon"
    style="@style/MaterialAnimations.Icon.Small"
    android:src="@drawable/circle"
    android:transitionName="@string/blue_name" />

layout/activity_b.xml

<ImageView
    android:id="@+id/big_blue_icon"
    style="@style/MaterialAnimations.Icon.Big"
    android:src="@drawable/circle"
    android:transitionName="@string/blue_name" />

3、在activity中启动shared element

使用ActivityOptions.makeSceneTransitionAnimation()方法
ActivityA.java

blueIconImageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
    Intent i = new Intent(MainActivity.this, SharedElementActivity.class);

    View sharedView = blueIconImageView;
    String transitionName = getString(R.string.blue_name);

    ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, sharedView, transitionName);
    startActivity(i, transitionActivityOptions.toBundle());
}
});

Results are as follows:
High force grid Android animated transitions
Start with Multiple Shared Elements AN Activity

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
    Pair.create(view1, "agreedName1"),
    Pair.create(view2, "agreedName2"));

Fragment Shared elements between
similar elements use the Shared between processes and between Activity Fragment, divided into three steps:

1, allows windowContentTransitions

<style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar">
...
<item name="android:windowContentTransitions">true</item>
...
</style>

2, the definition of a common transformation name

layout/fragment_a.xml

<ImageView
        android:id="@+id/small_blue_icon"
        style="@style/MaterialAnimations.Icon.Small"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />

layout/fragment_b.xml

<ImageView
        android:id="@+id/big_blue_icon"
        style="@style/MaterialAnimations.Icon.Big"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />

3, using FragmentTransaction

FragmentB fragmentB = FragmentB.newInstance(sample);

// Defines enter transition for all fragment views
Slide slideTransition = new Slide(Gravity.RIGHT);
slideTransition.setDuration(1000);
sharedElementFragment2.setEnterTransition(slideTransition);

// Defines enter transition only for shared element
ChangeBounds changeBoundsTransition = TransitionInflater.from(this).inflateTransition(R.transition.change_bounds);
fragmentB.setSharedElementEnterTransition(changeBoundsTransition);

getFragmentManager().beginTransaction()
        .replace(R.id.content, fragmentB)
        .addSharedElement(blueView, getString(R.string.blue_name))
        .commit();

Results as shown
High force grid Android animated transitions

Animation settings allow overlap

By setting setAllowEnterTransitionOverlap (overlap); overlapping approach enabled or disabled animation and animation overlap appearances is true or false.

FragmentB fragmentB = FragmentB.newInstance(sample);

// Defines enter transition for all fragment views
Slide slideTransition = new Slide(Gravity.RIGHT);
slideTransition.setDuration(1000);
sharedElementFragment2.setEnterTransition(slideTransition);

// Defines enter transition only for shared element
ChangeBounds changeBoundsTransition = TransitionInflater.from(this).inflateTransition(R.transition.change_bounds);
fragmentB.setSharedElementEnterTransition(changeBoundsTransition);

// Prevent transitions for overlapping
fragmentB.setAllowEnterTransitionOverlap(overlap);
fragmentB.setAllowReturnTransitionOverlap(overlap);

getFragmentManager().beginTransaction()
        .replace(R.id.content, fragmentB)
        .addSharedElement(blueView, getString(R.string.blue_name))
        .commit();