动效图鉴图鉴↗

拖动时记住最近的速度，松手后继续前进。碰到边缘就反转对应方向的速度，每次反弹和移动都损失一点能量。

可以用在

可甩动的画布、横向浏览、带一点重量感的小物件。

记一笔

阻力决定滑多远，回弹决定撞墙后还能走多快。这里没有重力，像在桌面上推一颗球；边界碰撞不等于自动吸附。

把网点用横、纵和斜向的短线连接，钉住上方两角。拖动时固定最近的可动点，反复修正线段长度，把拉力传到周围。

可以用在

柔软的封面、网布小实验、会被手指带动的线框。

记一笔

这是平面网格，没有厚度、撕裂与自碰撞。松紧控制每次修正的强度，仍会有少量拉伸；不会把它当作真实布料测量。

把指针相对旋钮中心的角度换成数值，再用同一个数值控制指示线和波纹频率。可转的范围是 270°，两端各留一点空隙。

可以用在

画笔大小、滤镜强度、声音界面里的单个参数。

记一笔

这里只画波形，不播放声音。下方滑条与旋钮同步，键盘也能精确调整；数值不会自动跑走。

气泡和原点之间用两条二次曲线连成细颈；距离越远，原点越小。超过阈值后断开，松手让气泡消失，否则弹回原点。

可以用在

趣味提示、轻量的状态标记、游戏里的可拖拽物。

记一笔

数字只是演示，不会清除消息。恢复按钮随时能带回气泡；阈值按画布比例计算，小屏上也能拉断。

每一位背后都有一列 0 到 9，用小窗口只露出一个数字。数值改变时平移数字列，各位略微错开结束时间。

可以用在

少量统计数字、页码、一个不急着读完的计数。

记一笔

此处按位走最短的直线过渡，不模拟机械进位；辅助阅读工具只收到最终数值，不播报中间数字。

记录按下的时间，用实际经过的时长计算进度；达到阈值后显示完成。松开、取消触摸或离开页面都会结束未完成的动作。

可以用在

游戏蓄力、刻意放慢的一次选择。

记一笔

本例只改变卡片画面，不执行任何真实操作。下面也有单击试播，方便不适合长按的人查看效果。

一块实色遮罩先盖住窗口，在遮住时更换页面，随后继续移动离开。

可以用在

两个页面版式差别较大时，给切换留一点停顿。

记一笔

幕布不能代替真实的加载状态。这个本地样本不需要等待网络，实际网站要等目标内容可用再揭幕。

先让菜单面板展开，再让几个入口错峰出现。选中入口后收起面板，回到对应页面。

可以用在

入口不多的作品站、展览或个人网站。

记一笔

可以按 Escape 关闭。它是局部导航示范，不会把焦点锁在演练台里。

先把横向画卷钉在窗口内，再用这段纵向滚动的进度推动画卷横移，依次经过三幅内容。

可以用在

短画廊、路线、按顺序看的几张作品。

记一笔

只改变内容的位置，不拦截滚轮事件。离开这段后仍是普通的纵向阅读。

围绕中心旋转采样坐标，越靠近中心转得越多。两段片在旋转中交接，随后慢慢舒展开。

可以用在

空间跳转、梦境段落、带旋转动作的镜头。

记一笔

这是图像的二维扭曲。边缘采用镜像延展，避免旋转时露出空角。

不规则噪声决定换片的先后，交接边缘叠一圈橙红色光晕。亮度被限制在局部，不做整屏白闪。

可以用在

旧照片串联、暖色短片、胶片风章节。

记一笔

“烧片”是视觉比喻。这里没有模拟胶卷的真实化学变化。

读取前一段视频的亮度，让较亮的地方先切到后一段。阈值逐渐降低，最后连阴影也换过去。

可以用在

逆光、人像、明暗差比较大的镜头。

记一笔

换一段素材，交接形状也会跟着变。强度控制边缘是柔和融合，还是干脆分开。

