动效设计与开发效率提升

实现目标与背景

目标

• 采用lottie和CSS变量实现流畅的动效设计，包括领红包、星钻展示等核心交互场景
• 总结提炼15+常用功能模板和20+自定义Hooks，上传至开发文档中心
• 这些模板和Hooks被团队广泛应用，将新专题开发效率提升50%以上

背景

在现代Web应用中，动效设计是提升用户体验的重要手段。然而，传统的动效开发方式存在以下问题：

1. 动效实现复杂，需要编写大量CSS和JavaScript代码
2. 动效性能优化困难，容易导致页面卡顿
3. 动效设计与开发协作效率低，沟通成本高
4. 缺乏统一的动效规范和组件库，导致代码复用率低
5. 动效开发效率低，影响项目进度

为了解决这些问题，我们采用了lottie和CSS变量实现流畅的动效设计，并总结提炼了常用功能模板和自定义Hooks，显著提升了动效开发效率。

核心实现步骤

1. 动效技术选型与架构设计

• 调研并选择合适的动效技术栈，最终确定lottie+CSS变量的方案
• 设计动效组件架构，支持动效的复用和扩展
• 建立动效设计规范，统一动效风格和实现方式
• 搭建动效开发环境，支持动效的实时预览和调试

2. lottie动效集成与优化

• 集成lottie-web库，支持AE导出的动效文件
• 优化lottie动效的加载和渲染性能
• 实现lottie动效的交互控制，支持播放、暂停、循环等操作
• 设计lottie动效组件，支持动效的复用和配置

3. CSS变量动效系统实现

• 设计CSS变量动效系统，支持动态调整动效参数
• 实现基于CSS变量的主题切换和动效定制
• 建立CSS变量命名规范，确保动效代码的可维护性
• 优化CSS变量动效的性能，避免频繁的重排重绘

4. 核心交互场景动效实现

• 实现领红包动效，包括红包弹出、拆开、金额展示等效果
• 实现星钻展示动效，包括星钻掉落、旋转、闪烁等效果
• 实现按钮交互动效，包括悬停、点击、加载等状态
• 实现页面过渡动效，包括页面进入、退出、切换等效果

5. 功能模板和自定义Hooks提炼

• 总结提炼15+常用功能模板，包括动效组件、交互组件等
• 开发20+自定义Hooks，封装动效逻辑和交互逻辑
• 建立模板和Hooks的文档体系，包括使用说明、示例代码等
• 上传至开发文档中心，供团队成员使用

核心原理详解

1. lottie动效原理

• lottie简介：lottie是Airbnb开源的动效库，支持将After Effects导出的动效文件转换为JSON格式，在Web和移动端上流畅播放
• 动效文件结构：lottie动效文件是一个JSON对象，包含了图层信息、关键帧数据、动画曲线等
• 渲染原理：lottie-web库解析JSON文件，使用Canvas或SVG渲染动效
• 性能优化：lottie支持硬件加速、缓存机制、按需加载等优化策略

2. CSS变量动效原理

• CSS变量特性：CSS变量（Custom Properties）允许在CSS中定义和使用变量，支持动态修改
• 动效实现机制：通过JavaScript动态修改CSS变量的值，触发CSS过渡或动画效果
• 优势：
  • 减少JavaScript代码量，提高开发效率
  • 利用浏览器原生CSS引擎，性能更好
  • 支持主题切换和动效定制
  • 代码更易于维护和扩展

3. 动效性能优化原理

• 硬件加速：使用transform和opacity属性实现动效，触发GPU加速
• 减少重排重绘：避免频繁修改会导致重排的属性，如width、height、top、left等
• 使用will-change：提前告知浏览器哪些属性会变化，让浏览器做好优化准备
• 合理使用动画曲线：选择合适的缓动函数，避免过度使用复杂的动画曲线
• 按需加载：只在需要时加载动效资源，避免不必要的性能消耗

