企业官网建设流程全解析

Material-Animations 项目完整指南：用一份开源示例彻底搞懂 Android Transition 动画体系

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

Material-Animations 是一个专门讲解 Android Transition 动画体系的开源示例项目。它用一套完整可运行的 Demo，覆盖Activity 过渡动画、共享元素动画（Shared Elements）、同页面 Scene 布局动画、圆形揭示动画（Circular Reveal）四大场景，是新手快速上手 Android Transition Framework 的性价比极高的学习材料。项目虽标注停止维护，但内容依然是理解这套 API 的经典参考（见 README.md 开头说明）。

一、项目结构速览：示例代码在哪里 📁

先花一分钟认识目录布局，之后查源码会非常快：

获取项目：

git clone https://gitcode.com/gh_mirrors/ma/Material-Animations

启动后，MainActivity.java 会以列表形式展示 4 个示例入口：Transitions（红色）、Shared Elements（蓝色）、View animations（绿色）、Circular Reveal（黄色）。整个 App 的"总开关"在 styles.xml 中，android:windowContentTransitions必须为true，否则所有窗口过渡动画都不生效：

<item name="android:windowContentTransitions">true</item>

二、Activity 过渡动画：Exit、Enter、Return、Reenter 一图讲清 🔄

Android 内置了 3 种预设过渡类型：Explode（爆炸）、Slide（滑动）、Fade（淡入淡出），另外还有ChangeBounds（边界变化）常用于共享元素。

它们支持两种定义方式：

• XML 声明式：写在res/transition/目录，用TransitionInflater加载，例如 explode.xml、slide_from_bottom.xml；
• 代码式：直接new Slide()/new Fade()再设置时长。

以 MainActivity.java 为例，只需两行代码就能让"打开列表"和"返回列表"都有滑动效果：

getWindow().setExitTransition(slideTransition); // A 退出 getWindow().setReenterTransition(slideTransition); // A 重新进入

一次完整的页面跳转涉及4 种过渡，这是新手最容易混淆的部分：

关键规则：如果不显式定义ReturnTransition，Android 会自动播放"反向的 EnterTransition"；定义了则优先执行自定义版本。TransitionActivity1.java 里专门做了"定义 vs 不定义返回过渡"的对比按钮，另外还演示了用excludeTarget()让某个视图不参与过渡动画（第 99-105 行），这个技巧在保留 Toolbar 不变形时非常实用。

三、共享元素动画：transitionName 是核心 🔵

共享元素（Hero View）就是那个"从小图标飞到大图"的经典效果。要牢记一点：视图并没有真的移动，Transition 框架只是用两个独立视图 + 一段动画制造了视觉错觉。

实现只需三步：

1. 开启窗口内容过渡（App 级配置一次即可，即 styles.xml 中的windowContentTransitions）；
2. 给源视图和目标视图相同的android:transitionName——这是唯一硬性的匹配条件，id可以完全不同：

<ImageView android:id="@+id/small_blue_icon" android:transitionName="@string/blue_name" />

3. 启动时携带共享元素信息：Activity 场景用ActivityOptions.makeSceneTransitionAnimation()；Fragment 场景则用事务的addSharedElement()，见 SharedElementFragment1.java：

transaction .replace(R.id.sample2_content, sharedElementFragment2) .addSharedElement(squareBlue, getString(R.string.square_blue_name)) .commit();

进阶：控制过渡重叠。Fragment 之间切换时，setAllowEnterTransitionOverlap(false)会让新 Fragment 等待旧 Fragment 完全退场后才进入（第 66-67 行），SharedElementActivity.java 中两个按钮可切换体验重叠与不重叠的差异。

四、同页面布局动画：Scene 与 beginDelayedTransition ✨

前两类都发生在"页面跳转"时，而 Transition 框架还能在不跳转页面的情况下动画化布局变化。

方式一：Scene 切换。一个 Scene 就是"UI 的静态布局状态"，用TransitionManager.go(scene, transition)在两个 Scene 间切换，框架自动计算所有可见视图的位移动画。示例的 5 个场景布局在 activity_animations_scene0.xml 到 activity_animations_scene4.xml。

方式二：延迟过渡。先"预约"动画，再随意修改布局属性，框架会自己补间。AnimationsActivity1.java 里点一下按钮就能看绿色方块改变尺寸：

TransitionManager.beginDelayedTransition(viewRoot); ViewGroup.LayoutParams params = square.getLayoutParams(); params.width = 200; // 修改宽度即可触发动画 square.setLayoutParams(params);

组合多个过渡是 XML 的强项，例如 slide_and_changebounds_sequential.xml 让 Slide 和 ChangeBounds 按顺序播放，并可给每个子过渡单独指定插值器：

<transitionSet android:transitionOrdering="sequential"> <slide android:interpolator="@android:interpolator/decelerate_cubic" /> <changeBounds android:interpolator="@android:interpolator/bounce" /> </transitionSet>

五、进阶技巧：共享元素 + 圆形揭示动画（Circular Reveal） 🎯

Material Design 中"从触点扩散开"的效果来自ViewAnimationUtils.createCircularReveal()（API 21+）。RevealActivity.java 展示了教科书式的组合玩法：

1. 共享元素从主页飞入详情页（用的是带弧线路径的 changebounds_with_arcmotion.xml）；
2. 通过TransitionListener.onTransitionEnd监听过渡结束；
3. 结束后触发 Toolbar 的圆形揭示 + 按钮逐个放大（第 246-256 行）：

Animator anim = ViewAnimationUtils.createCircularReveal( viewRoot, cx, cy, 0, finalRadius); anim.setInterpolator(new AccelerateInterpolator()); anim.start();

💡 一个容易踩的坑：共享元素过渡在退出时会反向再执行一次，所以监听器里要记得transition.removeListener(this)（第 65-72 行），否则返回时动画会被重复触发。

六、关键源码与配置文件清单（照着找就行）📚

学习路线建议：先跑通 App 看四色示例 → 对照第二节理解 4 种过渡 → 改transitionName玩共享元素 → 最后挑战第五节的组合动画。这套示例代码量极小（每个 Activity 都不超过 150 行），是"边跑边读"的最佳起点。

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