flutter 动画卡顿, 着色器编译,已解决

近期项目进入收尾阶段, 业务问题处理完毕,但第一次安装应用时候动画会比较卡,主要表现在push新页面和底部弹窗上面, 最初以为是内存问题, debug状态内存占到了500M 按道理也不算太高， 不至于卡顿。

第一时间在交流群里咨询,没有什么结果,就不断的去查找原因.

一、 终于功夫不负有心人, 找到了问题所在:----shaders编译卡顿

1、如果一个App在第一次运行时出现了animation卡顿，后来相同的animation却变得流畅，那么很可能是shaders编译 导致的卡顿。
2、从技术上讲，shaders是在 GPU（图形处理单元）上运行的一段代码。 首次使用shaders时，需要在设备
上对其进行编译。 编译可能会花费数百毫秒，而流畅的显示帧需要在 16 毫秒内绘制，才能实现 
60 fps（每秒帧数）的显示。
3、因此，一次编译可能会导致数十帧丢失，并将 fps 从 60 降至 6。这就是编译卡顿。 在编译完成后，
animation应该是流畅运行的。

二、找到了原因,那么就需要处理这个问题.

解决办法为: SkSL warmup

简单讲,就是我们在打包前先把相关的动画运行一遍, 并换存在一个SkSL本地文件中, 打包时候把这个SkSL
文件打进app安装包里面, 从而解决动画卡顿的问题

三、具体解决变异卡顿的步骤

1、运行app(手机真机)
命令: flutter run --profile --cache-sksl --purge-persistent-cache
// 执行完app启动起来,   将原本卡顿的页面或者动画相关的业务执行一遍,尽可能多

四、将动画缓存到本地SkSL文件中

2、命令: M

五、项目文件中产生一个新文件flutter_01.sksl.json

六、根据自己的需要进行打包

3、打包成app(自己导出ipa即可进行真机测试)
命令: flutter build ios --bundle-sksl-path 生成的文件名.sksl.json
4、打包成ipa用于发布到app store
命令: flutter build ipa --bundle-sksl-path 生成的文件名.sksl.json
5、混淆打包
命令: flutter build ipa --bundle-sksl-path 生成的文件名.sksl.json --obfuscate --split-debug-info=debug_info

七、补充一下安卓打包

命令: flutter build apk --target-platform android-arm64 --split-per-abi --obfuscate --split-debug-info=debug_info

八、Xcode直接打包如何使用sksl.json

1、需要把生成的sksl.json文件引入到项目中去

2、查看是否引入成功

如果未引入成功, 点击+手动添加即可
3、打包-正常archive

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。

相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。

欢迎大家一键三连支持，若需要文中资料，直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓（文末还有ChatGPT机器人小福利哦，大家千万不要错过）

PS:群里还设有ChatGPT机器人，可以解答大家在工作上或者是技术上的问题