Sin 的动画收藏夹
学懂了就收进来，下次要用的时候不用重新扒一遍。
2026-07-27
ShutterReveal 快门切片动画
来源于 fqzlr.com 首页滚动快门效果的学习复刻, 修改成了无滚动的形式, 驱动 5 个竖向切片按奇偶方向进入, 最后合成完整图片。
2026-07-28
WaveReveal + Logo Stroke 波浪揭示动画
从 BenjaminOddou/portfolio项目中提取, 进行实验收进来的预加载动画展示版, 用stroke-dasharray + stroke-dashoffset 做Logo 先做描边和填充, 再由GSAP控制波浪形 SVG 推进完成转场。适合网站一开始进入加载资源的时候的预加载动画。
2026-07-29
InteractiveIconMorph 交互式图标形变动画
从 BenjaminOddou/portfolio项目中提取, 实验之后收藏进来的交互式菜单图标动画, 鼠标悬停时用 GSAP 驱动 SVG 路径形变, 使用了GSAP的MorphSVG插件，并配合环形文字旋转。感觉好看的底部社交图标。
2026-08-12
Plum Growth 梅花生长动画
动画来自 Anthony Fu 老师 2022 年的直播回放教学，他在博客中也使用了此动画，地址：https://antfu.me/。动画单纯使用 Canvas 画图，构造一棵二叉树，每次通过广度优先的方式生长枝条，左右枝条的生长概率均为 50%。
2026-09-28
黄金回旋
为了庆祝飙马野郎的播出而随性6 sol coding的，实现超出了我的预料。实现方式是，按斐波那契数列计算方块的边长与位置，在每个方块中用 SVG 绘制一段四分之一圆弧；将 stroke-dasharray 设为路径长度，用 stroke-dashoffset 把描边移出可见范围，再将偏移量动画过渡到 0，让方块和圆弧逐段显现；同时用 requestAnimationFrame 平滑调整 viewBox，让镜头跟随螺旋向外扩展。
