Activity跳转的过渡动画全解析

最新推荐文章于 2021-11-10 21:27:22 发布
最新推荐文章于 2021-11-10 21:27:22 发布
阅读量498 收藏
点赞数
分类专栏： 代码库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SkylakeXun/article/details/78467800
版权

ActivityOptionsCompat

前因:

//在旧版本里面，我们切换Activity大多都是使用的api
overridePendingTransition(enterAnim, exitAnim);
但是,这个效果显得太过生硬

引出:

google在V4 support包内提供了一个向下兼容的类，供我们使用，ActivityOptionsCompat，我们可以使用这个类开发出很绚丽的跳转效果。

API:

//类似于overridePendingTransition的功能，为两个activity设置了过渡动画;
ActivityOptionsCompat.makeCustomAnimation (Context context, int enterResId, int exitResId)
//新的activity产生一个缩放的动画,后两个参数是被打开的act的初始宽度和高度
ActivityOptionsCompat.makeScaleUpAnimation(View source, int startX,int startY, int width,int height)
//利用传入了view开启一个缩放动画
ActivityOptionsCompat.makeThumbnailScaleUpAnimation(View source,
Bitmap thumbnail, int startX, int startY)
//共享元素动画,api>=21可以使用

Demo:

public class MainActivity extends AppCompatActivity {


    @BindView(R.id.old)
    Button mOld;
    @BindView(R.id.btn_custom)
    Button mBtnCustom;
    @BindView(R.id.btn_scaleup)
    Button mBtnScaleup;
    @BindView(R.id.btn_ThumbnailScaleUp)
    Button mBtnThumbnailScaleUp;
    @BindView(R.id.btn_Scene)
    Button mBtnScene;
    @BindView(R.id.btn_Scenes)
    Button mBtnScenes;

    @BindView(R.id.imageView_right)
    ImageView mImageViewRight;
    @BindView(R.id.imageView_left)
    ImageView mImageViewLeft;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= 21) {
            //共享元素动画只支持5.0以后的版本
            getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        }
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
    }

    @OnClick({R.id.old, R.id.btn_custom, R.id.btn_scaleup, R.id.btn_ThumbnailScaleUp, R.id.btn_Scene, R.id.btn_Scenes})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.old: {
                Intent intent = new Intent(this, TargetActivity.class);
                startActivity(intent);
                overridePendingTransition(R.anim.in, R.anim.out);
            }
            break;
            case R.id.btn_custom: {
                ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeCustomAnimation(this, R.anim.in, R.anim.out);
                Intent intent = new Intent(this, TargetActivity.class);
                ActivityCompat.startActivity(this, intent, activityOptionsCompat.toBundle());
            }
            break;
            case R.id.btn_scaleup: {
                ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeScaleUpAnimation(mBtnScaleup, 0, 0, 200, 200);
                Intent intent = new Intent(this, TargetActivity.class);
                ActivityCompat.startActivity(this, intent, activityOptionsCompat.toBundle());
            }
            break;
            case R.id.btn_ThumbnailScaleUp: {
                Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher_round);
                ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeThumbnailScaleUpAnimation(mBtnThumbnailScaleUp, bitmap, 0, 0);
                Intent intent = new Intent(this, TargetActivity.class);
                ActivityCompat.startActivity(this, intent, activityOptionsCompat.toBundle());
            }
            break;
            case R.id.btn_Scene: {
                //
                ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat
                .makeSceneTransitionAnimation(this, mImageViewLeft, "element");
                Intent intent = new Intent(this, TargetActivity.class);
                ActivityCompat.startActivity(this, intent, activityOptionsCompat.toBundle());
            }
            break;
            case R.id.btn_Scenes: {
                Pair<View, String> element = Pair.create((View)mImageViewLeft, "element");
                Pair<View, String> element2 = Pair.create((View)mImageViewRight, "element2");
                ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat
                .makeSceneTransitionAnimation(this, element, element2);
                Intent intent = new Intent(this, TargetActivity.class);
                ActivityCompat.startActivity(this, intent, activityOptionsCompat.toBundle());
            }
            break;
        }
    }
}

