✏️ AI 术语图鉴

图片序列 · Image Sequence / Scroll-driven Frames

英文：Image Sequence / Scroll-driven Frames

动效与交互难度：入门 ★

🗣️一句话大白话

滚动驱动一组连续帧图片逐帧播放，像“滚出来的小视频”。产品 360° 展示、开场动画、过程演示的杀手锏。把一段视频抽成几十张连续帧图，滚动进度控制显示第几张——滚得越快播得越快，还能来回擦。告诉 AI“用 N 张序列帧、滚动进度映射到帧号”。成本是图片体积（几十张图），要控制帧数和每帧大小；替代方案是用 CSS/JS 实时绘制（如 3D 旋转）。

🎬真实场景

产品 360° 展示、开场动画、步骤过程、创意首页

📮你可以这样说

「【图像模型版】设计滚动驱动动画：把 [动作] 拆成 30 张连续帧，滚动 0-100% 对应第 1-30 帧，来回滚动可来回播放。 【HTML/CSS/JS 版】预加载 [N] 张序列帧图，scroll 进度 × N 映射当前帧（img.src 切换或 canvas 绘制）；建议 N≤60，图片压缩为 WebP。」

通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。

⚠️边界与常见误解

  • ▸误解：图片序列=轮播；轮播是点击切换，序列是滚动逐帧驱动
  • ▸帧数过多/图片未压缩会卡顿

🚫什么时候别用

  • ✗帧数需求大且无压缩条件时
  • ✗移动端弱网环境

🧩常见变体

产品 360°滚动逐帧动画滚动绘制 SVG

💡小贴士

  • ✦帧数 ≤60、单帧 ≤100KB；滚动映射进度而非时间

🕸️知识关系图

这个词条与相关术语、AI绘图 知识的连接关系

相关术语相关术语
滚动触发
Scroll-triggered Animation
视差滚动
Parallax Scrolling
图片序列
Image Sequence / Scroll-driven Frames

🔗相关术语

滚动触发Scroll-triggered Animation视差滚动Parallax Scrolling

📌素材来源

词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（中篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