Material-Animations ArcMotion 实战指南：几行 XML 让共享元素动画走出弧线轨迹
Material-Animations ArcMotion 实战指南几行 XML 让共享元素动画走出弧线轨迹【免费下载链接】Material-AnimationsAndroid Transition animations explanation with examples.项目地址: https://gitcode.com/gh_mirrors/ma/Material-AnimationsMaterial-Animations 是一个讲解 Android Transition 过渡动画框架的开源示例项目涵盖 Activity 切换过渡、共享元素过渡Shared Element Transition和布局场景动画三大类效果。本篇聚焦其中一个最高级感的技巧用短短几行 XML让共享元素在两个页面之间沿弧线ArcMotion而非直线移动。默认情况下 ChangeBounds 过渡是直线位移加入 ArcMotion 后轨迹会自然弯曲更接近 Material Design 的抛物线手势感而改动量几乎可以忽略不计。什么是 ArcMotion一句话讲清ArcMotion是 Android 过渡框架内置的弧线运动组件可以嵌套在 ChangeBounds、Slide 等过渡内部使用。它的作用只有一个把原本直线的视图位移改造成一段圆弧轨迹。你通过三个属性控制弧线maximumAngle最大偏转角度弧线最弯能弯到什么程度minimumHorizontalAngle水平位移达到该角度比例后强制启用弧线minimumVerticalAngle垂直位移达到该角度比例后强制启用弧线下面这张图就是共享元素过渡的基本原理两个 Activity 中各有一个视图通过相同的transitionName关联起来框架自动补间位移与缩放中间的虚线就是视图移动的轨迹——而 ArcMotion 改变的正是这条轨迹的形状。核心一份只有 10 行的 ArcMotion XML整个弧线效果的全部秘密都在这份过渡资源文件里位于 changebounds_with_arcmotion.xml?xml version1.0 encodingutf-8? transitionSet xmlns:androidhttp://schemas.android.com/apk/res/android android:durationinteger/anim_duration_long android:interpolatorandroid:interpolator/decelerate_cubic changeBounds arcMotion android:maximumAngle90 android:minimumHorizontalAngle90 android:minimumVerticalAngle0 / /changeBounds /transitionSet逐行解读这份 Android ArcMotion 弧线配置属性含义调参建议android:duration过渡总时长用资源引用统一管理便于全局调整android:interpolator时间插值器decelerate_cubic先快后慢最贴合甩出-落定的手势感maximumAngle90弧线最大角度值越大弧线越弯一般 30~90 之间minimumHorizontalAngle90水平方向强制走弧线的阈值保证横向位移一定出弧线minimumVerticalAngle0垂直方向强制走弧线的阈值设为 0 表示垂直位移也始终带弧度两个关键理解ArcMotion 是 changeBounds 的子节点——它不是独立过渡而是挂载在 ChangeBounds 内部只负责改写位移路径其余逻辑缩放、圆角渐变等仍由 ChangeBounds 处理。文件里还留了一行注释掉的patternPathMotion那是另一种指定任意自定义路径的方式日常场景用 ArcMotion 的自动弧线就足够了。三步接入从直线到弧线的最短路径第 1 步开启窗口内容过渡在 values/styles.xml 的主题中加入一行全局生效item nameandroid:windowContentTransitionstrue/item第 2 步给源/目标视图起同一个 transitionName两个页面中的视图可以 id、尺寸完全不同只要android:transitionName一致Transition 框架就会把它们视为同一个元素。第 3 步inflate 这份 XML 并设为共享元素过渡项目的 RevealActivity.java 给出了完整用法核心只有两行Transition transition TransitionInflater.from(this) .inflateTransition(R.transition.changebounds_with_arcmotion); getWindow().setSharedElementEnterTransition(transition);启动 Activity 时再通过ActivityOptions.makeSceneTransitionAnimation()传入共享视图弧线过渡即刻生效。同一份 XML 也可以用在同一页面内的布局变化上配合TransitionManager.beginDelayedTransition见 RevealActivity.java 中revealRed()的用法——红方块从按钮位置弧线飞回屏幕中央再触发 Circular Reveal 变色就是这套组合拳的典型效果。为什么返回值动画也要考虑轨迹返回时走的是 Return/Reenter 过渡如下图所示。如果你只设置了 Enter 过渡返回时框架会默认执行其反向动画弧线轨迹会自动对称回来若想返回时干脆换一种风格例如项目里的 RevealActivity 用了一个延迟执行的Fade作为返回过渡则单独设置returnTransition即可。避坑清单新手最容易踩的 4 个坑忘了windowContentTransitions不加这行共享元素过渡完全不触发界面会闪切日志里也没有明显报错是最常见的静默失败。transitionName 不唯一同一个 layout 内两个视图用了相同 name框架会随机匹配导致错误的元素飞出去。ArcMotion 写成了独立过渡arcMotion必须作为changeBounds或 slide的子节点出现单独放在 transitionSet 里不会生效。监听器忘记移除共享元素过渡在退出时会反向再执行一次onTransitionEnd里写的代码比如触发 Circular Reveal会被执行两次。RevealActivity 里特意做了transition.removeListener(this)这是容易被忽略的细节。更多可练手的过渡组合项目res/transition/目录下还有几份现成的组合模板建议配合本篇的 ArcMotion 一起调试slide_and_changebounds.xmlSlide 与 ChangeBounds 并行slide_and_changebounds_sequential.xml两者顺序执行transitionOrderingsequentialslide_and_changebounds_sequential_with_interpolators.xml为不同阶段指定不同插值器bounce、decelerate_cubic节奏感立刻不同explode.xmlExplode 过渡 bounce 插值器想要完整可运行的工程可以克隆仓库体验git clone https://gitcode.com/gh_mirrors/ma/Material-Animations总结目标改动量让共享元素走出弧线轨迹1 份约 10 行的 XML 1 行 inflate控制弧线弯曲程度调maximumAngle一个值控制出/落节奏换interpolator一个引用Material-Animations 用这个最小示例证明了 Android Transition 框架的可组合性过渡本身、路径ArcMotion、节奏Interpolator三者正交各自独立可调。掌握XML 定义过渡 → TransitionInflater 加载 → 挂载到 Window/Scene这条主线后你几乎可以用同样套路拼装出任何定制化的页面转场。【免费下载链接】Material-AnimationsAndroid Transition animations explanation with examples.项目地址: https://gitcode.com/gh_mirrors/ma/Material-Animations创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考