網(wǎng)站制作NEWS
Flutter 小技巧之不一樣的思路實現(xiàn)炫酷 3D 翻頁折疊動畫
在Flutter動畫實現(xiàn)中，有一個有趣的話題——如何制作一個3D折疊動畫效果？許多人可能會首先想到使用Dart中的矩陣變換和Canvas來實現(xiàn)。
這種效果在當前的小說閱讀器場景中非常常見，而類似的翻頁效果通常是通過這種思路實現(xiàn)的。例如，我曾經(jīng)嘗試過的《炫酷的3D卡片和帥氣的360°展示效果》以及《用純代碼實現(xiàn)立體Dash和3D掘金Logo》都是利用矩陣變換實現(xiàn)的視覺3D效果。
然而，今天我要介紹一個名為riveo_page_curl的項目，它提供了一個與眾不同的實現(xiàn)方法，即通過自定義Fragment Shaders來實現(xiàn)動畫。這種方式允許開發(fā)者使用GLSL語言進行編程，從而通過GPU渲染出更豐富的圖形效果。
在介紹這個項目之前，我們先來了解一下Fragment Shader。自Flutter 3.7版本開始，就提供了Fragment Shader API。這個API允許開發(fā)者直接介入到Flutter渲染管道的渲染流程中。
直接使用Fragment Shader而不是Dart矩陣變換的好處是，它可以減少CPU的耗時。通過圖形語言（GLSL）直接給GPU發(fā)送指令，性能上可以得到提升，并且實現(xiàn)起來更簡潔。不過，加載著色器可能會帶來一定的開銷，因此需要在運行時將其編譯為特定于平臺的著色器。
在Flutter中使用Fragment Shader也有一些條件限制，例如需要引入特定的頭文件，以及只支持.frag格式的文件。
如果需要將已有的GLSL效果（如shadertoy上的代碼）搬運到Flutter中，可能需要進行一些代碼改造。以下是一段漸變動畫的著色器示例，以及它在Flutter中的對應代碼。
通過這些片段著色器，我們可以獲得極其豐富的渲染效果。在Flutter中，漸變動畫的完整代碼可以在GitHub上的相應倉庫中找到。
riveo_page_curl項目中的折疊著色器包含了一些矩陣變換和三角函數(shù)計算。它的核心在于計算彎曲部分的弧度，并增加陰影投影以提高視覺效果。
在Dart層，除了ShaderBuilder之外，還可以通過flutter_shaders的AnimatedSampler來實現(xiàn)更簡潔的shader、image和canvas的配合。
完整項目可以在GitHub上查看。相比在Dart層實現(xiàn)3D翻頁折疊，使用FragmentShader實現(xiàn)的代碼更加簡潔，性能體驗也更優(yōu)秀。此外，通過簡單的移植適配，ShaderToy里的著色器代碼可以直接在Flutter中使用，這對于Flutter在游戲場景的實現(xiàn)非常有幫助。
最后，F(xiàn)lutter 3.10版本之后，F(xiàn)lutter Web也支持了fragment shaders，因此著色器在Flutter的實現(xiàn)已經(jīng)相對成熟。如果將之前通過Flutter實現(xiàn)的《霓虹燈文本的「故障」效果》的邏輯轉換成fragment shaders來完成，性能和代碼簡潔程度也可能會有所提升。
汕頭招聘網(wǎng)站哪個好
多重隨機標簽