逐帧压低饱和度，叠加随画面更新的细颗粒、划痕与暗角，再让画框轻微游移。

可以用在

旧日记、回忆段落、音乐短片。

记一笔

这里模拟的是胶片质感，不是某种胶卷的精确色彩配方。强度拉到零会回到原片。

把视频切成水平条带，错开少数条带的位置；底部添一道缓慢滚过的跟踪噪声。

可以用在

录像带片头、模拟监控、故障风转场。

记一笔

保留了原片的动作，只扭动部分扫描行；没有用整屏白闪来制造刺激。

分条绘制画面，让边缘微微内收；叠上水平扫描线、竖向荧光栅格和暗角。

可以用在

街机界面、旧终端、复古视频窗。

记一笔

这是平面画布上的近似形变；细线在小屏幕上会适当减弱。

按亮度为每个小格选一个字符，同时保留采样位置的颜色。点、冒号和密集的字符拼出影像。

可以用在

终端风视觉、代码主题作品、彩色字符画。

记一笔

字号越大，越容易认出字符；字号越小，越容易认出原来的画面。

让几个圆彼此穿过，先模糊它们的边缘，再拉高透明度的对比。接近的轮廓便会连成一片，看起来像软软的液滴。

可以用在

加载提示、选择状态、一个小小的液体标识。

记一笔

这是滤镜制造的轮廓融合，没有计算真实液体。思路参考 Lucas Bebber 的 SVG 黏液滤镜实验，小样在这里重做。

每个小点记住自己的原位。指针经过时把附近的点推开，再用带阻尼的回拉让它们归队。

可以用在

点阵标识、背景中的一块可拨动区域。

记一笔

灵感参考 Codrops 的互动粒子。此处是规则点阵的独立实现，点数固定，位置始终限制在画面内。

把彩色渐变、细密条纹和一层高光叠在卡面上。指针改变卡片倾角与高光位置，像在转动一张镭射纸。

可以用在

纪念卡、徽章、特别版本的封面。

记一笔

颜色由渐变与混合模式产生，是折光的视觉近似，没有做光线追踪。

先在一个扇区里画几条线和小圆，再把这个扇区旋转、镜像成十二份。原始图形轻轻移动，就能改变整幅花纹。

可以用在

音乐视觉、小型生成艺术、可以慢慢看的屏保。

记一笔

所有颜色和图形都现场生成；没有预先录好的视频，也没有接入麦克风。

八个线框从远处向前放大，每个错开同样的时间。前端的框淡出后回到远处，形成持续前进的错觉。

可以用在

短片段转场、活动封面、空间感的背景。

记一笔

这是平面缩放与旋转组成的透视错觉，没有加载三维模型。

给规则网格的每个交点一个随时间变化的高度，再把它投影到平面。两列不同方向的波叠起来，就有了起伏的褶皱。

可以用在

抽象地形、线框封面、关于波动的插图。

记一笔

高度由公式控制，指针会压低附近的网面；不是织物碰撞或真实流体计算。

把同一行字叠成三层，只露出几条窄切片，再让蓝色与青色的副本短暂错位。这里的碎裂来自遮罩，文字本身仍可选中。

可以用在

短标题、封面。正文里偶尔有一下就够了。

记一笔

首页书封上的错位文字，也属于这一类。

以落点为圆心，画一个透明度渐低的圆，放大到盖住按钮。动画结束就移除这个圆。

可以用在

按钮、可点的卡片，让一次点击有个回声。

记一笔

键盘触发时从正中心展开；连续点击不会无限积攒元素。

把径向渐变的中心绑到指针位置，照亮底下的网格。灯没有单独的图片，只是一个随位置变化的渐变。

可以用在

暗色卡片、作品封面。底下的内容在没有光时也要能看清。

记一笔

点击会让灯沿一段固定路线移动，触屏和键盘也能试。