Material-Animations-CN

具体介绍：【Transition】Android炫酷的页面切换效果

此篇 API 均为 Android 5.0（API 级别 21）以上才可支持。

此demo一共分为四部分：

1.1 普通过渡 Transition；
1.2 Shared Elements Transition 共享元素；
2.0 TransitionManager 控制动画；
3.0 ViewAnimationUtils 显示或隐藏效果。

***

Transition 动画

explode	slide	fade
从中心移入或移出	从边缘移入或移出	调整透明度产生渐变

Transition 调用场景

上面的三张图，每张都经历了：

退出 -> 进入 -> 返回 -> 重新进入

Exit -> Enter -> Return -> Reenter

第一个页面设置：

android:windowExitTransition 启动新 Activity ，此页面退出的动画

android:windowReenterTransition 重新进入的动画。即第二次进入，可以和首次进入不一样。

第二个页面设置：

android:windowEnterTransition 首次进入显示的动画

android:windowReturnTransition 调用 finishAfterTransition() 退出时，此页面退出的动画

如此即可达到以上效果。

## Shared Elements Transition 共享元素

跳转时，增加了参数，即声明要共享的元素：

protected void transitionTo(Intent i) {
    ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
                                                    Pair.create(view1, "agreedName1"),
                                                    Pair.create(view2, "agreedName2"));
    startActivity(i, options.toBundle());
}

设置共享的动画：

ChangeBounds changeBounds = new ChangeBounds();
changeBounds.setDuration(500);

getWindow().setSharedElementEnterTransition(changeBounds);

## TransitionManager 控制动画

只需要定义布局，调用跳转即可：

private void setupLayout() {
    scene0 = Scene.getSceneForLayout(binding.sceneRoot, R.layout.activity_animations_scene0, this);
    scene1 = Scene.getSceneForLayout(binding.sceneRoot, R.layout.activity_animations_scene1, this);
    scene2 = Scene.getSceneForLayout(binding.sceneRoot, R.layout.activity_animations_scene2, this);
    scene3 = Scene.getSceneForLayout(binding.sceneRoot, R.layout.activity_animations_scene3, this);
    scene4 = Scene.getSceneForLayout(binding.sceneRoot, R.layout.activity_animations_scene4, this);
    binding.sample3Button1.setOnClickListener(this);
    binding.sample3Button2.setOnClickListener(this);
    binding.sample3Button3.setOnClickListener(this);
    binding.sample3Button4.setOnClickListener(this);
}

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.sample3_button1:
            TransitionManager.go(scene1, new ChangeBounds());
            break;
        case R.id.sample3_button2:
            TransitionManager.go(scene2, TransitionInflater.from(this).inflateTransition(R.transition.slide_and_changebounds));
            break;
        case R.id.sample3_button3:
            TransitionManager.go(scene3,TransitionInflater.from(this).inflateTransition(R.transition.slide_and_changebounds_sequential));
            break;
        case R.id.sample3_button4:
            TransitionManager.go(scene3,TransitionInflater.from(this).inflateTransition(R.transition.slide_and_changebounds_sequential_with_interpolators));
            break;
    }
}

## CircularReveal 显示或隐藏的效果

显示 View ：

private void animShow() {
    View myView = findViewById(R.id.my_view);
    // 从 View 的中心开始
    int cx = (myView.getLeft() + myView.getRight()) / 2;
    int cy = (myView.getTop() + myView.getBottom()) / 2;
    int finalRadius = Math.max(myView.getWidth(), myView.getHeight());

    //为此视图创建动画设计(起始半径为零)
    Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
    // 使视图可见并启动动画
    myView.setVisibility(View.VISIBLE);
    anim.start();
}

隐藏 View ：

private void animHide() {
    final View myView = findViewById(R.id.my_view);
    int cx = (myView.getLeft() + myView.getRight()) / 2;
    int cy = (myView.getTop() + myView.getBottom()) / 2;

    int initialRadius = myView.getWidth();

    // 半径 从 viewWidth -> 0
    Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);

    anim.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            myView.setVisibility(View.INVISIBLE);
        }
    });
    anim.start();
}

# Sample source code

https://github.com/Wing-Li/Material-Animations-CN

iq-scm / material-animations-cn Goto Github PK