ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

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

如何做出丝滑的 Android Activity 转场动画:Material-Animations 的 Fade、Slide、Explode 三件套实战教程 如何做出丝滑的 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便于对照学习场景对应 Activity演示内容 页面转场TransitionActivity1.javaFade、Slide 的 enter/exit/return 扩散转场TransitionActivity2.javaExplode 逐元素飞入 共享元素SharedElementActivity.java跨页面元素联动 圆形揭示RevealActivity.javaCircular Reveal 组合 仓库目前标注为UNMAINTAINED停止维护但其中的转场原理和写法依然完全有效是学习 Android 转场动画的绝佳活教材。二、先懂原理一次转场到底在动什么很多人写转场动画凭感觉其实是没搞懂四个关键概念。当Activity A启动Activity B时系统会自动执行两个动作ExitTransition退出由A定义A的内容如何离场EnterTransition进入由B定义B的内容如何入场按下返回键时则反过来执行ReturnTransition与ReenterTransition。如果没有手动指定系统会自动播放 enter/exit 的逆向动画作为兜底理解这四点你就能精准控制前进和后退各自的动效而不是让它们一模一样。三、三件套逐个拆解Fade、Slide、ExplodeAndroid 的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 nameMaterialAnimations parentstyle/Theme.AppCompat.Light.NoActionBar item nameandroid:windowContentTransitionstrue/item /style⚠️ 漏掉这一行后面所有转场都会哑火这是新手最常踩的坑。步骤 2声明式——用 XML 定义转场把转场写成 XML 资源放到res/transition/目录即可复用。比如 explode.xmltransitionSet xmlns:androidhttp://schemas.android.com/apk/res/android explode android:durationinteger/anim_duration_long android:interpolatorandroid: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 用transitionOrderingsequential让它们依次执行并各自配上不同的插值器缓动曲线——这正是丝滑感的来源。五、共享元素跨页面元素搬家转场的天花板是共享元素Shared Element——让 A 页的一个小图标飞到 B 页变成大图营造空间连续感。它的核心是同名联动三步走给两个视图相同transitionNameid 可以不同名字必须相同如 a_b_shared_element.png 所示启动时用ActivityOptions.makeSceneTransitionAnimation()指定起点视图 名字系统自动生成位移 变形动画视图本身并没有真的在移动它只是两个独立视图间的视觉错觉。小技巧启动时若把状态栏、导航栏加入转场参与者能避免系统 UI 闪动可参考 TransitionHelper.java 的封装。六、让动画更丝滑的 4 个调优技巧⏱控制时长项目把动画时长抽成资源见 dimens.xmlmedium300ms、long500ms。转场建议落在 300~500ms太长显拖沓。选对插值器decelerate_cubic让入场减速落地bounce带轻微回弹比默认线性自然得多。排除无关视图用excludeTarget()让标题栏等元素保持静止动感更聚焦。区分前进/后退为 Return/Reenter 单独定义转场避免前进是滑入、后退却是反向滑入的违和感。七、相关文件与模块路径速查文件说明app/src/main/res/transition/所有声明式转场 XML 定义app/src/main/java/com/lgvalle/material_animations/各场景 Activity 源码app/src/main/res/values/styles.xml窗口内容转场全局开关app/src/main/res/values/dimens.xml动画时长常量想亲手跑一遍克隆仓库即可注意仓库为只读请勿修改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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表