4. 功能模板和自定义Hooks设计原理

• 模板设计原则：
  • 高内聚低耦合：每个模板专注于解决一个特定的问题
  • 可配置性：支持通过配置参数定制模板的行为和样式
  • 易用性：提供简洁的API，易于使用和集成
  • 可扩展性：支持通过继承或组合的方式扩展模板功能
• Hooks设计原则：
  • 单一职责：每个Hook专注于解决一个特定的问题
  • 可复用性：封装通用的逻辑，支持在多个组件中复用
  • 易用性：提供简洁的API，易于使用和理解
  • 类型安全：使用TypeScript定义类型，提高代码的可靠性

关键代码实现

1. lottie动效组件

<!-- LottieAnimation.vue -->
<template>
  <div ref="containerRef" :style="containerStyle"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import lottie from 'lottie-web';

interface Props {
  animationData?: any;
  path?: string;
  loop?: boolean | number;
  autoplay?: boolean;
  renderer?: 'svg' | 'canvas' | 'html';
  width?: string | number;
  height?: string | number;
  className?: string;
}

const props = withDefaults(defineProps<Props>(), {
  loop: true,
  autoplay: true,
  renderer: 'svg',
  width: '100%',
  height: '100%',
  className: '',
});

const emit = defineEmits<{
  (e: 'animationLoaded', animation: any): void;
  (e: 'animationCompleted'): void;
  (e: 'animationLoopComplete'): void;
}>();

const containerRef = ref<HTMLElement | null>(null);
let animation: any = null;

const containerStyle = {
  width: props.width,
  height: props.height,
  className: props.className,
};

// 初始化lottie动画
const initAnimation = () => {
  if (!containerRef.value) return;
  
  // 销毁之前的动画实例
  if (animation) {
    animation.destroy();
  }
  
  const options: any = {
    container: containerRef.value,
    renderer: props.renderer,
    loop: props.loop,
    autoplay: props.autoplay,
    rendererSettings: {
      preserveAspectRatio: 'xMidYMid meet',
    },
  };
  
  // 支持两种加载方式：直接传入animationData或通过path加载
  if (props.animationData) {
    options.animationData = props.animationData;
  } else if (props.path) {
    options.path = props.path;
  } else {
    console.error('LottieAnimation: animationData or path is required');
    return;
  }
  
  // 创建动画实例
  animation = lottie.loadAnimation(options);
  
  // 监听动画事件
  animation.addEventListener('DOMLoaded', () => {
    emit('animationLoaded', animation);
  });
  
  animation.addEventListener('complete', () => {
    emit('animationCompleted');
  });
  
  animation.addEventListener('loopComplete', () => {
    emit('animationLoopComplete');
  });
};

// 播放控制方法
defineExpose({
  play: () => animation?.play(),
  pause: () => animation?.pause(),
  stop: () => animation?.stop(),
  setSpeed: (speed: number) => animation?.setSpeed(speed),
  goToAndPlay: (value: number, isFrame: boolean = false) => animation?.goToAndPlay(value, isFrame),
  goToAndStop: (value: number, isFrame: boolean = false) => animation?.goToAndStop(value, isFrame),
  destroy: () => animation?.destroy(),
});

// 监听props变化
watch(
  [() => props.animationData, () => props.path, () => props.loop, () => props.autoplay],
  () => {
    initAnimation();
  },
  { deep: true }
);

// 生命周期钩子
onMounted(() => {
  initAnimation();
});

onUnmounted(() => {
  if (animation) {
    animation.destroy();
  }
});
</script>

2. CSS变量动效系统

/* css-variables.css */
:root {
  /* 颜色变量 */
  --primary-color: #409eff;
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  
  /* 动效变量 */
  --transition-duration: 0.3s;
  --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-duration: 1s;
  
  /* 红包动效变量 */
  --red-packet-scale: 1;
  --red-packet-rotate: 0deg;
  --red-packet-opacity: 1;
  
  /* 星钻动效变量 */
  --star-scale: 1;
  --star-rotate: 0deg;
  --star-opacity: 1;
  --star-glow-opacity: 0;
}

