MotionLang

入场与退场 · 出现和消失

开场加载序列Preloader sequence

打开先看到一层盖满屏的底色,中间一个数字从 0 数到 100,下面一条线跟着填满;数到 100 时几块幕布错峰往上一掀,首页才露出来。数字和线走的是同一个进度,不会出现「数字到了 100 但线还差一截」。

在工具里打开这条

什么时候用它

首屏有重内容(大图、3D、视频)的站用它;本来秒开的应用加这一层只会让人觉得更慢 —— 加载本来就应该快到不需要解释。

参数

counter 0→100 · number and bar share one progress · 3–6 curtains · each 620ms cubic-bezier(.76,0,.24,1) · 80ms stagger

配方

  1. 每一项 620ms cubic-bezier(.76,0,.24,1)
  2. 开场加载序列 → counter 0 → 100 @ 620ms cubic-bezier(.76,0,.24,1)

给 AI 的一句话

做一个开场加载序列:全屏底色,中间数字从 0 数到 100,下面一条进度线和数字共用同一个 0→1 进度值;到 100 之后等一小拍,再让 3 到 6 块幕布错峰 80ms、各自 620ms cubic-bezier(.76,0,.24,1) 往上掀开,露出版面。幕布走完再放主内容入场。

同类的其他动效