Android开发之Activity转场动画

引子

相信开发过iOS的程序员都知道iOS ViewController之间的跳转动画非常多,很酷对不对?这让开发Android的羡慕不已,曾几何时,Android中的Activity跳转是何等的生硬,But,在Android 5.0以后,Google也为Activity的转场设计了更加友好的动画效果。

转场动画(Activity Transition)基本介绍

Android 5.0 提供了三种Transition类型 进入:决定Activity中的所有的视图怎么进入屏幕。 退出:决定一个Activity中的所有视图怎么退出屏幕。 共享元素:决定两个activities之间的过渡,怎么共享(它们)的视图。

进入和退出包含如下动画效果
  • explode(分解) – 从屏幕中间进或出
  • slide(滑动) - 从屏幕边缘进或出地
  • fade(淡出) –通过改变屏幕上视图的不透明度达到添加或者移除视图的效果
共享元素包含如下动画效果
  • changeBounds - 改变目标视图的布局边界
  • changeClipBounds - 裁剪目标视图边界
  • changeTransform - 改变目标视图的缩放比例和旋转角度
  • changeImageTransform - 改变目标图片的大小和缩放比例
实践

1.准备好2个Activity的布局,弄几个按钮,分别对应几种转场动画。

activity_one.xml ActivityOne的布局,其中最后一个Button是为了做共享元素动画

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="explode"
        android:text="explode" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="slide"
        android:text="slide" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="fade"
        android:text="fade" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="share"
        android:text="share" />


    <Button
        android:id="@+id/share"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/football" />
</LinearLayout>

activity_two.xml ActivityTwo的布局,里面的Button与第一个布局中的最后一个Button呼应,只是大小不一样

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0000ff"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/share"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:transitionName="shareTransition"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/football"
        android:layout_centerInParent="true"
        android:onClick="share" />
</RelativeLayout>

2.ActivityOne 与 ActivityTwo

ActivityOne.java

public class ActivityOne extends Activity {


    private Intent intent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_one);
        intent = new Intent(ActivityOne.this, ActivityTwo.class);
    }

    public void explode(View view) {

        intent.putExtra("transition", "explode");
        //将原先的跳转改成如下方式
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(ActivityOne.this).toBundle());

    }

    public void slide(View view) {

        intent.putExtra("transition", "slide");
        //将原先的跳转改成如下方式
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(ActivityOne.this).toBundle());

    }

    public void fade(View view) {

        intent.putExtra("transition", "fade");
        //将原先的跳转改成如下方式
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(ActivityOne.this).toBundle());

    }

    public void share(View view) {

        //共享元素
        Button share = (Button) findViewById(R.id.share);
        intent.putExtra("transition", "share");

        //将原先的跳转改成如下方式,注意这里面的第三个参数决定了ActivityTwo 布局中的android:transitionName的值,它们要保持一致
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(ActivityOne.this, share, "shareTransition").toBundle());

    }


}

ActivityTwo.java

public class ActivityTwo extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 允许使用transitions
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

        String transition = getIntent().getStringExtra("transition");

        switch (transition) {
            case "explode":
                // 设置进入时进入动画
                Explode explode = new Explode();
                explode.setDuration(1000);
                getWindow().setEnterTransition(explode);

                break;

            case "slide":
                Slide slide = new Slide();
                slide.setDuration(1000);
                getWindow().setEnterTransition(slide);

                break;

            case "fade":
                Fade fade = new Fade();
                fade.setDuration(1000);
                getWindow().setEnterTransition(fade);

                break;

            case "share":
                break;
        }

        // 所有操作在设置内容视图之前
        setContentView(R.layout.activity_two);

    }

}

说明: getWindow().setEnterTransition()是进入动画,与之对应的getWindow().setExitTransition()就是退出转场动画,用法和上面一样,就不重复了

3.测试效果 explode

explode.gif

slide

slide.gif

fade

fade.gif

share

share.gif

问题

explode效果感觉并没有从中间进,而是从上面下来的,这是为什么呢?欢迎知道的告知,感谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏郭霖

Android滑动菜单框架完全解析,教你如何一分钟实现滑动菜单特效

之前我向大家介绍了史上最简单的滑动菜单的实现方式,相信大家都还记得。如果忘记了其中的实现原理或者还没看过的朋友,请先去看一遍之前的文章 Android滑动菜单特...

3236
来自专栏Android小菜鸡

这次彻底搞懂Android补间动画

通过确定开始的视图样式 & 结束的视图样式、中间动画变化过程由系统补全来确定一个动画

1522
来自专栏everhad

[BOT]自定义ViewPagerStripIndicator

效果图 app中下面这样的控件很常见,像默认的TabHost表现上不够灵活,下面就简单写一个可以结合ViewPager切换内容显示,提供底部“滑动条”指示所显示...

2195
来自专栏郭霖

Android实现图片滚动控件,含页签功能

首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机。 如果你...

32310
来自专栏非著名程序员

简单好用的阴影库 ShadowLayout

在开发过程中常会遇见带阴影效果的控件,通过 SDK 提供的 CardView 和 android:elevation可以实现,也可以通过 .9 图实现。但是使用...

4225
来自专栏Android知识点总结

2-VIII--ViewPager滑动监听与自定义滑动特效

1171
来自专栏非著名程序员

AutoFlowLayout-多功能流式布局与网格布局控件

近期工作需要用到流式布局,网上也有很多关于这方面的资料。发现流式布局与网格布局的自定义很有意思,是学习自定义控件的一个很好的方式,所以就撸了个几百行代码的控件,...

36910
来自专栏Android中高级开发

Android开发之漫漫长途 番外篇——自定义View的各种姿势1

该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列。该系列引用了《Android开发艺术探索...

1111
来自专栏Felix的技术分享

Android快速索引条控件QuickIndexBar

2237
来自专栏分享达人秀

ImageView的属性和方法大全

通过前面几期的学习,TextView控件及其子控件基本学习完成,可以在Android屏幕上显示一些文字或者按钮,那么从本期开始来学习如何进行图片展示,这...

1879

扫码关注云+社区

领取腾讯云代金券