用途
该技能用于指导轮播图（carousel）、滑块（slider）、图片画廊以及横向滚动内容的动画设计，目标是通过应用迪士尼十二动画原则，让这类组件的导航更平滑、更符合直觉。
主要能力
技能将十二动画原则逐一映射到轮播场景：
- 挤压与拉伸（Squash & Stretch）：快速滑动时幻灯片可在滚动方向上轻微压缩，增强速度与动量感知。
- 预备动作（Anticipation）：切换前当前幻灯片可朝导航方向偏移5-10px，按钮可在触发前先下压。
- 舞台布局（Staging）：当前/激活幻灯片应突出显示——更大、居中、更不透明；相邻幻灯片可调暗或缩小。
- 逐帧与关键帧（Straight Ahead & Pose to Pose）：采用关键帧方式，为每张幻灯片定义精确位置，吸附点应清晰可预测。
- 跟随与重叠动作（Follow Through & Overlapping Action）：吸附后幻灯片可轻微过冲再回稳；幻灯片内内容（文字、按钮）滞后于容器运动。
- 缓入缓出（Ease In & Ease Out）：滑动释放用缓出（动量减速），按钮导航用缓入缓出，建议 cubic-bezier(0.25, 0.1, 0.25, 1)。
- 弧线（Arcs）：3D轮播应沿曲线路径旋转幻灯片，Coverflow效果自然遵循弧线；即使是平面轮播也可有细微的Y轴移动。
- 次要动作（Secondary Action）：幻灯片移动（主）时，分页更新（次）、相邻幻灯片缩放/淡出（三级）、进度条移动（四级）同步进行。
- 时间节奏（Timing）：幻灯片切换300-500ms；滑动惯性200-400ms；分页点150ms；自动播放间隔4000-6000ms；悬停暂停为即时；相邻幻灯片缩放250ms。
- 夸张（Exaggeration）：主视觉轮播可用更戏剧化的过渡，产品轮播应更平滑、少干扰，按场景缩放程度。
- 扎实造型（Solid Drawing）：保持幻灯片尺寸一致，间距均匀，任何变换中都必须保持宽高比。
- 吸引力（Appeal）：平滑的轮播显得高级，卡顿的滑块显得廉价，触摸响应应接近原生体验。
使用方式
技能提供CSS实现参考，包括：
.carousel-track：使用 flex 布局，transition 为 transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1)。.carousel-slide：flex-shrink: 0，transition 为 transform 300ms ease-out 与 opacity 300ms ease-out。.carousel-slide:not(.active)：transform: scale(0.9)，opacity: 0.6。.pagination-dot：transition 为 transform 150ms ease-out 与 background-color 150ms ease-out；激活态 transform: scale(1.3)。- CSS scroll snap：容器设置 scroll-snap-type: x mandatory 与 scroll-behavior: smooth，幻灯片设置 scroll-snap-align: center。
关键属性涉及 transform（translateX、scale）、opacity、scroll-snap-type、scroll-behavior、transition。
适用场景
适用于需要提升轮播、滑块、画廊及横向滚动内容交互质感的开发与设计工作，尤其是对导航流畅度和触摸响应有要求的界面。
限制
资料未提供该技能的具体安装方式、依赖环境、支持框架或平台范围，也未说明收费、价格或效果保证，这些信息暂未提供。