/* 红包动效样式 */
.red-packet {
  transform: scale(var(--red-packet-scale)) rotate(var(--red-packet-rotate));
  opacity: var(--red-packet-opacity);
  transition: 
    transform var(--transition-duration) var(--transition-timing-function),
    opacity var(--transition-duration) var(--transition-timing-function);
}

/* 星钻动效样式 */
.star {
  transform: scale(var(--star-scale)) rotate(var(--star-rotate));
  opacity: var(--star-opacity);
  transition: 
    transform var(--transition-duration) var(--transition-timing-function),
    opacity var(--transition-duration) var(--transition-timing-function);
}

.star-glow {
  opacity: var(--star-glow-opacity);
  transition: opacity var(--transition-duration) var(--transition-timing-function);
  filter: blur(8px);
}

// 动效控制工具函数
const animationUtils = {
  // 设置CSS变量
  setCSSVariable(element: HTMLElement | Document, name: string, value: any) {
    (element || document.documentElement).style.setProperty(name, value);
  },
  
  // 获取CSS变量
  getCSSVariable(element: HTMLElement | Document, name: string) {
    return getComputedStyle(element || document.documentElement).getPropertyValue(name);
  },
  
  // 红包弹出动画
  redPacketPopAnimation(element: HTMLElement) {
    // 初始状态
    this.setCSSVariable(element, '--red-packet-scale', '0.5');
    this.setCSSVariable(element, '--red-packet-opacity', '0');
    
    // 触发重排
    element.offsetHeight;
    
    // 目标状态
    this.setCSSVariable(element, '--red-packet-scale', '1');
    this.setCSSVariable(element, '--red-packet-opacity', '1');
  },
  
  // 星钻闪烁动画
  starTwinkleAnimation(element: HTMLElement, glowElement: HTMLElement) {
    const twinkle = () => {
      // 放大并显示发光效果
      this.setCSSVariable(element, '--star-scale', '1.2');
      this.setCSSVariable(glowElement, '--star-glow-opacity', '1');
      
      setTimeout(() => {
        // 恢复正常状态
        this.setCSSVariable(element, '--star-scale', '1');
        this.setCSSVariable(glowElement, '--star-glow-opacity', '0');
        
        // 随机延迟后再次闪烁
        setTimeout(twinkle, Math.random() * 2000 + 1000);
      }, 500);
    };
    
    // 开始闪烁
    twinkle();
  },
};

3. 自定义动效Hooks

// useAnimation.ts - 自定义动效Hook
import { ref, onMounted, onUnmounted } from 'vue';

// 红包动效Hook
export function useRedPacketAnimation() {
  const isOpening = ref(false);
  const isOpen = ref(false);
  const amount = ref(0);
  
  // 打开红包
  const openRedPacket = (targetAmount: number = Math.random() * 100) => {
    isOpening.value = true;
    
    // 模拟打开动画延迟
    return new Promise<void>((resolve) => {
      setTimeout(() => {
        amount.value = targetAmount;
        isOpen.value = true;
        isOpening.value = false;
        resolve();
      }, 1000);
    });
  };
  
  // 重置红包
  const resetRedPacket = () => {
    isOpening.value = false;
    isOpen.value = false;
    amount.value = 0;
  };
  
  return {
    isOpening,
    isOpen,
    amount,
    openRedPacket,
    resetRedPacket,
  };
}

