animation-micro-interaction-pack

用途

Animation & Micro-interaction Pack 提供一组可复用的交互模式（interaction patterns）与动效预设（motion presets），目标是让 UI 显得更加精致、打磨到位（polished）。它适用于需要为界面添加动画与微交互的开发和设计场景。

主要能力

该技能包覆盖以下几类动画模式：

• 悬停效果（Hover Effects）：放大（Scale）、上浮（translateY）、发光（box-shadow）、颜色变化（color shifts）。
• 入场动画（Entrance）：淡入（fade-in）、滑入（slide-in）、缩放入场（zoom-in），并支持列表错峰（stagger）。
• 退场动画（Exit）：淡出（fade-out）、滑出（slide-out）、缩放消失（scale-out）。
• 加载动画（Loading）：脉冲（pulse）、骨架屏波纹（skeleton waves）、进度条（progress bars）。
• 手势反馈（Gestures）：点击涟漪（ripple on click）、拖拽反馈（drag feedback）、滑动指示（swipe indicators）。

使用方式

资料中给出的实现示例包括两类技术方案。

Tailwind 配置示例（原样保留）：

/* tailwind.config.js */
animation: {
  'fade-in': 'fadeIn 0.5s ease-out',
  'slide-up': 'slideUp 0.3s ease-out',
  'scale-in': 'scaleIn 0.2s ease-out',
}

Framer Motion 示例（原样保留）：

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
/>

最佳实践

资料中列出的最佳实践包括：

• 微交互使用 200–300ms 时长。
• 尊重 prefers-reduced-motion（即遵循系统减弱动效设置）。
• 为性能考虑，优先动画 transform/opacity。
• 加入缓动函数（easing functions）。
• 对列表项做错峰（stagger）处理。
• 提供 hover/active 状态。

适用场景

适用于需要为前端界面补充动效与微交互的场合，例如悬停反馈、内容入场与退场、加载状态展示以及手势交互反馈等。

限制

关于该技能包的具体安装命令、支持的框架范围（除 Tailwind 与 Framer Motion 之外）、收费方式、版本要求等信息，资料暂未提供。