缩放动画本质是css transform: scale()的连续变化；html5建模实为canvas/webgl或svg实现；Three.js中需用model.scale.set()在渲染层内部缩放，配合TWEEN.js插值与updateMatrixWorld()确保正确性。
缩放动画本质是 CSS transform: scale() 的连续变化
html5 本身不提供“建模”能力，所谓“HTML5 建模”实际指用 或 WebGL（如 Three.js）渲染的 3D 模型，或用 SVG 绘制的矢量模型。缩放动效不依赖 HTML5 新标签，而是靠 CSS 动画控制容器或元素的 transform: scale()。直接对 或 标签加 scale() 会拉伸像素或重绘整个画布，不是真正的模型级缩放——真正可控的缩放必须在渲染层内部实现。
Three.js 中用 model.scale.set() 实现平滑缩放
如果你用 Three.js 加载了 glTF 模型（如 GLTFLoader），缩放必须作用于模型的 scale 属性，而非外层 dom 元素。否则会出现纹理模糊、光照错位、碰撞体不同步等问题。
-
model.scale.set(1, 1, 1)是原始大小；设为(2, 2, 2)即等比放大 2 倍 - 用
TWEEN.js或requestAnimationFrame驱动渐变：每次帧中微调model.scale.x等值，再调用renderer.render(scene, camera) - 避免直接写
model.scale.x += 0.01——应基于起始/目标值插值，否则帧率波动会导致速度不均 - 注意：缩放后若启用了
model.castShadow = true，需同步调用model.updateMatrixWorld()，否则阴影位置可能偏移
const tween = new TWEEN.Tween(model.scale) .to({ x: 1.5, y: 1.5, z: 1.5 }, 1000) .easing(TWEEN.Easing.Quadratic.Out) .onUpdate(() => { model.updateMatrixWorld(); // 关键：确保变换矩阵实时更新 }) .start();canvas 2D 绘图时缩放要重置坐标系
在 中缩放图形，不能只改 ctx.scale() 后画图——它会累积变形。每次缩放前必须 ctx.save()，画完立刻 ctx.restore()，否则后续所有绘制都会被意外缩放。
-
ctx.scale(2, 2)后，ctx.fillRect(0,0,10,10)实际画出 20×20 像素区域 - 若想让某个图形独立缩放（比如 ui 图标），应在
save()→scale()→ 绘图 →restore()封闭块内完成 - 缩放中心默认是画布左上角（0,0），要用
ctx.translate()移动原点后再缩放，才能以指定坐标为中心缩放
ctx.save(); ctx.translate(centerX, centerY); ctx.scale(1.3, 1.3); ctx.translate(-centerX, -centerY); ctx.fillRect(x, y, width, height); // 此时以 (centerX, centerY) 为中心缩放 ctx.restore();SVG 模型缩放要小心 viewBox 和 preserveAspectRatio
对 SVG 内部的 transform="scale(1.2)" 是安全的，但若缩放整个 标签，必须检查 viewBox 是否固定——否则浏览器会按宽高比拉伸，导致形变。
立即学习“前端免费学习笔记（深入）”；
- 错误做法：
—— 容易触发重排+模糊 - 正确做法：给包裹模型的
transform，并用 JS 动态更新其属性值 - 若需响应式缩放，优先用
viewBox="0 0 100 100"+width="100%"，再通过g.transform.baseVal.appendItem(...)控制内部缩放
缩放动画卡顿？大概率是没启用硬件加速——给缩放元素加 style="transform: translateZ(0)" 强制 GPU 渲染。