高逼格Android转场动画，轻松实现掘金用户头像转场动画

时间 2019-11-07

原文原文链接

前言

转场动画在交互上很是有优点，本文从转场动画的使用场景和方法起，最后是实现掘金中用户头像的转场动画。php

转场动画适用的版本

Activity transition APIs 只有在Android 5.0（API 21）或者更高的版本上能使用。因此在使用以前须要进行版本判断。当版本API 大于21时使用转场动画，不然不使用。java

// 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
}
复制代码

还须要配置容许window content transitions 。也就是字段：android:windowActivityTransitions。能够在activity的style文件中进行以下配置。android

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

也能够在代码中动态的配置以下：ide

// 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());
复制代码

转场动画的使用场景

Android中的转场动画主要有三种场景：布局

一、在两个activity之间切换时界面的过渡效果。动画

二、两个activity或者Fragment之间shared elements 切换效果。ui

三、同一个activity中的view的动画效果。 下面分别详细的介绍这三种方式。this

一、两个activity之间切换时界面的过渡效果

两个activity切换时的，有两个动画，以下图，从activity A 切换到activity B时，会有A的退出动画和B的进入动画。 spa

activity主要的进场和出场方法：

Window.setEnterTransition() 设置进场动画
Window.setExitTransition() 设置出场动画
Window().setReturnTransition() 设置返回activity时动画
Window().setReenterTransition() 设置从新进入时动画以下图：

在Google提供的android.transition.Transition包中从activity A切换到activity B有三种方式：Explode, Slide 和Fade。 一、Explode：从屏幕的中间进入或退出。3d

二、Slide：从屏幕的一边向另外一边进入或退出。

三、Fade：经过改变透明度来出现或消失。

效果以下图所示：

Explode	Slide	Fade

上面的三种动画有两种实现方式：

一、经过xml声明。

在res目录下新建transition文件夹在transition文件夹下新建activity_fade.xml文件。 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的代码以下：由于从ActivityA切换到ActivityB,因此ActivityA是退出动画使用的方法是：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是进入动画使用方法：getWindow().setEnterTransition(fade);，ActivityB的代码以下

@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);
    }
复制代码

二、代码方式实现。

ActivityA代码以下：实现一个Slide对象而且设置时间为1000毫秒。

@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对象而且设置时间为1000毫秒。

@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);
    }
复制代码

上面两种方式最终的实现效果以下：

上面的动画过程分析：一、Activity A 启动Activity B 二、Transition FrameWork层获得Activity A的退出动画slide而且应用到所有可见的view中。三、Transition FrameWork层获得Activity B的进入动画fade而且应用到所有可见的view中。四、当从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：

给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);        
    }
复制代码

增长了返回动画和没有增长返回动画的对比效果以下：

没有Return Transition	有return Transition
Enter：Fade In	Enter:Fade In
Exit：Fade out	Exit:Slide out

二、 Shared elements between Activities

Shared elements转换肯定两个Activity之间共享的视图如何在这两个Activity之间转换。例如，若是两个Activity在不一样的位置和大小中具备相同的图像，则经过Shared elements转换会在这两个Activity之间平滑地转换和缩放图像。 主要方法

以下图，当从Activity A跳转到Activity B时，ActivityA， ActivityB中的两个item有动画变化，可是要注意的时ActivityA ，ActivityB中的item是两个独立的item。

shared elements转换包括如下几种：

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

实现上面的效果须要三个步骤：

一、 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>
复制代码

二、定义一个相同的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" />
复制代码

三、在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());
    }
});
复制代码

效果以下：

未完待续.......