要从AI获得好的动画效果，你需要学会准确描述你的需求：

• “让这一列表项目依次交错出现”
• “让这个动画感知方向”
• “空间一致性”、“交叉淡入淡出”、“布局动画”

我为此创建了一个运动词汇表： https://t.co/ExAxpr31no https://t.co/SQXn2piA6r

词汇表

来源：https://animations.dev/vocabulary

#动画词汇表

课程中教授的常见动画模式术语表。使用这些名称向AI描述你的需求。

##入场与退场 (https://animations.dev/vocabulary#entrances-and-exits)

元素如何出现和消失。

• -淡入 / 淡出—元素通过改变透明度出现或消失。
• -滑入—元素从屏幕外（左、右、上或下）滑入进入。
• -缩放进入—元素从小变大至完整尺寸出现，常与淡入搭配。
• -弹入—元素出现时略带过冲，如同弹入到位。
• -揭示—内容被逐渐揭开，通常通过动画裁剪路径或遮罩实现。
• -入场 / 退场—元素被添加或从屏幕移除时播放的动画。

##排序与时间 (https://animations.dev/vocabulary#sequencing-and-timing)

协调多个元素或时刻。

• -关键帧—动画中定义的固定点（0%、50%、100%），浏览器填充中间帧。
• -插值 / 补间—在起始值和结束值之间生成所有中间帧，使运动连续。
• -交错—让多个项目依次动画，每个之间有小延迟，形成级联效果。
• -编排—有意编排多个动画的时间，使其感觉像一个协调的运动。
• -延迟—动画开始前的等待时间。
• -持续时间—动画持续的时间长度。
• -填充模式—元素在动画开始前或结束后是否保留其第一帧或最后一帧的样式（例如forwards）。
• -步进动画—被分为离散步骤的动画，例如倒计时计时器。

##移动与变换 (https://animations.dev/vocabulary#movement-and-transforms)

改变元素的位置、大小或角度。

• -平移—沿X轴或Y轴移动元素。
• -缩放—使元素变大或变小。
• -旋转—绕一个点旋转元素。
• -倾斜—沿X轴或Y轴倾斜元素，使其偏离矩形形状。
• -3D倾斜 / 翻转—在3D空间中旋转（rotateX / rotateY）以增加深度感。
• -透视—3D效果的强度 — 值越低，深度感越夸张，如同观看者更近。
• -变换原点—缩放或旋转的锚点。
• -原点感知动画—元素从其触发点向外动画，例如弹出窗口从打开它的按钮处展开，而不是默认CSS中从自身中心展开。

##状态之间的过渡 (https://animations.dev/vocabulary#transitions-between-states)

将一个状态、视图或元素连接到另一个。

• -交叉淡入淡出—一个元素淡出的同时另一个元素在同一位置淡入。
• -连续性过渡—通过视觉连接前后状态，保持用户方向感的变换。例如，将同一矩形放大和缩小。
• -形变—一个形状平滑地转变为另一个形状，例如灵动岛。
• -共享元素过渡—一个元素从一个位置移动到另一个位置并变换，例如缩略图扩展为卡片。
• -布局动画—当元素的大小或位置改变时，它动画到新位置而不是直接跳转。
• -手风琴 / 折叠—一个区域平滑地展开和折叠其高度以显示或隐藏内容。
• -方向感知过渡—内容前进时向一个方向滑动，后退时向相反方向滑动，使导航具有方向感。

##滚动 (https://animations.dev/vocabulary#scroll)

与滚动或视图导航相关的运动。

• -滚动揭示—元素进入视口时淡入或滑入到位。
• -滚动驱动动画—动画进度直接与滚动位置相关联。
• -视差—滚动时背景和前景以不同速度移动，产生深度感。
• -页面过渡—从一个页面或路由导航到另一个时播放的动画。
• -视图过渡—浏览器在两个状态或页面之间形变，连接共享元素。

##反馈与交互 (https://animations.dev/vocabulary#feedback-and-interaction)

对用户操作做出响应。

• -悬停效果—光标移动到元素上时发生的视觉变化。
• -按下 / 点击反馈—元素被点击时微小的缩小效果，使其具有物理感。
• -按住确认—用户按住按钮时填充的进度效果。
• -拖拽—通过抓取移动元素，释放时常带有动量。
• -拖拽排序—在列表中拖动项目以重新排列它们，其他项目则移动腾出空间。
• -滑动关闭—将元素拖出屏幕以关闭它，例如抽屉或提示框。
• -橡皮筋效果—拖动超出边界时的阻力和回弹（iOS的过滚动感觉）。
• -抖动 / 晃动—快速的左右抖动，表示错误或无效输入。
• -波纹—从点击点扩散开的圆形，用于确认按下操作。

##缓动 (https://animations.dev/vocabulary#easing)

动画过程中速度如何变化。

