在Android5.0以上设备实现过渡动画

咕咚 发表于 2015-11-22 阅读次数

从Android5.0开始,系统提供一个很好看的Activity间的转场动画,具体就是共享两个界面中一些共有的View,让前后两个界面的跳转变得很流畅 好看。

具体效果

一图胜千语,下面就是 Android 5.0 设备上使用转场动画后示意图,这样的交互在 Google 自家的 App 里已经司空见惯。比如 Google Play 中,从应用列表界面跳转到应用详情页,就使用了类似的转场动画。下面的示意 gif 来自 Android 官方 Demo。

tronsition_effect

看上去确实很好看,使用后让原本硬生生的界面跳转变得特别自然。那怎么实现呢,简单分析下。

现在有两个 Activity 分别为 MainActivity 和 DetailActivity 。MainActivity中是一些动物的列表展示,每个 Item包含一个动物图片和动物名称。 点击 Item 需要跳转到对应动物的详情介绍页。详情介绍页,会显示动物的大图,名称以及这个动物的详细介绍。

因为两个界面中动物的图片和名称是一致的,也就是说这两个界面有共有的 View 元素,所以这种场景就比较适合用转场动画来 优化交互逻辑,现在点击 MainActivity 的 Item,需要产生一个转场动画来到达详情页。下面就是具体实现方式。

实现方法

1、在DetailActivity中为指定的 View 设置一个字符串的标记


    // View name of the header image. Used for activity scene transitions
    public static final String VIEW_NAME_HEADER_IMAGE = "detail:header:image";
    
    // View name of the header title. Used for activity scene transitions
    public static final String VIEW_NAME_HEADER_TITLE = "detail:header:title";
    

2、使用 ActivityCompat 启动目标 Activity


    Intent intent = new Intent(this, DetailActivity.class);
    intent.putExtra(DetailActivity.EXTRA_PARAM_ID, item.getId());

    /**
     * 通过ActivityOptionsCompat的工厂方法创建一个ActivityOptions实例
     */
    ActivityOptionsCompat activityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(
            this,
            //关联两个界面中的共有 View 元素
            new Pair<View, String>(itemView.findViewById(R.id.imageview_item),
                    DetailActivity.VIEW_NAME_HEADER_IMAGE),
            new Pair<View, String>(itemView.findViewById(R.id.textview_name),
                    DetailActivity.VIEW_NAME_HEADER_TITLE));
    //启动目标 Activity 
    ActivityCompat.startActivity(this, intent, activityOptions.toBundle());
   

3、在 DetailActivity 的 onCreate 方法中接受并处理


    //找到 detail 界面中的 View 元素
    mHeaderImageView = (ImageView) findViewById(R.id.imageview_header);
    mHeaderTitle = (TextView) findViewById(R.id.textview_title);

    //关联
    ViewCompat.setTransitionName(mHeaderImageView, VIEW_NAME_HEADER_IMAGE);
    ViewCompat.setTransitionName(mHeaderTitle, VIEW_NAME_HEADER_TITLE);
    

总结

总体说来使用还是挺简单的,这个效果尤其对图片类应用特别棒,不过目前只有 5.0 以上设备才能支持这个效果,如果想要兼容5.0以下的设备,你可能需要去 Github 搜搜有没有合适库。