视口过渡 (Viewport Transition)

想要在多个节点或者不同的固定视角中平滑地拉扯镜头？您可以结合 yh-flow 实例给出的视口推演方法（如 setViewport、zoomTo 或 fitView）和 CSS 动画，创造平滑自然的飞行过渡动画，而无需引入外部动画库。

视口平滑移动示例

点击下方的按钮，观察画布是如何向固定几个兴趣点（Pan to Node）顺滑过渡飞行的。

节点 1

节点 2

节点 3

POI 平滑飞行

原理说明

setViewport 和 fitView 方法会更新内部 .yh-flow__content 层的 transform 属性。通过简单地向该特定选择器添加 CSS transition，您就能“免费”开启硬件加速的过渡动画。

方法	角色	逻辑
setViewport	位置更新	协调内容区域的直接平移和缩放。
fitView	自动缩放	计算所有节点的边界框，并设置一个在当前容器内包含它们的视口。
CSS 过渡	插值计算	使用浏览器的原生合成引擎处理旧值和新 matrix() 值之间的平滑增量。

TIP

使用 CSS 过渡进行视口移动通常比基于 JS 的动画库更平滑，因为它将繁重的工作移交给 GPU，并避免了在高频图表渲染期间占用主线程。