• -缓动—动画加速或减速的速率。
• -缓出—开始快，结束慢。大多数UI和响应用户操作的默认设置。
• -缓入—开始慢，结束快。通常避免使用，可能感觉迟钝。
• -缓入缓出—慢、快、慢。适合屏幕上已经存在的元素从A点移动到B点。
• -线性—恒定速度。避免用于UI，仅用于旋转加载图标或跑马灯。
• -三次贝塞尔—自定义缓动曲线，用于精确控制。
• -非对称缓动—加速和减速速率不同的曲线。比对称曲线更生动。

##弹簧动画 (https://animations.dev/vocabulary#spring-animations)

基于物理的运动，替代固定时长的缓动。

• -弹簧—由物理特性（张力、质量、阻尼）驱动的运动，而非固定时长。
• -刚度 / 张力—弹簧拉向目标的力度。值越高感觉越干脆。
• -阻尼—弹簧多久稳定下来。阻尼越低，弹跳和振荡越多。
• -质量—动画元素感觉有多重。质量越大，运动越慢越迟钝。
• -弹跳—弹簧过冲后稳定下来，增加趣味性。
• -感知时长—弹簧感觉上完成所需的时间，尽管其下方仍在微调。
• -动量—带有速度的运动，尤其在拖拽或中断之后。
• -速度—元素移动的快慢和方向。弹簧在中断时会将其速度带入下一个动画，因此轻甩的元素会保持速度。
• -可中断动画—可以在中途被平滑转向的动画，而无需先完成。

##循环与环境动效 (https://animations.dev/vocabulary#looping-and-ambient-motion)

自动运行的动画。

• -跑马灯—文本或内容连续循环滚动。
• -循环—动画重复，可指定次数或无限循环。
• -交替（回环）—循环先正向播放然后反向，而不是跳回起点。
• -环绕—一个元素围绕另一个元素沿连续路径旋转。
• -脉冲—温和重复的缩放或透明度变化以吸引注意力。
• -漂浮—柔和连续的上下浮动，使静态元素感觉生动且失重。
• -空闲动画—元素处于闲置等待交互时播放的微妙动效。

##打磨与效果 (https://animations.dev/vocabulary#polish-and-effects)

区分好与极好的小细节。

• -模糊—用于柔化元素或掩盖微小瑕疵的模糊滤镜。
• -裁剪路径—将元素裁剪成特定形状，用于揭示、遮罩和前后对比滑块。
• -遮罩—使用形状或渐变隐藏或显示元素的部分 — 类似裁剪路径，但具有柔和、渐变的边缘。
• -前后对比滑块—可拖动的分割器，在两张重叠图像之间擦除以进行比较。
• -线条绘制—SVG路径自行绘制出来，如同隐形笔在描画。
• -文字形变—文字变化时逐字符动画，吸引用户注意新值。
• -骨架屏 / 闪烁动画—内容加载时显示的带有移动光泽的占位符。
• -数字滚动器—数字滚动或计数到某个值。
• -表格数字—固定宽度的数字，避免变化时数字位置移动。对于数字滚动器、计时器和计数器至关重要。
• -打字机—文字逐字符出现，如同被依次打出。

##性能 (https://animations.dev/vocabulary#performance)

保持运动流畅而非卡顿的关键。

• -帧率（FPS）—每秒绘制的帧数。60fps是流畅运动的基准；新显示设备为120fps。
• -卡顿—浏览器因跟不上动画而丢帧时出现的可见停顿。
• -丢帧—浏览器未能在截止时间前绘制的一帧，导致运动出现微小卡顿。
• -合成—让GPU在其自身的图层上移动或淡出元素，无需重新执行布局或绘制。
• -will-change—一种CSS提示，表明某个元素即将动画，浏览器可提前将其提升到独立图层。
• -布局抖动—对宽度、高度、top或left等属性进行动画，迫使浏览器每帧重新计算布局，导致卡顿。

##应知的原则 (https://animations.dev/vocabulary#principles-to-know)

指导何时以及如何动画的概念。

• -有目的的动画—运动应服务于功能 — 引导方向、提供反馈、展示关系 — 而非仅为装饰。
• -预备动作—在主要动作之前向相反方向做一个小的蓄力，暗示即将发生什么。
• -跟随动作—元素在主要运动停止后，其部分继续移动并轻微稳定，增加重量感。
• -挤压与拉伸—元素在移动时变形以传达重量、速度和弹性。
• -感知性能—恰当的动画使用户感觉界面更快，即使实际并未加快。
• -使用频率—用户看到某个动画的次数越多，它就应该越短越微妙。
• -空间一致性—动画使元素在跨状态时保持其身份和位置，使用户永远不会丢失事物的去向。
• -硬件加速—对transform和opacity进行动画可使GPU保持运动流畅。
• -减少动效—尊重用户的prefers-reduced-motion设置，减少或移除动效。