动效图鉴

图层从一侧进入，从另一侧离开。

使用场景

导航下划线。例如顶部菜单用从左到右的笔势描出链接，移出时继续向右收笔。

图层跟随指针进出卡片的方位移动。

使用场景

作品卡片揭示。例如作品集网格让标题或详情图层从指针靠近的一侧出现。

按钮的视觉层随指针微移，指针离开后回到原位。

使用场景

主操作按钮。例如作品集的「查看作品」在指针靠近时给出轻微的方向反馈。

指针移入时播放一次，移出时动画继续直到结束。

使用场景

作品卡片的短反馈。例如指针第一次经过卡片时，轮廓亮起一次，随后恢复常态。

指针移入卡片时，原本隐藏的说明变为可读。

使用场景

作品网格。例如在封面上按需展示作品的材料与年份。

首次向下进入时播放，之后保持揭示。

使用场景

长文小节。例如报道第一次读到图解时让图例显现，读者回看时可直接继续阅读。

向下进入时播放，回到起点之前才复位。

使用场景

产品功能段。例如功能卖点向下首次出现，读者退回前一段再继续时可以重看。

从两侧进入都播放，离开任一侧就复位。

使用场景

可往返浏览的作品列表。例如滚动展览里，每次重新经过某一展品都会看到它入场。

在三幅作品之间滚动，松手后停靠到其中一节。

使用场景

分章节浏览作品。例如让读者一次看清一幅作品，再继续滚到下一幅。

图像保持原位，可见区域从中心向四边打开。

使用场景

产品主图揭示。例如在产品页逐步放开局部细节，最后让读者看到完整轮廓。

前后景以不同距离移动，形成深度差。

使用场景

分层叙事。例如地点故事用近景地形、中景建筑和远景天空交代空间关系。

把纵向滚动进度转换为画廊的横向位移。

使用场景

系列作品展示。例如同一产品的三代设计依次横向进入画面，方便比较。

图像从中心放大，同一进度下可与裁剪范围的变化对照。

使用场景

产品图的整体呈现。例如从小尺寸到原尺寸逐渐带出一幅完整插图。

滚动或拖动滑杆，让暂停的视频定位到对应画面。

使用场景

产品拆解或制作过程。例如读者来回滚动，停在某一步看清细节。

同一幅图向四边展开，对照清晰裁剪线和渐隐边缘。

使用场景

作品或产品图的显现。例如背景需要从画面边缘逐渐透出，衔接上下文。

视点横移时，近处门框会遮住或露出远处日轮。

使用场景

空间叙事。例如让读者从入口一侧移到另一侧，逐渐看清远处的展品。

同一个立方体随进度旋转，六个面逐渐向外展开。

使用场景

产品结构展示。例如读者自行控制进度，观察物体由整体变为分解状态。

两个空间沿深度交接，滚动决定场景转换的进度。

使用场景

章节叙事。例如从日间展厅进入夜间展厅，保留两个空间之间的连续感。

遮罩覆盖舞台时切换内容，再揭开新画面。

使用场景

章节切换。例如产品故事从设计进入工艺章节时，用一次短暂遮挡划分段落。

新旧画面短暂共存，再完成交接。

使用场景

步骤面板切换。例如从配置进入确认步骤时，让前后两步的关系可见。

同一个视觉元素连接起两个不同的画面。

使用场景

从作品卡片进入详情。例如封面图从缩略位置移动到详情主图位置，读者能持续追踪。