Y AnimationPlayground

研究工作台

实验总览

示例库

示例总览

Three.js 示例

Shader 示例

代码视频示例

项目

版本记录

GitHub X (Twitter)

动画实验

在隔离的运行时边界内进行可控、可比较的浏览器动画实验。

v0.8.5 Shader 基础

从一个像素函数开始，拆开复杂实时图形的成本。

逐层观察坐标、时间、距离场与程序化粒子，理解短 GLSL 如何借助像素并行生成高密度画面。

打开 Shader Studio

参考实现

CSS + SVG

建立浏览器原生矢量动效与视觉节奏的能力基线。

参考实现

GSAP

研究时间轴编排、精确定位、缓动与 SVG 动效。

参考实现

Motion

探索以 React 为中心的交互、手势、布局过渡与弹簧动画。

参考实现

Motion Design System

把已验证的时间、缓动、弹簧、编排与减少动效策略沉淀为共享契约。

参考实现

AI 动画生产管线

把创意简报、结构化 AI 草案、实现脚手架与可执行 QA 组织成可审查流程。

参考实现

D3

先把数据转换为定制几何，再交给合适的运行时驱动动画。

参考实现

Lottie

评估矢量动画交付、播放控制与运行时边界。

参考实现

Rive

构建由状态机和运行时数据驱动的交互式矢量图形。

参考实现

Canvas

研究即时模式绘制、高密度场景、粒子与帧预算。

参考实现

Three.js

研究场景图、相机、WebGL 帧预算与可访问的空间交互。

参考实现

Shader Lab

从像素坐标、时间与距离函数开始，理解程序化图形、GPU 粒子和多 Pass 反馈。