@tinkcarlos/skillora 0.2.0

package/.claude/skills/frontend-design/references/motion-patterns.md

@@ -0,0 +1,659 @@
+# 动效模式库 (Motion Patterns)
+
+本文档提供前端动画和过渡效果的完整参考，帮助创建流畅、专业的用户体验。
+
+## 目录
+
+- [1. 动效原则](#1-动效原则)
+- [2. 缓动函数](#2-缓动函数)
+- [3. 页面过渡](#3-页面过渡)
+- [4. 组件动画](#4-组件动画)
+- [5. 微交互](#5-微交互)
+- [6. 滚动动画](#6-滚动动画)
+- [7. 加载状态](#7-加载状态)
+- [8. 代码片段库](#8-代码片段库)
+
+---
+
+## 1. 动效原则
+
+### 1.1 核心原则
+
+| 原则 | 说明 | 示例 |
+|------|------|------|
+| **目的性** | 动画应有明确目的 | 引导注意力、反馈操作、展示关系 |
+| **自然性** | 模拟物理世界运动 | 使用缓动函数、遵循惯性 |
+| **一致性** | 相同操作相同动画 | 所有弹窗使用相同进入动画 |
+| **性能优先** | 优先使用 GPU 加速属性 | `transform`, `opacity` |
+| **可访问性** | 尊重用户偏好 | `prefers-reduced-motion` |
+
+### 1.2 时长指南
+
+| 类型 | 时长 | 用途 |
+|------|------|------|
+| 微交互 | 100-200ms | 按钮 hover、toggle |
+| 小型过渡 | 200-300ms | 下拉菜单、tooltip |
+| 中型过渡 | 300-400ms | 弹窗、侧边栏 |
+| 大型过渡 | 400-600ms | 页面切换、复杂动画 |
+| 强调动画 | 600-1000ms | 首屏加载、成功反馈 |
+
+---
+
+## 2. 缓动函数
+
+### 2.1 常用缓动
+
+```css
+:root {
+  /* 标准缓动 */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* 弹性缓动 */
+  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+
+  /* 流畅缓动 */
+  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-swift: cubic-bezier(0.55, 0, 0.1, 1);
+
+  /* 强调缓动 */
+  --ease-dramatic: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+  --ease-snappy: cubic-bezier(0.77, 0, 0.175, 1);
+}
+```
+
+### 2.2 使用场景
+
+| 缓动 | 场景 | 效果 |
+|------|------|------|
+| `ease-out` | 元素进入 | 快速开始，缓慢结束 |
+| `ease-in` | 元素退出 | 缓慢开始，快速结束 |
+| `ease-in-out` | 状态切换 | 平滑过渡 |
+| `ease-bounce` | 成功反馈 | 活泼、有趣 |
+| `ease-elastic` | 强调动画 | 弹性、动感 |
+
+---
+
+## 3. 页面过渡
+
+### 3.1 淡入淡出
+
+```css
+/* 基础淡入 */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* 向上淡入 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 向下淡入 */
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 缩放淡入 */
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+```
+
+### 3.2 交错动画 (Stagger)
+
+```css
+/* 列表项交错进入 */
+.stagger-item {
+  opacity: 0;
+  animation: fadeInUp 0.5s var(--ease-out) forwards;
+}
+
+.stagger-item:nth-child(1) { animation-delay: 0ms; }
+.stagger-item:nth-child(2) { animation-delay: 50ms; }
+.stagger-item:nth-child(3) { animation-delay: 100ms; }
+.stagger-item:nth-child(4) { animation-delay: 150ms; }
+.stagger-item:nth-child(5) { animation-delay: 200ms; }
+
+/* 动态计算延迟 (CSS 变量) */
+.stagger-item {
+  animation-delay: calc(var(--index) * 50ms);
+}
+```
+
+### 3.3 页面切换
+
+```css
+/* 滑入 */
+@keyframes slideInRight {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+/* 滑出 */
+@keyframes slideOutLeft {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+
+/* 页面容器 */
+.page-enter {
+  animation: slideInRight 0.4s var(--ease-out);
+}
+
+.page-exit {
+  animation: slideOutLeft 0.4s var(--ease-in);
+}
+```
+
+---
+
+## 4. 组件动画
+
+### 4.1 弹窗 (Modal)
+
+```css
+/* 遮罩层 */
+.modal-overlay {
+  opacity: 0;
+  transition: opacity 0.3s var(--ease-out);
+}
+
+.modal-overlay.active {
+  opacity: 1;
+}
+
+/* 弹窗内容 */
+.modal-content {
+  opacity: 0;
+  transform: scale(0.95) translateY(-10px);
+  transition: all 0.3s var(--ease-out);
+}
+
+.modal-content.active {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+/* 关闭动画 */
+.modal-content.closing {
+  opacity: 0;
+  transform: scale(0.95) translateY(10px);
+  transition: all 0.2s var(--ease-in);
+}
+```
+
+### 4.2 下拉菜单 (Dropdown)
+
+```css
+.dropdown-menu {
+  opacity: 0;
+  transform: translateY(-10px);
+  transform-origin: top center;
+  transition: all 0.2s var(--ease-out);
+  pointer-events: none;
+}
+
+.dropdown-menu.open {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+/* 菜单项 hover */
+.dropdown-item {
+  transition: background-color 0.15s ease;
+}
+
+.dropdown-item:hover {
+  background-color: var(--color-primary-light);
+}
+```
+
+### 4.3 侧边栏 (Sidebar)
+
+```css
+.sidebar {
+  transform: translateX(-100%);
+  transition: transform 0.3s var(--ease-out);
+}
+
+.sidebar.open {
+  transform: translateX(0);
+}
+
+/* 从右侧滑入 */
+.sidebar-right {
+  transform: translateX(100%);
+}
+
+.sidebar-right.open {
+  transform: translateX(0);
+}
+```
+
+### 4.4 Toast 通知
+
+```css
+@keyframes toastIn {
+  from {
+    opacity: 0;
+    transform: translateY(-100%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes toastOut {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-100%) scale(0.9);
+  }
+}
+
+.toast {
+  animation: toastIn 0.3s var(--ease-bounce);
+}
+
+.toast.exiting {
+  animation: toastOut 0.2s var(--ease-in) forwards;
+}
+```
+
+### 4.5 Tooltip
+
+```css
+.tooltip {
+  opacity: 0;
+  transform: translateY(5px);
+  transition: all 0.15s var(--ease-out);
+  pointer-events: none;
+}
+
+.tooltip.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* 不同方向 */
+.tooltip-top { transform: translateY(-5px); }
+.tooltip-bottom { transform: translateY(5px); }
+.tooltip-left { transform: translateX(-5px); }
+.tooltip-right { transform: translateX(5px); }
+```
+
+---
+
+## 5. 微交互
+
+### 5.1 按钮效果
+
+```css
+/* 基础按钮 */
+.btn {
+  transition: all 0.2s var(--ease-out);
+}
+
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 涟漪效果 */
+.btn-ripple {
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-ripple::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10%);
+  background-position: center;
+  background-size: 0;
+  transition: background-size 0.5s ease;
+}
+
+.btn-ripple:active::after {
+  background-size: 1000%;
+  transition: background-size 0s;
+}
+
+/* 发光效果 */
+.btn-glow:hover {
+  box-shadow: 0 0 20px var(--color-primary);
+}
+```
+
+### 5.2 输入框效果
+
+```css
+.input {
+  transition: all 0.2s var(--ease-out);
+  border: 2px solid var(--color-border);
+}
+
+.input:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+/* 浮动标签 */
+.input-label {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  transform: translateY(-50%);
+  transition: all 0.2s var(--ease-out);
+  pointer-events: none;
+}
+
+.input:focus + .input-label,
+.input:not(:placeholder-shown) + .input-label {
+  top: 0;
+  font-size: 0.75rem;
+  background: white;
+  padding: 0 4px;
+}
+```
+
+### 5.3 卡片效果
+
+```css
+.card {
+  transition: all 0.3s var(--ease-out);
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+}
+
+/* 3D 倾斜效果 */
+.card-tilt {
+  transform-style: preserve-3d;
+  transition: transform 0.3s ease;
+}
+
+.card-tilt:hover {
+  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg);
+}
+```
+
+### 5.4 开关/切换
+
+```css
+.toggle {
+  width: 48px;
+  height: 24px;
+  background: var(--color-border);
+  border-radius: 12px;
+  transition: background 0.2s ease;
+}
+
+.toggle.active {
+  background: var(--color-primary);
+}
+
+.toggle-knob {
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transform: translateX(2px);
+  transition: transform 0.2s var(--ease-bounce);
+}
+
+.toggle.active .toggle-knob {
+  transform: translateX(26px);
+}
+```
+
+---
+
+## 6. 滚动动画
+
+### 6.1 滚动触发 (CSS Only)
+
+```css
+/* 使用 Intersection Observer 触发 */
+.scroll-reveal {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.6s var(--ease-out);
+}
+
+.scroll-reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+```
+
+### 6.2 视差效果
+
+```css
+.parallax-container {
+  overflow: hidden;
+}
+
+.parallax-bg {
+  transform: translateY(calc(var(--scroll) * 0.5));
+  will-change: transform;
+}
+```
+
+### 6.3 滚动进度条
+
+```css
+.scroll-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 3px;
+  background: var(--color-primary);
+  transform-origin: left;
+  transform: scaleX(var(--scroll-progress, 0));
+  z-index: 9999;
+}
+```
+
+---
+
+## 7. 加载状态
+
+### 7.1 Spinner
+
+```css
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+```
+
+### 7.2 Skeleton
+
+```css
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-border) 25%,
+    var(--color-background) 50%,
+    var(--color-border) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: var(--radius-md);
+}
+```
+
+### 7.3 脉冲效果
+
+```css
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+```
+
+### 7.4 进度条
+
+```css
+.progress-bar {
+  height: 4px;
+  background: var(--color-border);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--color-primary);
+  transition: width 0.3s var(--ease-out);
+}
+
+/* 不确定进度 */
+@keyframes indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+.progress-indeterminate .progress-fill {
+  width: 50%;
+  animation: indeterminate 1.5s ease-in-out infinite;
+}
+```
+
+---
+
+## 8. 代码片段库
+
+### 8.1 可访问性
+
+```css
+/* 尊重用户偏好 */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+### 8.2 性能优化
+
+```css
+/* GPU 加速 */
+.gpu-accelerated {
+  transform: translateZ(0);
+  will-change: transform, opacity;
+}
+
+/* 避免布局抖动 */
+.no-layout-shift {
+  contain: layout;
+}
+```
+
+### 8.3 完整动画类库
+
+```css
+/* 工具类 */
+.animate-fade-in { animation: fadeIn 0.3s var(--ease-out); }
+.animate-fade-in-up { animation: fadeInUp 0.4s var(--ease-out); }
+.animate-fade-in-down { animation: fadeInDown 0.4s var(--ease-out); }
+.animate-scale-in { animation: fadeInScale 0.3s var(--ease-out); }
+.animate-slide-in-right { animation: slideInRight 0.4s var(--ease-out); }
+.animate-bounce { animation: bounce 0.5s var(--ease-bounce); }
+
+/* 延迟类 */
+.delay-100 { animation-delay: 100ms; }
+.delay-200 { animation-delay: 200ms; }
+.delay-300 { animation-delay: 300ms; }
+.delay-400 { animation-delay: 400ms; }
+.delay-500 { animation-delay: 500ms; }
+
+/* 时长类 */
+.duration-150 { animation-duration: 150ms; }
+.duration-200 { animation-duration: 200ms; }
+.duration-300 { animation-duration: 300ms; }
+.duration-500 { animation-duration: 500ms; }
+```
+
+---
+
+## 快速参考
+
+```
+╔═══════════════════════════════════════════════════════════════╗
+║  动效速查                                                       ║
+╠═══════════════════════════════════════════════════════════════╣
+║                                                                ║
+║  时长: 微交互 100-200ms | 过渡 200-400ms | 强调 400-1000ms     ║
+║                                                                ║
+║  缓动: 进入用 ease-out | 退出用 ease-in | 切换用 ease-in-out   ║
+║                                                                ║
+║  性能: 只动 transform/opacity | 用 will-change | GPU 加速      ║
+║                                                                ║
+║  可访问: 始终检查 prefers-reduced-motion                       ║
+║                                                                ║
+╚═══════════════════════════════════════════════════════════════╝
+```