穿过界面元素
镜头冲进一张卡片或按钮直到它铺满画面;下一镜从同一位置长出来。
实时循环 · 6 秒 · 1920×1080 · 24 fps
参数
| 参数 | 类型 | 作用 |
|---|---|---|
| phase (必填) | "out" | "in" | out 用在离开镜头的末尾,in 用在进入镜头的开头 |
| at_ms | ms | out:镜头时长减 dur_ms;in:0 |
| dur_ms | ms | 半个转场的时长(wipe 420、zoomThrough 560、flip 460、sweep 480) |
| dir | "left" | "right" | "up" | "down"默认: "left" | 画面移动的方向 |
| content | element | selector | zoomThrough / flip:镜头里会动的主容器 |
| target | {x, y, w, h} | zoomThrough:镜头穿过的那个界面元素,舞台像素 |
| ease | {"<move>": ease} | 重调任一具名动作(见本条的动作表):预设名("out-expo")、三次贝塞尔 [x1, y1, x2, y2]、{spring: [频率, 阻尼]} 或 {trapezoid: [加速, 减速]}。动作名或曲线写错会直接报错,绝不悄悄退回默认。参考片里量出来的动作(复刻工作台 measure/*.json,按帧号存)不用手工转换:MV.fitEase(doc, "x", {from: 133, to: 142}) 或 motion-fit <文件> --measure x --from 133 --to 142 --ease 直接得到曲线 |
| brand | hex默认: #6B5BFF | 网站的品牌色;组件由它推出强调色(在舞台上对比度 ≥ 3:1)、面板色和文字色 |
| stage | "dark" | "light"默认: "dark" | 组件所在的舞台:深色或浅色 |
| display | font stem默认: "Inter-Bold" | 标题字体;在调用里写出它的名字,运行时才会加载 |
| body | font stem默认: "Inter-Regular" | 界面 / 正文字体;在调用里写出它的名字,运行时才会加载 |
| start_ms | ms默认: 300 | 组件开始的时间,镜头内的毫秒数 |
| background | boolean默认: false | 画出舞台背景(关闭时透明,叠在镜头自己的背景上) |
| place | {x, y, w, h, z?} | 组件在镜头布局里的位置:把它 1920x1080 的构图缩放进这个舞台矩形(居中、保持比例);z 决定组件之间的前后。默认整个舞台 |
动作与缓动曲线
每个动作都有自己的缓动。用 ease: { "<动作>": <曲线> } 重调其中一个,可写曲线名或贝塞尔手柄。
| 动作 | 曲线 | 作用 |
|---|---|---|
| zoom.in | in-cubic | 前半段:镜头冲进目标元素 |
| face.fill | in-quad | 前半段最后 40%:目标的面填满画面 |
| zoom.out | out-expo | 后半段:新镜头从目标的位置长出来 |
| face.clear | out-quad | 后半段前 35%:面的颜色退去 |
本演示的取值
| variant | "zoomThrough" |
|---|---|
| target | {"x":700,"y":430,"w":520,"h":220} |
| brand | #6B5BFF |
| stage | dark |
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s2", MV.transition(el, {"variant":"zoomThrough","target":{"x":700,"y":430,"w":520,"h":220},"phase":"out","brand":"#6B5BFF"}));
MV.bind("s3", MV.transition(el, {"variant":"zoomThrough","target":{"x":700,"y":430,"w":520,"h":220},"phase":"in","at_ms":0,"brand":"#6B5BFF"}));在发布片里什么时候用
向深处走:从概览进入某个功能,从按钮进入它打开的东西。
为什么有效
转场由界面本身驱动,一边运动一边讲清产品结构。
不要和这些一起用
- 同一个剪切点再声明 transition_in(两个转场打架)
- 目标小于约 120 像素(变成猛冲)
在片中的作用
自然时长
0.9–1.3 秒