企业官网建设流程全解析

如何做出丝滑的 Android Activity 转场动画：Material-Animations 的 Fade、Slide、Explode 三件套实战教程

【免费下载链接】Material-AnimationsAndroid Transition animations explanation with examples.项目地址: https://gitcode.com/gh_mirrors/ma/Material-Animations

想让 App 页面切换告别生硬的"跳切"？Material-Animations 是一套讲解 AndroidTransition 转场动画框架的开源示例工程，完整演示了Fade（淡入淡出）、Slide（滑动）、Explode（扩散）三件套如何组合出 Material 风格的丝滑转场。本文面向新手，用最少的代码带你跑通从配置到上手的全流程。

一、30 秒认识 Material-Animations

这个仓库把转场动画拆成 4 个核心场景，每个场景对应一个独立 Activity，便于对照学习：

💡 仓库目前标注为UNMAINTAINED（停止维护），但其中的转场原理和写法依然完全有效，是学习 Android 转场动画的绝佳"活教材"。

二、先懂原理：一次转场到底在动什么

很多人写转场动画"凭感觉"，其实是没搞懂四个关键概念。当Activity A启动Activity B时，系统会自动执行两个动作：

• ExitTransition（退出）：由A定义，A的内容如何"离场"
• EnterTransition（进入）：由B定义，B的内容如何"入场"

按下返回键时则反过来，执行ReturnTransition与ReenterTransition。如果没有手动指定，系统会自动播放 enter/exit 的逆向动画作为兜底：

理解这四点，你就能精准控制"前进"和"后退"各自的动效，而不是让它们一模一样。

三、三件套逐个拆解：Fade、Slide、Explode

Android 的android.transition.Transition内置了三种开箱即用的转场，本仓库对每个都提供了可运行示例。

1️⃣ Fade：最稳的淡入淡出

适合"信息量小、不想抢注意力"的页面。在 TransitionActivity1.java 中可以看到：

private Visibility buildEnterTransition() { Fade enterTransition = new Fade(); enterTransition.setDuration(getResources().getInteger(R.integer.anim_duration_long)); // 排除某个视图，让它不受进入转场影响 enterTransition.excludeTarget(R.id.square_red, true); return enterTransition; }

excludeTarget()是个实用小技巧：可以"点名"某些视图不参与动画，避免整屏一起闪。

2️⃣ Slide：左右/上下滑动

MainActivity用Slide定义了从左侧滑入的转场，并通过setSlideEdge(Gravity.LEFT)控制方向（见 MainActivity.java）。想让某个视图从底部滑入，只需把 slideEdge 换成bottom。

3️⃣ Explode：逐元素扩散飞入

TransitionActivity2.java 里的Explode会让布局中的每个子视图从中心"炸开"式地飞到位，视觉冲击力最强，适合列表/卡片类页面。

四、实战步骤：声明式 vs 编程式，两种写法都能跑

步骤 1：开启"内容转场"总开关（关键！）

转场动画的第一步是全局开启窗口内容转场，只写一次即可。在 styles.xml 中：

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

⚠️ 漏掉这一行，后面所有转场都会"哑火"，这是新手最常踩的坑。

步骤 2：声明式——用 XML 定义转场

把转场写成 XML 资源，放到res/transition/目录即可复用。比如 explode.xml：

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <explode android:duration="@integer/anim_duration_long" android:interpolator="@android:interpolator/bounce" /> </transitionSet>

再用TransitionInflater一行加载：

Transition t = TransitionInflater.from(this).inflateTransition(R.transition.explode); getWindow().setEnterTransition(t);

步骤 3：组合转场，让动效更高级

仓库还展示了把多种转场"叠加"的进阶玩法。例如 slide_and_changebounds.xml 把Slide和ChangeBounds合并；而 slide_and_changebounds_sequential_with_interpolators.xml 用transitionOrdering="sequential"让它们依次执行，并各自配上不同的插值器（缓动曲线）——这正是"丝滑感"的来源。

五、共享元素：跨页面"元素搬家"

转场的天花板是共享元素（Shared Element）——让 A 页的一个小图标"飞"到 B 页变成大图，营造空间连续感。它的核心是"同名联动"：

三步走：

1. 给两个视图相同transitionName（id 可以不同，名字必须相同），如 a_b_shared_element.png 所示；
2. 启动时用ActivityOptions.makeSceneTransitionAnimation()指定"起点视图 + 名字"；
3. 系统自动生成位移 + 变形动画，视图本身并没有真的在移动，它只是两个独立视图间的视觉错觉。

小技巧：启动时若把状态栏、导航栏加入转场参与者，能避免系统 UI 闪动，可参考 TransitionHelper.java 的封装。

六、让动画更丝滑的 4 个调优技巧

• ⏱控制时长：项目把动画时长抽成资源，见 dimens.xml（medium=300ms、long=500ms）。转场建议落在 300~500ms，太长显拖沓。
• 📉选对插值器：decelerate_cubic让入场"减速落地"，bounce带轻微回弹，比默认线性自然得多。
• 🚫排除无关视图：用excludeTarget()让标题栏等元素保持静止，动感更聚焦。
• 🔁区分前进/后退：为 Return/Reenter 单独定义转场，避免"前进是滑入、后退却是反向滑入"的违和感。

七、相关文件与模块路径速查

想亲手跑一遍，克隆仓库即可（注意仓库为只读，请勿修改）：

git clone https://link.gitcode.com/i/2a88165cb722216b127d6f415bbbe0be

总结一下：开启windowContentTransitions→ 用 Fade/Slide/Explode 定义 enter/exit 转场 → 需要空间连续感时上共享元素 → 最后用插值器和时长微调，一套丝滑的 Android Activity 转场动画就成型了。照本文步骤，新手也能 20 分钟内做出 Material 级转场！

【免费下载链接】Material-AnimationsAndroid Transition animations explanation with examples.项目地址: https://gitcode.com/gh_mirrors/ma/Material-Animations