被打开的activity的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.junx.activitytransitionanimation.TargetActivity">
    <Button
        //类型不重要,只要android:transitionName相同就会被关联到一起
        android:transitionName="element2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp" 
        app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.13"
        app:srcCompat="@mipmap/ic_launcher_round"/>
    <Button
        android:layout_width="200dp" android:layout_height="200dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp" android:layout_marginTop="8dp"
        android:transitionName="element" app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5" app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher_round"/>
</android.support.constraint.ConstraintLayout>

Scene动画

什么叫做场景(Scene)？场景就是一个布局或部分布局，我们可以使用场景来创建动画。

google 在旧版本的系统中提供了View Animation与Propery Animator,两套动画系统能够使开发者方便的完成动画的显示，但是为了实现一些效果，开发者仍需要编写大量的代码进行完成。因为我们常常使用的位移、隐藏等动画，在5.0版本以后，开发人员只要写好布局，动画系统会自动的把相应的动画显示出来，大大的减少重复的代码开发的工作量。
场景需要api19(android4.4)以上版本才能使用

demo

布局一

<android.support.constraint.ConstraintLayout
    android:id="@+id/layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.junx.activitytransitionanimation.Transition.Scene.SceneActivity">

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginBottom="0dp"
        android:src="@mipmap/ic_launcher_round"
        app:layout_constraintBottom_toTopOf="@+id/imageView3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"
        android:layout_marginLeft="8dp" app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/imageView3" android:layout_marginRight="0dp"
        app:layout_constraintHorizontal_bias="1.0"/>
    <ImageView
        android:src="@mipmap/ic_launcher_round"
        android:id="@+id/button"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginBottom="0dp" app:layout_constraintBottom_toTopOf="@+id/imageView3"
        app:layout_constraintVertical_bias="1.0"
        app:layout_constraintLeft_toRightOf="@+id/imageView3" android:layout_marginLeft="0dp"
        app:layout_constraintHorizontal_bias="0.0"/>
    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginBottom="0dp"
        android:src="@mipmap/ic_launcher_round" app:layout_constraintBottom_toTopOf="@+id/imageView2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"/>
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginBottom="0dp"
        android:src="@mipmap/ic_launcher_round" app:layout_constraintBottom_toTopOf="@+id/imageView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"/>
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/ic_launcher_round"
        app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"/>
    <Button
        android:id="@+id/btn"
        android:onClick="go"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

布局二,跟布局一的区别只有控件的位置和大小

<android.support.constraint.ConstraintLayout
    android:id="@+id/layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.junx.activitytransitionanimation.Transition.Scene.SceneActivity">
    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginBottom="0dp"
        android:src="@mipmap/ic_launcher_round"
        app:layout_constraintBottom_toTopOf="@+id/imageView3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"
        android:layout_marginLeft="8dp" app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/imageView3" android:layout_marginRight="0dp"
        app:layout_constraintHorizontal_bias="0.0"/>
    <ImageView
        android:src="@mipmap/ic_launcher_round"
        android:id="@+id/button"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginBottom="0dp" app:layout_constraintBottom_toTopOf="@+id/imageView3"
        app:layout_constraintVertical_bias="1.0"
        app:layout_constraintLeft_toRightOf="@+id/imageView3" android:layout_marginLeft="0dp"
        app:layout_constraintHorizontal_bias="1.0"/>
    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/ic_launcher_round"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"
        android:layout_marginBottom="8dp" app:layout_constraintBottom_toTopOf="@+id/button2"/>
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/ic_launcher_round"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0.0" app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="0dp" app:layout_constraintVertical_bias="1.0"/>
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/ic_launcher_round"
        app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" app:layout_constraintHorizontal_bias="1.0"/>
    <Button
        android:onClick="go"
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

代码

public class SceneActivity extends AppCompatActivity {

    @BindView(R.id.btn)
    Button mButton;
    @BindView(R.id.layout)
    ConstraintLayout mLayout;

    Scene mScene1;
    Scene mScene2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        setContentView(R.layout.activity_scene);
        ButterKnife.bind(this);
        //通过该方法获取布局中的scene,第一个参数是根布局
        mScene1 = Scene.getSceneForLayout(mLayout, R.layout.activity_scene2, this);
        mScene2 = Scene.getSceneForLayout(mLayout, R.layout.activity_scene, this);
    }
    int x = 0;

    public void go(View view) {
        if (x % 2 == 0) {
            //第二个参数是动画类型,默认是淡入淡出效果
            TransitionManager.go(mScene1,new Slide());
        } else {
            TransitionManager.go(mScene2, new ChangeBounds());
        }
        x++;
    }
}

