简介这套加载动画复刻方案面向Android开发初学者与中级工程师以招商银行App中常见的圆形loading效果为切入点演示如何通过自定义Dialog与旋转动画组合实现可复用的加载反馈控件。资源包含1465个文件压缩包约21.06MB其中612张png图片覆盖各屏幕密度下的切图素材561个xml配置涵盖布局文件、主题样式、动画资源与数据类型定义另有java源码、aidl接口、properties配置、dex编译产物等可直接对照Android工程目录理解从界面到动画的完整实现脉络。目前已有9146人学习下载。内容从编写布局、设置Dialog主题、继承自定义Dialog到配置旋转动画逐步展开并附带可运行apk调试包与工程配置文件适合希望快速掌握自定义加载控件原理或需要向自己的项目中移植该类型loading动效的开发者。 “仿招商银行loading”看着像一个小动效实际上是整条启动链里最容易翻车的一段。大部分团队拿到类似需求时第一反应是“放个转圈能转就行”结果做出来要么显得廉价要么在低端机上卡成PPT。招行那套loading动画真正的价值不在“转圈”本身而在品牌logo先入、再形变成圆环、最后循环等待的节奏感以及它和首页路由切换之间的无缝衔接。这篇文章就围绕“怎么把这条启动链仿出来、调好、不踩坑”展开适合正在做App冷启动体验、被产品和UI要求“要有质感”的客户端和前端工程师。2. 拆解招行loading动效的结构关键帧、节奏与选型2.1 把启动动画拆成四个关键帧拿到仿招商银行loading的需求第一件事不是开AE而是把一个成品动画拆成可描述的帧序列。我习惯用“关键帧 时间段”的结构来定义需求这样动画师、客户端、测试才能对齐标准否则验收全靠“感觉不对”。以招行App给我的体感为例它的启动动画按时间轴拆大概是这张表时间段画面内容运动曲线作用0-300ms品牌logo从透明渐显轻微放大ease-out品牌亮相不突兀300-900mslogo整体或局部图形收缩、变换往画面中心聚拢ease-in-out视觉焦点转移到中心900-1200ms中心图形拉伸成圆环缺口旋转开始ease-out从“品牌端”过渡到“加载端”1200ms-页面就绪圆环持续旋转可带微弱光效或百分比linear循环等待不抢注意真正决定质感的是第二段那个“logo收拢成圆环”的形变。很多仿制版翻车就是因为直接把logo丢在那儿然后旁边另起一个圆环转视觉上是两套东西没有“同一个元素在变化”的连续感。招行这套动效的核心逻辑是“一个元素变形成另一个元素”而不是“两个元素同时出现”。时间轴参数也需要明确定义。总时长建议控制在2-2.5秒其中“品牌形变段”最多占一半。如果产品要求“越快进入主页越好”可以压缩渐变时间但不要压缩形变时间形变是用户感知品牌质感的关键段省掉它就跟普通菊花loading没区别了。2.2 为什么用Lottie而不是序列帧加载动画选型对比明确了关键帧结构之后接下来是选型。做仿招商银行loading这种品牌形变动效业内最常见的做法是Lottie也有团队用SVGA或序列帧还有人直接用原生代码写。我自己的选型标准是跨端一致性、包体增量、还原成本和性能损耗四个维度对比下来方案跨端一致性包体增量内存占用还原成本适用场景LottieBodymovin导出JSON高同一JSON四端同渲染几KB到几十KB中矢量路径运行时计算低AE导出即用形状/路径形变类动效SVGA高但依赖播放器版本略大含二进制资源中中需要专用工具导出序列帧混合场景序列帧/APNG/GIF高本质是图片大几十张图高每帧是位图高需要逐帧出图光效粒子、无法矢量化的效果原生代码Flutter CustomPainter / Android属性动画低各端重写极小低高每端配一位人力极简转圈、进度环仿招商银行loading的视觉核心是“logo路径收拢成圆环”这是典型的矢量路径插值动画Lottie的JSON天然支持shape层的路径关键帧补间产出体积小、跨端一致所以我的建议很明确主流程用Lottie序列帧只用于点缀类光效而且能不用就不用。用Lottie有一个前置条件——团队里得有能操作AE的人。如果公司没有动画师这条路就走不通。这时候常见的替代方案是用原生代码拼Flutter里用CustomPaint画一个圆环、再配一个logo渐隐渐显的AnimatedOpacity也能做出来但形变那一下很难做到丝滑而且Android/iOS/Web要分三套代码维护。所以我一般建议产品经理去协调设计资源而不是用代码硬顶。3. 用Lottie把这个loading动画落地导出设置、四端接入与核心代码3.1 从AE到JSON导出设置与资源整理Lottie的JSON不是“导出即能用”中间有一堆设置决定了它到端上是流畅还是卡顿。我让动画师导文件时会强制按下面这张清单检查设置项推荐值原因AE版本与Bodymovin插件版本保持匹配插件用最新版本不匹配会导出损坏JSON帧率30fps60fps转JSON体积翻倍圆环旋转场景肉眼几乎无差画布尺寸750×1334或2倍屏以主流设计稿为基准导出缩放交给端上背景透明背景 端上铺品牌底色方便不同机型适配颜色避免JSON内嵌死图片图层类型形状图层优先禁止文字图层文字图层在部分端上会因字体缺失而走样表达式尽量烘焙成关键帧Bodymovin对复杂表达式支持不完整图片资源尽量转成shape少量jpg/png位图会撑大JSON且缩放失真这套清单的核心逻辑是“让动画师在AE里就把坑填平”。最常见的问题是动画师用了文字图层写品牌名预览时没问题一到Android上字体缺失直接显示成方块。第二个高频问题是导出时忘了把表达式烘焙导致真机上动效卡顿甚至直接失败。所以拿到JSON后我会先做一次静态检查用文本编辑器打开看assets字段里有没有多余位图看fr帧率是不是30看图层里有没有t文字类型的对象。3.2 Flutter端接入两个JSON分段播放是最稳的写法Flutter里用Lottie最让我不放心的是“一个JSON里既有一段式品牌亮相、又有循环等待段”如果直接整段循环用户会反复看到logo重新形变视觉上很闹心。我采用的常见做法是把动效拆成两个JSONsplash_intro.json负责logo形变成圆环这一段播完立即切换到splash_loop.json后者只有圆环旋转循环。import package:flutter/material.dart; import package:lottie/lottie.dart; class SplashLoading extends StatefulWidget { const SplashLoading({super.key}); override StateSplashLoading createState() _SplashLoadingState(); } class _SplashLoadingState extends StateSplashLoading with SingleTickerProviderStateMixin { late final AnimationController _introController; late final AnimationController _loopController; bool _showLoop false; override void initState() { super.initState(); _introController AnimationController(vsync: this); _loopController AnimationController(vsync: this); } override void dispose() { _introController.dispose(); _loopController.dispose(); super.dispose(); } void _onIntroLoaded(LottieComposition composition) { // 首段只播放一次播完回调里切到循环段 _introController.duration composition.duration; _introController.forward().whenComplete(() { setState(() _showLoop true); _loopController.repeat(); }); } override Widget build(BuildContext context) { return Scaffold( backgroundColor: const Color(0xFFB71C1C), body: Center( child: _showLoop ? Lottie.asset( assets/splash_loop.json, controller: _loopController, width: 240, height: 240, fit: BoxFit.contain, ) : Lottie.asset( assets/splash_intro.json, controller: _introController, onLoaded: _onIntroLoaded, width: 240, height: 240, fit: BoxFit.contain, ), ), ); } }这段代码的逻辑是页面启动时播放intro段动画完成后通过whenComplete切换到loop段由loopController.repeat()让圆环无限旋转直到首页路由就绪。拆成两个JSON的好处是不需要依赖animation区间截取避免部分端上区间截断导致首尾帧跳变。参数说明里我最看重的是_introController.duration composition.duration这一行。Lottie的JSON是异步加载的不能在initState里硬编码时长否则一换设计稿时长客户端就不同步。从composition.duration读取才是对的。品牌色近似用了0xFFB71C1C实际值以设计稿为准这段颜色最好由主题统一管理不要散落写到页面里。3.3 Android/iOS/Web接入差异一个JSON多处复用Flutter团队可以统一处理但很多项目是各端独立开发。这里我把接入要点列一下方便各端对照平台承载控件资源放置位置关键参数AndroidLottieAnimationViewres/rawlottie_rawRes、lottie_loop、lottie_repeatModeiOSLottieAnimationViewLottie- iOS主Bundle或指定目录animation LottieAnimationView(name:)loopMode .loopWeblottie-web的loadAnimationpublic目录或CDNrenderer: svg、loop: true/false以Web端为例核心代码很短import lottie from lottie-web; const loopAnim lottie.loadAnimation({ container: document.getElementById(splash-loading), renderer: svg, loop: true, autoplay: true, path: /assets/splash_loop.json, });Web端的坑是字体和性能如果JSON里残留了文字图层且页面没有相应字体会直接白屏渲染器建议用svg而不是canvas圆环旋转场景下svg的清晰度和性能都更可控。是像素级还原还是要体积最小选渲染器时的参考标准。原生端把JSON和Flutter复用前提是AE导出时不要勾选“依赖特定字体”或嵌入系统资源。如果动画师用了特殊字体记得先把文字转成形状图层再导出否则iOS和Android渲染结果不一致这算是做Lottie最隐蔽的坑。4. 仿招商银行loading常见问题排查5个真实的坑4.1 现象动效播完闪一下黑屏才进首页疲劳调试时最容易遇到的现象是loading动画播完页面先黑一下然后才跳到首页。原因不是动画本身而是动画容器销毁和新路由入场之间的“空窗期”Flutter里Navigator.push替换页面时旧页面背景是透明或纯黑的新页面还没完成首帧绘制就露出了底层的黑。解决这个问题我一般会在Scaffold的backgroundColor上沿用品牌色同时用PageRouteBuilder自定义转场让动效页面和新页面之间的背景色连续。另外如果首页有大量图片或网络请求需要提前把首页的骨架帧构建出来避免首帧卡顿造成“闪黑”的错觉。4.2 现象JSON动效在低端机掉帧、首帧白屏很多仿招商银行loading的翻车现场都集中在低端Android机上圆环转起来一顿一顿或者页面打开先白屏半秒动画才出现。原因一般出在AE导出设置上帧率60fps、表达式未烘焙、图层里有模糊或阴影滤镜这些都让运行时计算量成倍上涨。解决这个问题的常见套路是AE导出帧率降为30fps把粒子或光效图层用形状图层重绘阴影滤镜能去则去背景色由客户端铺底不要依赖动画首帧。另外低端机白屏还有个原因是JSON体积太大下载或解压耗时。如果JSON超过200KB建议拆段或压缩路径点精度不要让它拖后腿。4.3 现象日志报“加载失败/初始化失败”类错误动效不渲染在桌面端调试或模拟器上经常看到LOG里出现“error loading”或“动态链接库(DLL)初始化例程失败”之类的东西然后Lottie动画区域一片空白。这种报错有一种典型的误判以为JSON坏了其实是宿主环境的问题。桌面端常见的“DLL初始化例程失败”往往和系统C运行库缺少组件有关模拟器上的“初始化失败”则多与GPU/OpenGL驱动有关本质上是“渲染环境初始化失败”不是Lottie资源的问题。排查这类问题的顺序是换真机验证→如果真机正常就是宿主环境缺组件按桌面端错误码补装对应运行库或在模拟器设置里切换渲染后端。如果真机也失败再看JSON是否在同一个设备上被其他端成功渲染过。将“资源加载失败”和“渲染环境初始化失败”分开排查会快很多。4.4 现象Android上资源路径对但组件空白这里有一个经典坑把JSON放到了assets/目录但Lottie默认从res/raw读取或者文件名大小写不一致导致“路径对了但读不到”。还有一种情况是多个module引用了同名JSON构建时打进了错误的资源。解决方法是统一规范Android原生项目中Lottie JSON放在app/src/main/res/raw下文件名小写字母、数字和下划线组成通过app:lottie_rawRessplash_loop引用不要带.json后缀。如果项目必须用assets目录就用setAnimationFromJson把本地JSON读成字符串再设置动画两手准备能省去很多无谓排查。4.5 现象iOS端动效正常退后台回来卡死或停在半透明帧iOS上常见的翻车是loading动画播放中按Home键退后台再回前台时动画卡住或停在半透明状态。原因一般是App进入后台时AnimationController没有暂停回前台后时间基线错乱另一个原因是循环动画实例没释放被系统在低内存时清理后重建出错。解决方式很简单监听AppLifecycleState在paused状态暂停动画控制器在resumed状态继续播放。同时保证全局只有一个loading动效实例页面销毁时及时dispose掉controller。这条之前属于“写起来容易忘起来更容易”的问题建议写进团队的代码规范。5. 进阶把loading动画做成可配置的启动策略动效写完后工程上最后一步是给它加“保险丝”和“验证尺”。我给启动动效加了两个东西超时保护和播放完成打点。超时保护解决的是“动画还没播完页面数据已经就绪”或“动画迟迟播不完”两种极端情况。具体做法是下一个远端配置约定最晚跳转时间超时后不管动效播到哪强制进首页。void reportSplashMetric(DateTime start) { final firstFrameMs _firstFrameElapsed; // 动效首帧渲染完成的耗时 final animCompleteMs DateTime.now().difference(start).inMilliseconds; analytics.track(splash_metric, { firstFrameMs: firstFrameMs, animCompleteMs: animCompleteMs, deviceModel: deviceModel, }); }埋点里最值得看两个值firstFrameMs决定首屏是否让人觉得慢animCompleteMs和“首页可点击时间”的差值决定动效是否拖了后腿。验证方法也建议固化录屏后每100ms抽一帧和设计稿逐帧对比重点看“logo形变成圆环”的那段是否有肉眼可见的跳变。这一套做完之后loading动画的基本盘才算真正稳住。做一个项目就长一个教训我现在最深的体会是所有启动动效都必须带超时保护没有例外。产品说你“加个动画”你就得预留降级开关、准备好提前跳转的策略否则一遇到线上弹窗或广告SDK抢焦点loading动画就会变成“卡死动画”。细节扛住了质感才能留下来希望帮到你。本文还有配套的精品资源点击获取
