Flutter 小技巧之不一样的思路实现炫酷 3D 翻页折叠动画
发布网友
发布时间：2024-10-08 16:37
共1个回答
热心网友
时间：2024-11-20 13:35
这种效果在当前的小说阅读器场景中非常常见，而类似的翻页效果通常是通过这种思路实现的。例如，我曾经尝试过的《炫酷的3D卡片和帅气的360°展示效果》以及《用纯代码实现立体Dash和3D掘金Logo》都是利用矩阵变换实现的视觉3D效果。
然而，今天我要介绍一个名为riveo_page_curl的项目，它提供了一个与众不同的实现方法，即通过自定义Fragment Shaders来实现动画。这种方式允许开发者使用GLSL语言进行编程，从而通过GPU渲染出更丰富的图形效果。
在介绍这个项目之前，我们先来了解一下Fragment Shader。自Flutter 3.7版本开始，就提供了Fragment Shader API。这个API允许开发者直接介入到Flutter渲染管道的渲染流程中。
直接使用Fragment Shader而不是Dart矩阵变换的好处是，它可以减少CPU的耗时。通过图形语言（GLSL）直接给GPU发送指令，性能上可以得到提升，并且实现起来更简洁。不过，加载着色器可能会带来一定的开销，因此需要在运行时将其编译为特定于平台的着色器。
在Flutter中使用Fragment Shader也有一些条件限制，例如需要引入特定的头文件，以及只支持.frag格式的文件。
如果需要将已有的GLSL效果（如shadertoy上的代码）搬运到Flutter中，可能需要进行一些代码改造。以下是一段渐变动画的着色器示例，以及它在Flutter中的对应代码。
通过这些片段着色器，我们可以获得极其丰富的渲染效果。在Flutter中，渐变动画的完整代码可以在GitHub上的相应仓库中找到。
riveo_page_curl项目中的折叠着色器包含了一些矩阵变换和三角函数计算。它的核心在于计算弯曲部分的弧度，并增加阴影投影以提高视觉效果。
在Dart层，除了ShaderBuilder之外，还可以通过flutter_shaders的AnimatedSampler来实现更简洁的shader、image和canvas的配合。
完整项目可以在GitHub上查看。相比在Dart层实现3D翻页折叠，使用FragmentShader实现的代码更加简洁，性能体验也更优秀。此外，通过简单的移植适配，ShaderToy里的着色器代码可以直接在Flutter中使用，这对于Flutter在游戏场景的实现非常有帮助。
最后，Flutter 3.10版本之后，Flutter Web也支持了fragment shaders，因此着色器在Flutter的实现已经相对成熟。如果将之前通过Flutter实现的《霓虹灯文本的「故障」效果》的逻辑转换成fragment shaders来完成，性能和代码简洁程度也可能会有所提升。