// 星钻动效Hook
export function useStarAnimation(count: number = 10) {
  const stars = ref<Array<{ id: number; x: number; y: number; scale: number; opacity: number; rotation: number }>>([]);
  
  // 生成随机星钻
  const generateStars = () => {
    stars.value = Array.from({ length: count }, (_, i) => ({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      scale: Math.random() * 0.5 + 0.5,
      opacity: Math.random() * 0.5 + 0.5,
      rotation: Math.random() * 360,
    }));
  };
  
  // 掉落星钻
  const dropStar = (starId: number) => {
    const star = stars.value.find(s => s.id === starId);
    if (star) {
      star.y = 150; // 掉落到底部
      star.opacity = 0;
    }
  };
  
  onMounted(() => {
    generateStars();
  });
  
  return {
    stars,
    generateStars,
    dropStar,
  };
}

4. 领红包动效组件

<!-- RedPacket.vue -->
<template>
  <div class="red-packet-container" ref="containerRef">
    <!-- 红包未打开状态 -->
    <div 
      v-if="!isOpen" 
      class="red-packet closed"
      @click="handleOpen"
    >
      <div class="red-packet-top"></div>
      <div class="red-packet-body">
        <div class="red-packet-label">点击拆红包</div>
      </div>
      <div class="red-packet-bottom"></div>
      
      <!-- 打开动画 -->
      <div v-if="isOpening" class="opening-animation">
        <div class="opening-line"></div>
        <div class="opening-line"></div>
        <div class="opening-line"></div>
      </div>
    </div>
    
    <!-- 红包打开状态 -->
    <div v-else class="red-packet opened">
      <div class="red-packet-top opened"></div>
      <div class="red-packet-body opened">
        <div class="red-packet-amount">¥{{ amount.toFixed(2) }}</div>
        <div class="red-packet-greeting">恭喜发财</div>
      </div>
      <div class="red-packet-bottom opened"></div>
      
      <!-- 金额动画 -->
      <div class="amount-animation">
        <div class="amount-number" v-for="i in 5" :key="i">{{ randomNumber }}</div>
      </div>
    </div>
    
    <!-- 星钻效果 -->
    <div class="stars-container">
      <div 
        v-for="star in stars" 
        :key="star.id"
        class="star"
        :style="{
          left: `${star.x}%`,
          top: `${star.y}%`,
          transform: `scale(${star.scale}) rotate(${star.rotation}deg)`,
          opacity: star.opacity
        }"
      >
        ✨
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRedPacketAnimation } from '../hooks/useAnimation';
import { useStarAnimation } from '../hooks/useAnimation';

const containerRef = ref<HTMLElement | null>(null);

// 使用红包动效Hook
const { isOpening, isOpen, amount, openRedPacket, resetRedPacket } = useRedPacketAnimation();

// 使用星钻动效Hook
const { stars, generateStars, dropStar } = useStarAnimation(8);

// 随机数字（用于金额动画）
const randomNumber = computed(() => Math.floor(Math.random() * 10));

// 处理打开红包
const handleOpen = async () => {
  if (!isOpening.value && !isOpen.value) {
    // 生成新的星钻
    generateStars();
    
    // 打开红包
    await openRedPacket(Math.random() * 100);
    
    // 星钻掉落效果
    setTimeout(() => {
      stars.value.forEach(star => {
        dropStar(star.id);
      });
    }, 500);
  }
};
</script>

<style scoped>
.red-packet-container {
  position: relative;
  width: 200px;
  height: 240px;
  margin: 0 auto;
  perspective: 1000px;
}

.red-packet {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.red-packet:hover {
  transform: scale(1.05);
}

.red-packet-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
  transition: all 0.5s ease;
  z-index: 2;
}

