今天聊一个比较有意思的 Flutter 动画实现，如果需要实现一个如下图的 3D 折叠动画效果，你会选择通过什么方式？

相信可能很多人第一想法就是：在 Dart 里通过矩阵变换配合 Canvas 实现。

因为这个效果其实也算「常见」，在目前的小说阅读器场景里，类似的翻页效果基本都是通过这个思路完成，而这个思路以前我也「折腾」过不少，比如 《炫酷的 3D 卡片和帅气的 360° 展示效果》 和 用纯代码实现立体 Dash 和 3D 掘金 Logo ，就是在 Dart 里利用矩阵变换实现的视觉 3D 效果。

但是今天通过一个叫 riveo_page_curl 的项目，提供了不一样的实现方式，那就是通过自定义 Fragment Shaders 实现动画 ，使用自定义 shaders 可以直接使用 GLSL 语言来进行编程，最终达到通过 GPU 渲染出更丰富图形效果。

解释这个项目之前，我们先聊聊 Fragment Shader ，Flutter 在 3.7 开始提供 Fragment Shader API ，顾名思义，它是一个作用于片段的着色器，也就是通过 Fragment Shader API ，开发者可以直接介入到 Flutter 渲染管道的渲染流程中。

那么直接使用 Fragment Shader 而不使用 Dart 矩阵变换的好处是什么？简单来说就是可以减少 CPU 的耗时，直接通过图形语言（GLSL）直接给 GPU 发送指令，从性能上无疑可以得到提升，并且实现会更简洁。

不过加载着色器这个行为的开销可能会比较大，所以必须在运行时将它编译为适当的特定于平台的着色器。

当然，在 Flutter 里使用 Fragment Shader 也是有条件限制的，例如一般都需要引入 #include这个头文件，因为在编写着色器代码时，我们都需要知道当前片段的局部坐标的值，而 flutter/runtime_effect.glsl 里就提供了 FlutterFragCoord().xy; 来支持访问局部坐标，而这并不是标准 GLSL 的 API 。

另外， Fragment Shader 只支持 .frag 格式文件， 不支持顶点着色文件 .vert ，同时还有以下限制：