Material Animations 1:Content Transitions

项目地址:https://github.com/SherlockShi/AndroidMaterialAnimationPractise

一、前言

同overridePendingTransition()方法执行效果类似

Content Transition也称为Transitions between Activities,或Enter/Exit Transition,包括下图4个部分(本图截取自Udacity):

《Material Animations 1:Content Transitions》 Content Transition执行过程

  • 1. Exit A: 离开A界面时的转换动画
  • 2. Enter B: 进入B界面时的转换动画
  • 3. Return B: 从B界面返回时的转换动画;可不设置,默认执行Enter B的逆过程
  • 4. Reenter A: 重新进入A界面时的转换动画;可不设置,默认执行Exit A的逆过程

二、效果图

《Material Animations 1:Content Transitions》

三、实现方法

1. 编码实现

ActivityA.java

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

private void setupWindowAnimations() {
    Slide slide = new Slide();
    slide.setDuration(500);
    slide.setSlideEdge(Gravity.LEFT);
    getWindow().setExitTransition(slide);
//    getWindow().setReenterTransition(slide);
}

ActivityB.java

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

private void setupWindowAnimations() {
    Fade fade = new Fade();
    fade.setDuration(500);
    getWindow().setEnterTransition(fade);
//    getWindow().setReturnTransition(slide);
}

由于大部分相关API只支持API 19以上版本,甚至只支持API 21以上版本,因此需要添加如下判断:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  ...
}

2. XML & Code实例化实现

2.1 定义XML

res/transition-v21/fade.xml

<?xml version="1.0" encoding="utf-8"?>
<fade xmlns:android="http://schemas.android.com/apk/res/"
    android:duration="500"/>

res/transition-v21/slide.xml

<?xml version="1.0" encoding="utf-8"?>
<slide xmlns:android="http://schemas.android.com/apk/res/"
    android:duration="500"/>

2.2 Code实例化

ActivityA.java

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

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

ActivityB.java

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

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

3. XML & Style声明式实现(强烈推荐)

3.1 定义XML

如果没有其它属性要求,本步骤可跳过,直接在下一步使用系统定义好的XML

XML & Code实例化实现一样,声明XML文件

res/transition-v21/fade.xml

<?xml version="1.0" encoding="utf-8"?>
<fade xmlns:android="http://schemas.android.com/apk/res/"
    android:duration="500"/>

res/transition-v21/slide.xml

<?xml version="1.0" encoding="utf-8"?>
<slide xmlns:android="http://schemas.android.com/apk/res/"
    android:duration="500"/>

3.2 Style文件声明

res/values-v21/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:windowExitTransition">@transition/slide</item>
    <item name="android:windowReenterTransition">@transition/slide</item>

    <item name="android:windowEnterTransition">@transition/slide</item>
    <item name="android:windowReturnTransition">@transition/slide</item>
</style>

也可以直接使用系统提供的过渡效果:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:windowExitTransition">@android:transition/slide_left</item>
    <item name="android:windowReenterTransition">@android:transition/slide_left</item>
    
    <item name="android:windowEnterTransition">@android:transition/slide_right</item>
    <item name="android:windowReturnTransition">@android:transition/slide_right</item>
</style>

3.3 声明打开Content Transitions(非必须)

如果上一个步骤继承的父主题不是AppCompt相关主题,还需要在styles.xml文件中声明:

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

4. 跳转

startActivity(new Intent(ActivityA.this, ActivityB.class),
                ActivityOptionsCompat.makeSceneTransitionAnimation(ActivityA.this).toBundle());

5. 返回

finishAfterTransition();

四、参考资料

https://github.com/lgvalle/Material-Animations

PS:欢迎关注SherlockShi博客

    原文作者:SherlockShi
    原文地址: https://www.jianshu.com/p/6ed2520b0fd6
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