.red-packet-body {
  position: absolute;
  top: 60px;
  left: 10px;
  right: 10px;
  height: 160px;
  background: linear-gradient(135deg, #ff3742 0%, #ff2a3a 100%);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease;
  z-index: 1;
}

.red-packet-bottom {
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 20px;
  background: linear-gradient(135deg, #ff2a3a 0%, #ff1a2e 100%);
  border-radius: 0 0 8px 8px;
  transition: all 0.5s ease;
}

.red-packet-label {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: pulse 1.5s infinite;
}

.red-packet.opened .red-packet-top {
  transform: translateY(-30px) rotateX(45deg);
  opacity: 0.8;
}

.red-packet.opened .red-packet-body {
  top: 40px;
  height: 180px;
  background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
}

.red-packet.opened .red-packet-bottom {
  transform: translateY(20px);
  opacity: 0.8;
}

.red-packet-amount {
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
  animation: bounceIn 0.6s ease;
}

.red-packet-greeting {
  color: #fff;
  font-size: 16px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 打开动画 */
.opening-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 8px;
}

.opening-line {
  width: 4px;
  height: 20px;
  background: #fff;
  border-radius: 2px;
  animation: openingLine 0.6s ease infinite;
}

.opening-line:nth-child(2) {
  animation-delay: 0.2s;
}

.opening-line:nth-child(3) {
  animation-delay: 0.4s;
}

/* 金额动画 */
.amount-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.amount-number {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: floatUp 1s ease-out forwards;
  opacity: 0;
}

.amount-number:nth-child(1) {
  animation-delay: 0.1s;
}

.amount-number:nth-child(2) {
  animation-delay: 0.2s;
}

.amount-number:nth-child(3) {
  animation-delay: 0.3s;
}

.amount-number:nth-child(4) {
  animation-delay: 0.4s;
}

.amount-number:nth-child(5) {
  animation-delay: 0.5s;
}

/* 星钻容器 */
.stars-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.star {
  position: absolute;
  font-size: 24px;
  transition: all 1s ease;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

/* 动画关键帧 */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes openingLine {
  0%, 100% {
    transform: scaleY(1);
    opacity: 1;
  }
  50% {
    transform: scaleY(1.5);
    opacity: 0.5;
  }
}

@keyframes floatUp {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(0, -50px) scale(1);
    opacity: 0;
  }
}
</style>

易错点与坑点分析

1. lottie动效性能问题

• 问题：lottie动效在低端设备上可能出现卡顿
• 原因：lottie动效需要解析复杂的JSON文件，渲染大量图层和关键帧，消耗较多CPU和内存资源
• 解决方案：
  • 优化AE动效文件，减少图层数量和关键帧数量
  • 选择合适的渲染器（Canvas或SVG），Canvas适合复杂动效，SVG适合简单动效
  • 实现动效的按需加载和销毁，避免同时播放多个复杂动效
  • 使用硬件加速，避免在动效播放时执行其他复杂的JavaScript代码

2. CSS变量动效性能问题

• 问题：频繁修改CSS变量可能导致性能问题
• 原因：修改CSS变量会触发CSS重新计算和重绘，如果频繁修改，会影响页面性能
• 解决方案：
  • 避免频繁修改CSS变量，尽量一次性修改多个变量
  • 使用will-change属性提前告知浏览器哪些属性会变化
  • 合理使用CSS过渡和动画，避免过度使用复杂的动画效果
  • 优化CSS选择器，减少样式计算的复杂度

3. 动效设计与开发协作问题

• 问题：动效设计与开发之间的沟通成本高，容易出现理解偏差
• 原因：设计师和开发者使用不同的工具和语言，对动效的理解可能存在差异
• 解决方案：
  • 建立统一的动效设计规范，包括动效风格、时长、缓动函数等
  • 使用lottie等工具实现动效的无缝衔接，减少开发还原设计的工作量
  • 设计师直接导出lottie动效文件，开发者无需手动实现复杂动效
  • 建立动效组件库，设计师可以直接选择和配置动效

4. 动效组件的可复用性问题

• 问题：动效组件的可复用性差，难以适应不同的场景
• 原因：动效组件可能过于耦合特定的业务逻辑，缺乏足够的配置选项
• 解决方案：
  • 设计高内聚低耦合的动效组件，分离动效逻辑和业务逻辑
  • 提供丰富的配置选项，支持自定义动效的参数和样式
  • 使用组合式API和自定义Hooks，提高动效逻辑的可复用性
  • 建立动效组件的文档和示例，方便其他开发者使用

5. 动效在不同设备上的兼容性问题

• 问题：动效在不同设备和浏览器上的表现不一致
• 原因：不同浏览器对CSS特性和lottie的支持程度不同，设备性能也存在差异
• 解决方案：
  • 测试动效在主流浏览器和设备上的表现，确保兼容性
  • 使用特性检测，为不支持的浏览器提供降级方案
  • 优化动效性能，确保在低端设备上也能流畅播放
  • 建立动效的性能基线，确保动效的帧率符合要求

解决方案与最佳实践

1. lottie动效最佳实践

<!-- lottie动效最佳实践示例 -->
<template>
  <div class="lottie-example">
    <!-- 只在需要时加载lottie动效 -->
    <LottieAnimation 
      v-if="showAnimation" 
      :path="animationPath" 
      :loop="true"
      :autoplay="true"
      :width="300"
      :height="300"
      @animationLoaded="handleAnimationLoaded"
    />
    
    <button @click="toggleAnimation">{{ showAnimation ? '隐藏动效' : '显示动效' }}</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import LottieAnimation from './components/LottieAnimation.vue';

const showAnimation = ref(true);
const animationPath = ref('/animations/celebration.json');
let animationInstance: any = null;

// 切换动效显示/隐藏
const toggleAnimation = () => {
  showAnimation.value = !showAnimation.value;
};

// 动效加载完成回调
const handleAnimationLoaded = (animation: any) => {
  animationInstance = animation;
  
  // 可以在这里调整动效参数
  animation.setSpeed(1.2);
};
</script>

2. CSS变量动效最佳实践

/* CSS变量动效最佳实践 */
.button {
  /* 基础样式 */
  padding: 12px 24px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  /* 动效配置 */
  transition: all var(--transition-duration) var(--transition-timing-function);
  will-change: transform, box-shadow;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background-color: var(--primary-color-hover);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 加载状态动效 */
.button.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.button.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

3. 动效组件设计最佳实践

// 动效组件设计原则示例
import { defineComponent, PropType } from 'vue';

// 高可配置的动效组件
export default defineComponent({
  name: 'AnimatedButton',
  props: {
    // 基础属性
    type: {
      type: String as PropType<'primary' | 'success' | 'warning' | 'danger'>,
      default: 'primary',
    },
    size: {
      type: String as PropType<'small' | 'medium' | 'large'>,
      default: 'medium',
    },
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    
    // 动效配置
    hoverEffect: {
      type: Boolean,
      default: true,
    },
    clickEffect: {
      type: Boolean,
      default: true,
    },
    loadingEffect: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['click'],
  setup(props, { emit }) {
    // 组件逻辑
    const handleClick = (event: MouseEvent) => {
      if (!props.disabled && !props.loading) {
        emit('click', event);
      }
    };
    
    return {
      handleClick,
    };
  },
  template: `
    <button
      class="animated-button"
      :class="[
        `animated-button--${type}`,
        `animated-button--${size}`,
        { 'animated-button--loading': loading },
        { 'animated-button--disabled': disabled },
        { 'animated-button--hover-effect': hoverEffect },
        { 'animated-button--click-effect': clickEffect },
      ]"
      :disabled="disabled || loading"
      @click="handleClick"
    >
      <slot></slot>
    </button>
  `,
});

4. 自定义Hooks最佳实践

// 自定义动效Hooks最佳实践
import { ref, onMounted, onUnmounted, Ref } from 'vue';

// 通用的元素进入视口检测Hook
export function useIntersectionObserver(
  elementRef: Ref<HTMLElement | null>,
  options: IntersectionObserverInit = {}
) {
  const isIntersecting = ref(false);
  let observer: IntersectionObserver | null = null;
  
  const defaultOptions: IntersectionObserverInit = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1,
    ...options,
  };
  
  onMounted(() => {
    if (typeof IntersectionObserver === 'undefined') {
      console.warn('IntersectionObserver is not supported in this browser');
      isIntersecting.value = true;
      return;
    }
    
    observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        isIntersecting.value = entry.isIntersecting;
      });
    }, defaultOptions);
    
    if (elementRef.value) {
      observer.observe(elementRef.value);
    }
  });
  
  onUnmounted(() => {
    if (observer) {
      observer.disconnect();
    }
  });
  
  return {
    isIntersecting,
  };
}

