高逼格Android转场动画

作者: IDhanking | 来源:发表于2019-03-01 20:58 被阅读236次

前言

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

转场动画适用的版本

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

// 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文件中进行如下配置。

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

也可以在代码中动态的配置如下：

// 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中的转场动画主要有三种场景：

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

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

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

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

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

在这里插入图片描述
activity主要的进场和出场方法：

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

在这里插入图片描述

在Google提供的android.transition.Transition包中从activity A切换到activity B有三种方式：Explode, Slide 和Fade。
1、Explode：从屏幕的中间进入或退出。
2、Slide：从屏幕的一边向另一边进入或退出。
3、Fade：通过改变透明度来出现或消失。

效果如下图所示：

Explode	Slide	Fade
在这里插入图片描述	在这里插入图片描述	在这里插入图片描述

上面的三种动画有两种实现方式：
1、通过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);
    }

2、代码方式实现。
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);
    }

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

在这里插入图片描述

上面的动画过程分析：
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：

在这里插入图片描述

给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
在这里插入图片描述	在这里插入图片描述

2、 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的旋转或者缩放动画

实现上面的效果需要三个步骤：
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());
    }
});

效果如下：

在这里插入图片描述
Start an activity with multiple shared elements

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

Fragment之间Shared elements

Fragment之间的Shared elements的使用过程和Activity之间的类似，分为三个步骤：
1、允许windowContentTransitions

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

2、定义一个共同的变换名称

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、使用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();

效果如下图

在这里插入图片描述
设置是否允许动画重叠
可以通过设置setAllowEnterTransitionOverlap(overlap);中的overlap的值为true或者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();

高逼格Android转场动画

前言

转场动画适用的版本

转场动画的使用场景

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

2、 Shared elements between Activities

Fragment之间Shared elements

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android 技术收集

Android应用开发那些事

Android黑科技

安卓工具相关

程序员杂货铺

Android知识梳理