高逼格Android转场动画

技术介绍 Android
创建时间:
字数:1.9k 阅读: 评论:
  1. 前言
  2. 转场动画适用的版本
  3. 转场动画的使用场景
  4. 1、两个activity之间切换时界面的过渡效果
  5. 2、 Shared elements between Activities
  6. Fragment之间Shared elements
  7. +qq群： 457848807。获取以上高清技术思维图，以及相关技术的免费视频学习资料

前言

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

转场动画适用的版本

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();

+qq群： 457848807。获取以上高清技术思维图，以及相关技术的免费视频学习资料

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以加QQ（2602138376）

赏

文章标题:高逼格Android转场动画

文章字数:1.9k

本文作者:Zevs

发布时间:2019-08-20, 08:55:20

最后更新:2019-08-21, 17:41:12

原始链接:http://zhsh666.xyz/2019/08/20/高逼格Android转场动画/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

©2019 ®Zevs | ✿网站字词总数：字

√本站访问人数：人次 | ◎本站总访问量：次

目录
×

喜欢就点赞,疼爱就打赏

相册 图床 主题切换