// 元素进入视口动效Hook
export function useScrollAnimation(
  elementRef: Ref<HTMLElement | null>,
  animationClass: string = 'animate-fade-in'
) {
  const { isIntersecting } = useIntersectionObserver(elementRef);
  const hasAnimated = ref(false);
  
  // 监听元素进入视口事件
  isIntersecting.value && !hasAnimated.value && (() => {
    if (elementRef.value) {
      elementRef.value.classList.add(animationClass);
      hasAnimated.value = true;
    }
  })();
  
  return {
    isIntersecting,
    hasAnimated,
  };
}

实际效果与收益

1. 动效质量提升

• 采用lottie和CSS变量实现的动效更加流畅，视觉效果更好
• 动效的一致性和规范性得到了提升，统一了动效风格
• 支持更多复杂的动效效果，如3D旋转、粒子效果等

2. 开发效率提升

• 动效开发效率提升50%以上，从原来的2天/个减少到1天/个
• 减少了动效代码的编写量，提高了代码复用率
• 简化了动效的调试和维护工作

3. 团队协作效率提升

• 降低了动效设计与开发之间的沟通成本
• 设计师可以直接导出动效文件，开发者无需手动实现复杂动效
• 建立了动效组件库和Hooks库，方便团队成员共享和复用

4. 用户体验改善

