bimwe/official_network

Fork 0

Files

张成 3ed48736b6 1

2025-08-25 15:57:54 +08:00

6.9 KiB

Raw Blame History

动画效果使用指南

概述

本项目已集成丰富的动画效果库，包含多种CSS动画、悬停效果、滚动触发动画等，让页面更加生动有趣。

🎯 已集成的动画类型

1. 基础动画类

淡入动画

.fade-in - 淡入
.fade-in-up - 从下方淡入
.fade-in-down - 从上方淡入
.fade-in-left - 从左侧淡入
.fade-in-right - 从右侧淡入

滑入动画

.slide-in-up - 从下方滑入
.slide-in-down - 从上方滑入
.slide-in-left - 从左侧滑入
.slide-in-right - 从右侧滑入

缩放动画

.zoom-in - 缩放进入
.zoom-out - 缩放退出

特殊效果动画

.bounce - 弹跳
.pulse - 脉冲
.shake - 抖动
.swing - 摇摆
.rotate-in - 旋转进入
.flip-in-x - X轴翻转
.flip-in-y - Y轴翻转
.light-speed-in - 光速进入
.rubber-band - 橡皮筋
.wobble - 摇摆
.tada - 庆祝
.heart-beat - 心跳
.hinge - 铰链
.roll-in - 滚入
.roll-out - 滚出

2. 悬停动画效果

.hover-lift - 悬停时上浮
.hover-scale - 悬停时缩放
.hover-rotate - 悬停时旋转
.hover-glow - 悬停时发光
.hover-bounce - 悬停时弹跳

3. 滚动触发动画

.animate-on-scroll - 滚动时触发动画
.animate-stagger - 交错动画容器

4. 高级动画效果

.gradient-bg - 渐变背景动画
.neon-text - 霓虹灯文字效果
.wave - 波浪效果
.particles - 粒子效果
.flip-card - 3D翻转卡片
.typewriter - 打字机效果

🚀 使用方法

基础用法

<!-- 添加动画类 -->
<div class="animate fade-in-up">这个元素会从下方淡入</div>

<!-- 设置动画时长 -->
<div class="animate fast fade-in-up">快速动画</div>
<div class="animate slow fade-in-up">慢速动画</div>

<!-- 设置动画延迟 -->
<div class="animate fade-in-up delay-1s">延迟1秒</div>
<div class="animate fade-in-up delay-2s">延迟2秒</div>

<!-- 无限循环 -->
<div class="animate infinite pulse">无限脉冲</div>

悬停效果

<!-- 悬停时上浮 -->
<div class="hover-lift">悬停时会上浮</div>

<!-- 悬停时缩放 -->
<div class="hover-scale">悬停时会缩放</div>

<!-- 悬停时发光 -->
<div class="hover-glow">悬停时会发光</div>

滚动触发动画

<!-- 滚动时触发 -->
<div class="animate-on-scroll">滚动到此处时显示</div>

<!-- 交错动画 -->
<div class="animate-stagger">
  <div>第一个元素</div>
  <div>第二个元素</div>
  <div>第三个元素</div>
</div>

组合使用

<!-- 组合多个动画类 -->
<div class="animate fade-in-up delay-1s hover-lift">
  延迟淡入 + 悬停上浮
</div>

<!-- 动画容器 + 悬停效果 -->
<div class="animate-stagger">
  <div class="hover-scale">悬停缩放</div>
  <div class="hover-glow">悬停发光</div>
  <div class="hover-rotate">悬停旋转</div>
</div>

🎨 自定义动画

创建新的关键帧动画

@keyframes customAnimation {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.custom-animate {
  animation-name: customAnimation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

自定义悬停效果

.custom-hover {
  transition: all 0.3s ease;
}

.custom-hover:hover {
  transform: translateY(-20px) rotate(10deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

🔧 JavaScript 动画控制

使用动画助手

// 手动触发动画
window.animationHelper.triggerAnimation(element, 'fade-in');

// 添加滚动动画
window.animationHelper.addScrollAnimation(element, {
  threshold: 0.2,
  delay: 0.5
});

// 添加交错动画
window.animationHelper.addStaggerAnimation(container, {
  delay: 0.2,
  staggerDelay: 0.1
});

事件监听

// 监听动画开始事件
element.addEventListener('animationStart', (event) => {
  console.log('动画开始:', event.detail);
});

// 监听动画触发事件
element.addEventListener('animationTrigger', (event) => {
  console.log('动画触发:', event.detail);
});

📱 响应式动画

移动端优化

/* 移动端减少动画复杂度 */
@media (max-width: 768px) {
  .animate {
    animation-duration: 0.5s;
  }
  
  .floating-particles {
    display: none;
  }
}

性能优化

/* 使用 will-change 优化性能 */
.animate {
  will-change: transform, opacity;
}

/* 使用 transform3d 启用硬件加速 */
.animate {
  transform: translate3d(0, 0, 0);
}

🎭 动画最佳实践

1. 适度使用

不要过度使用动画，影响用户体验
保持动画简洁明了
考虑用户的动画偏好设置

2. 性能考虑

使用 transform 和 opacity 属性
避免在动画中改变布局属性
合理使用 will-change 属性

3. 可访问性

尊重用户的 prefers-reduced-motion 设置
提供动画开关选项
确保动画不影响内容可读性

4. 时机控制

页面加载完成后延迟启动动画
滚动触发动画使用 Intersection Observer
合理设置动画延迟和持续时间

🐛 常见问题

Q: 动画不工作？

A: 检查是否正确引入了 animations.css 文件，确保元素有正确的类名。

Q: 动画性能差？

A: 使用 transform 和 opacity 属性，避免改变布局属性，启用硬件加速。

Q: 移动端动画卡顿？

A: 减少动画复杂度，使用更简单的动画效果，考虑禁用某些复杂动画。

Q: 如何禁用动画？

A: 在CSS中添加 animation: none !important; 或使用 prefers-reduced-motion 媒体查询。

📚 示例代码

完整的动画页面示例

<template>
  <div class="animated-page">
    <!-- 滚动进度条 -->
    <div class="scroll-progress-bar" data-scroll-progress="bar"></div>
    
    <!-- 横幅区域 -->
    <div class="banner animate-on-scroll">
      <h1 class="animate fade-in-down text-glow">欢迎访问</h1>
      <p class="animate fade-in-up delay-1s">精彩内容即将呈现</p>
    </div>
    
    <!-- 内容区域 -->
    <div class="content animate-stagger">
      <div class="card hover-lift">
        <div class="icon animate pulse infinite">🚀</div>
        <h3>快速开始</h3>
        <p>简单易用的开发体验</p>
      </div>
      
      <div class="card hover-scale">
        <div class="icon animate bounce delay-1s">⚡</div>
        <h3>高性能</h3>
        <p>优化的性能表现</p>
      </div>
      
      <div class="card hover-glow">
        <div class="icon animate wobble delay-2s">🎨</div>
        <h3>美观设计</h3>
        <p>现代化的视觉体验</p>
      </div>
    </div>
  </div>
</template>

🎉 总结

通过合理使用这些动画效果，可以让您的页面更加生动有趣，提升用户体验。记住要适度使用，注重性能优化，并考虑可访问性需求。

6.9 KiB Raw Blame History Unescape Escape