修改参数的动画效果

    public void go(View view) {
    //开始动画
        TransitionManager.beginDelayedTransition(mLayout);
        //参数改变后会自动生成动画
        mButton.setHeight(300);
        mButton.setWidth(300);
    }
//recyclerview也可以
                TransitionManager.beginDelayedTransition(recyclerView, explode);
                recyclerView.setAdapter(null);

Scene动画也是支持页面跳转der~~~

public class TransitionAndActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= 21) {
            //1 跳转使用的transition
            Explode explode = new Explode();

            //            Slide slide = new Slide(Gravity.RIGHT);
            //            slide.setDuration(2000);
            //让我们的页面支持transition

            TransitionInflater inflater = TransitionInflater.from(this);
            Transition transition = inflater.inflateTransition(R.transition.over);
            getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
            //页面退出的tristion
            getWindow().setExitTransition(explode);
        }
        setContentView(R.layout.activity_and_transition);
    }

    public void explose(View view) {
        Intent intent = new Intent();
        intent.setClass(this, TestExploseActivity.class);
//        startActivity(intent);
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
    }
}

api:

Transition 与 Activity的跳转动画有以下几个
setEnterTransition 进入的动画
setExitTransition 退出的动画
setReturnTransition 返回的动画
setReenterTransition 重入的动画
SkylakeXun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android学习之Activity深入
Sky的博客
09-05 2800
activitiy中打开一个Aactivitiy，Aactivitiy会走以下生命周期 onCreate–》onStart–》onResume–》A运行–》发出打开B的intent–》AonPause–》B可见–》AonStop，此时B经历同样的生命周期， 等B结束，A再度可见，onRestart–》onStart–》onResume注意：AonPause之后B可见，为了不影响B界面的显示，这里
Activit跳转动画之界面上某个位置并裂开上下拉伸动画跳转
09-01
本篇文章将详细探讨如何实现一个特定的动画效果——Activity跳转时从界面上某个位置裂开，并以上下拉伸的方式进行过渡。这种动画常见于某些应用的导航场景，如扫描二维码时，从当前界面中间裂开并拉伸出新的Activity...
activity切换时的overridePendingTransition动画效
热门推荐
daodaowolf的专栏
12-13 2万+
注意，切换方法overridePendingTransition只能在startActivity和finish方法之后调用。 第一个参数为第一个Activity离开时的动画，第二参数为所进入的Activity的动画效果 淡入淡出效果 overridePendingTransition(R.anim.fade, R.anim.hold); 放大淡出效果 overridePendingTra
Activity过渡动画
SunnyRivers
01-17 612
Android5.0之前我们一般会使用overridePendingtransition(int inId, int outId)来给Activity增加一些切换动画，但效果差强人意。Android5.0中提供了三种Transition类型： 进入：一个进入的过渡动画决定Activity中的所有视图怎么进入屏幕。 退出：一个退出的过渡动画决定一个Activity中的所有视图怎么退出屏幕。 共
Android5.0：Activity过渡动画
qq_40571249的博客
11-30 222
Android 在5.0（API 级别 21）中提供了三种Transition 类型 进入：一个进入的过渡动画决定Activity中的所有的视图怎么进入屏幕 退出：一个退出的过渡动画决定一个Activity中的所有视图怎么退出屏幕 共享元素：一个共享因素过渡动画决定两个Activities之间的过渡，怎么共享它们的视图 进入和退出的效果包括： 1.explode（分解）-----从屏幕中间进入或...
酷炫的外部开启Activity新姿势（新增web跳转activity）
06-17
3. 用户体验：设计合理的过渡动画，使得Activity的开启过程更加流畅。 4. 测试：对不同设备、浏览器和Android版本进行充分测试，确保兼容性。 总之，通过合理配置AndroidManifest.xml，以及在Activity中处理启动...
Android的界面跳转
11-12
在Android应用开发中，界面跳转是用户交互的基础，它涉及到Activity、Intent、启动模式等多个核心概念。...在实际项目中，我们还需要考虑栈管理、回退栈行为、动画过渡等细节，以优化用户的操作体验。
Android中activity从创建到显示的基本介绍
01-20
5. **Activity的跳转与值传递**: 在Android中，我们通常使用`Intent`来启动新的Activity或传递数据。`Intent`可以携带额外的数据（key-value对），通过`putExtra`添加，然后在目标Activity的`onCreate`或`...
android 登陆+保存密码+跳转列表页
08-27
- **过渡动画**：登录成功后，可以通过`ActivityTransition`来添加平滑的页面切换动画，提升应用的质感。 7. **异常处理**： - **崩溃日志**：确保捕获和记录可能出现的异常，如网络错误、解析错误等，便于后期...
activity跳转的过渡效果，很漂亮，很全
02-10
使用方法可以参照博客：http://blog.csdn.net/i5suoi/article/details/19034257
Android5.0Activity的转场动画、过渡动画、过场动画、跳转动画
10-23
Activity的转场动画很早就有，但是太过于单调，样式也不好看，于是Google在Android5.0之后，又推出的新的转场动画，效果还是非常炫的，今天我们一起来看一下。 Android5.0之后Activity的出入场动画总体上来说可以分为两种，一种就是分解、滑动进入、淡入淡出，另外一种就是共享元素动画，下面我们分别就这两种动画进行说明：
Android转场动画-Activity_Transition
07-29
Android转场动画-Activity_Transition
Activity transition（Activity转场动画效果）
火星男孩的分享空间
09-26 2162
参考：Android5.0之Activity的转场动画Material Designer的低版本兼容实现（五）—— ActivityOptionsCompat系统内置常见转场动画：// 必须在 StartActivity() 或 finish() 之后立即调用 Intent intent = new Intent
Transition（Activity切换过渡动画）
JoneRen的博客
06-15 1507
Material Design 应用中的操作行为转换透过通用元素之间的移动和转换提供不同状态之间的视觉连接。 您可为进入、退出转换以及操作行为之间的共享元素转换指定定制动画。 活动过渡提供了两种过渡类型： 1，输入（进入）：进入一个活动的效果 2，退出（退出）：退出一个活动的效果 而这每种类型又分为普通和共享元素的过渡。 普通转型 爆炸 explode：从场景的中心移入或移出 
【Transition】Android炫酷的Activity切换效果，共享元素
abcwang1234的博客
12-14 6403
本文原项目地址为： https://github.com/lgvalle/Material-Animations 在文章最后，有我自己对着这个项目手敲的一份。 代码基本一模一样，只有略微的修改，加了一些注释，以及将其中大多数英文翻译成了中文。 此篇 API 均为 Android 5.0（API 级别 21） 以上才可支持。 此demo一共分为四部分： 1.1 普通过渡 Tran
Activity 过渡动画 — 让切换更加炫酷
你若盛开，蜜蜂自来
03-05 1万+
博主声明： 转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主威威喵原创，请多支持与指教。 本文首发于此 博主：威威喵|博客主页：https://blog.csdn.net/smile_running 介绍 在 android5.0 以上版本中，google 为我们提供了几种 activity 切换的过渡动画，目的是为了让 activity 切换...
Android——浅析Activity过渡动画
FranzLiszt的博客
11-10 4256
Activity过渡动画前言分解动画效果视频解析滑动动画效果视频解析淡出动画效果视频解析共享元素共享单个元素效果视频解析共享多个元素效果视频全部代码第一个Activity XML布局文件代码第一个Activity 代码第二个Activity XML布局文件代码第二个Activity 代码 前言 以前Activty之间得跳转非常生硬，自Android.5X后，Google对Activity的切换设计更多丰富的动画效果。 Android 5.X提供了三种Transition类型，具体如下： ✧进入:一个进人的
Android界面动画全解析：过渡与切换效果
该资源主要汇总了Android系统中UI界面的各种动态效果，特别是Activity页面切换时的动画效果，包括淡入淡出、左右滑动以及缩放等效果。 在Android应用开发中，UI界面的设计与交互体验至关重要。Activity是Android中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值