入场与退场出现和消失
元素第一次出现在屏幕上的方式——它怎么来,要不要带方向。
8 条动效
- 淡入Fade in 元素从全透明慢慢显出来,位置和大小都不变,只有存在感在增加
- 滑入Slide in 元素从画面外或某一侧滑进最终位置,位移通常只有 8–24px,配合淡入会更自然
- 缩放进入Scale in 元素从略小(约 0.9 倍)放大到原始大小,像从远处靠近镜头,让人把注意力放上去
- 弹出Pop in 元素从更小的尺寸快速放大,末尾轻微越过目标值再收回,看起来像“啪”地弹出来
- 揭示Reveal 用遮罩或裁剪把元素一点点露出来,像幕布被拉开,而不是整体变透明
- 逐词遮罩揭示Masked word reveal 标题里每个词像从一条看不见的横缝里升起来,一个接一个:先出来的已经站定,后面的还在下面等着
- 图片模糊聚拢Blur-up image load 图片先是一团糊掉的色块、还略微放大着,然后一边变清晰一边往回收 —— 从「一眼看出主色调」过渡到「看得清细节」,收的时候是往里的,所以边缘不会露白
- 开场加载序列Preloader sequence 打开先看到一层盖满屏的底色,中间一个数字从 0 数到 100,下面一条线跟着填满;数到 100 时几块幕布错峰往上一掀,首页才露出来