如何复刻Telegram式可折叠头部MixAnimationsMotionLayout头部收缩动画完整拆解【免费下载链接】MixAnimationsMotionLayoutEn este repo encontraras multiples ejemplos de animaciones con #MotionLayout项目地址: https://gitcode.com/gh_mirrors/mi/MixAnimationsMotionLayout想要做出 Telegram 那种「下拉头像变大、上滑头部收缩」的炫酷效果吗开源项目MixAnimationsMotionLayout收录了一套完整的 MotionLayout 动画示例其中 Telegram 头部收缩 Demo 只用一个布局文件 一个 MotionScene 场景文件就实现了全部动画是新手学习 Android 折叠头部动画的最佳范本。本文将完整拆解它的实现原理。为什么选择这个MotionLayout动画示例项目很多人实现头部收缩会写大量ObjectAnimator、ScrollListener代码又长又难维护。而 MotionLayout 的思路完全不同你只需要声明动画的起点和终点框架自动帮你补间。MixAnimationsMotionLayout 里包含十几个经典动画场景轮播、卡片堆叠、Instagram Stories 等每个场景都拆成布局与场景文件方便逐个对照学习。Telegram Demo 是其中交互最丰富、最贴近真实产品效果的一个。快速上手一键打开Telegram头部收缩Demo克隆仓库后即可运行git clone https://gitcode.com/gh_mirrors/mi/MixAnimationsMotionLayout打开 App 首页点击「Telegram Demo」按钮即可进入演示页面上下滑动即可体验完整的头部收缩动画。入口逻辑见 MainActivity.kt对应的活动类 TelegramHeaderDemoActivity.kt 只有十几行——因为所有动画都在 XML 里完成不需要写一行 Kotlin 动画代码项目内置了大量示例素材比如这张星巴克饮品图800x670就被用在 Starbucks 详情页示例的卡片中布局文件拆解MotionLayout搭好动画舞台布局文件 activity_telegram_header_demo.xml 的根节点是MotionLayout并通过app:layoutDescription指向场景文件这是整个动画的总开关MotionLayout android:idid/telegramMotion app:layoutDescriptionxml/activity_telegram_header_scene页面一共 5 个参与动画的控件控件作用headerBackground头部背景条随状态改变高度240dp → 72dpcardProfileMaterialCardView 头像卡片滑动锚点nameField/statusField姓名与状态文字字号会 28sp → 16spfabButton相机悬浮按钮收缩过程中会淡入/淡出MotionScene核心拆解4组ConstraintSet 4段Transition场景文件 activity_telegram_header_scene.xml 是全部动画的灵魂可分为两大部分四个状态快照ConstraintSetinitL59-L104初始展开态——340dp 大头像卡铺满顶部背景高 340dp姓名 28sp。collapseProfileL107-L144第一级收缩——卡片缩到 240dp文字布局不变。middleCollapseL147-L207中间态——头像缩小成 96dp 圆形radius设为 50dp、移到左上角背景降到 188dpFAB 按钮通过PropertySet变为可见姓名缩至 18sp。finishCollapseL210-L268最终收缩态——头像 56dp、背景仅 72dpFAB 隐藏姓名 16sp与标准工具栏高度一致。 注意middleCollapse使用了motion:deriveConstraintsFromid/collapseProfile只写与上一状态不同的属性避免重复配置文件更精简。四段过渡Transition串联状态Transition motion:constraintSetStartid/init motion:constraintSetEndid/collapseProfile motion:duration600 OnSwipe motion:dragDirectiondragUp motion:touchAnchorIdid/cardProfile motion:touchAnchorSidebottom / /Transitioninit → collapseProfiledragUp上滑触发600ms完成第一级收缩L5-L14。collapseProfile → middleCollapseautoTransitionanimateToEnd自动衔接300ms 无需用户操作动画无缝续上L35-L48。middleCollapse → finishCollapse继续上滑完成最终收缩FAB 淡出。finishCollapse → initdragDown下拉可完整恢复初始大头像状态。OnSwipe的touchAnchorId指定了cardProfile作为手势锚点所以手指必须落在头像卡片区域才会响应这正是 Telegram 头像抓着走的手感来源。三个最值得偷师的关键技巧CustomAttribute动画非布局属性圆角radius和字号textSize不是布局约束MotionLayout 靠它也能平滑插值实现方形大卡片 → 圆形小头像的形态渐变这是整段动画最惊艳的细节 ✨PropertySet控制显隐FAB 的visibility在middleCollapse里设为visible、在finishCollapse里设为invisible显隐切换与位移动画完美同步无需额外代码。KeyPosition定制运动轨迹恢复动画中用deltaRelative让头像先横向滑出再回落收缩动画用pathRelative让头像走弧形路径见 L21-L27 与 L40-L47告别生硬的直线位移。动手改造最快自定义你的头部收缩效果改速度调整各Transition的motion:duration600/300ms即可改变收缩节奏。改终态把finishCollapse中headerBackground高度从 72dp 改成 96dp就能做出加高工具栏的效果。改手势范围修改OnSwipe的touchAnchorId让整页任意位置都能触发滑动。加内容联动在布局中给列表区域增加顶部约束让它跟随头部高度自动顶起。总结这套 Telegram 式头部收缩动画的精髓在于把复杂动画拆成 4 个状态快照 4 段过渡用CustomAttribute、PropertySet、KeyPosition三个高级特性补齐全局效果全程零 Kotlin 动画代码。对照 场景文件 和 布局文件 逐个状态修改10 分钟就能搭出属于你自己的折叠头部 【免费下载链接】MixAnimationsMotionLayoutEn este repo encontraras multiples ejemplos de animaciones con #MotionLayout项目地址: https://gitcode.com/gh_mirrors/mi/MixAnimationsMotionLayout创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考