• 流畅的动效提升了用户体验，增强了用户对产品的好感度
• 关键交互场景的动效设计，如领红包、星钻展示等，提高了用户参与度
• 动效反馈增强了用户操作的确认感，减少了用户的操作焦虑

5. 代码可维护性提升

• 动效代码的组织结构更加清晰，便于维护和扩展
• 建立了动效设计规范和开发规范，确保了代码质量
• 动效组件和Hooks的复用性高，减少了代码冗余

总结

动效设计与开发效率提升项目，通过采用lottie和CSS变量实现流畅的动效设计，并总结提炼常用功能模板和自定义Hooks，显著提升了动效开发效率和质量。该项目的核心价值在于：

1. 技术选型优化：选择了合适的动效技术栈，平衡了动效质量和开发效率
2. 动效系统设计：建立了完整的动效系统，包括动效组件、动效工具函数、自定义Hooks等
3. 开发规范建立：建立了动效设计规范和开发规范，确保了动效代码的可维护性和一致性
4. 团队协作改进：降低了动效设计与开发之间的沟通成本，提高了团队协作效率
5. 用户体验提升：流畅的动效设计提升了用户体验，增强了产品的竞争力

核心技术点

• lottie动效原理和优化
• CSS变量动效系统设计
• 核心交互场景动效实现
• 功能模板和自定义Hooks提炼
• 动效性能优化
• 动效设计与开发协作

面试答题要点

1. 如何选择合适的动效技术栈？
2. lottie动效的原理是什么？如何优化lottie动效性能？
3. CSS变量在动效设计中有什么优势？如何优化CSS变量动效性能？
4. 如何设计高可复用的动效组件？
5. 如何建立动效设计与开发之间的协作机制？
6. 如何优化动效性能，确保在不同设备上流畅播放？

通过掌握这些核心技术点和最佳实践，可以建立一套完整的动效设计与开发体系，显著提升动效开发效率和质量，为用户提供更好的产品体验。