Vue 3 项目必学：ScrollReveal 滚动动画库集成与优化指南

📖 概述

ScrollReveal 是一个强大的 JavaScript 库，用于在元素进入视口时创建滚动动画。在 Vue 3 中集成 ScrollReveal 可以为应用添加优雅的滚动触发动画效果。

🎯 核心特性

• 🎬 滚动触发动画
• 📱 响应式支持
• ⚡ 高性能
• 🎨 丰富的动画选项
• 🔧 易于集成

📦 安装

# 安装 ScrollReveal
npm install scrollreveal

# 安装类型定义（TypeScript）
npm install @types/scrollreveal

🔧 基本集成

创建 ScrollReveal 插件

// plugins/scrollReveal.ts
import ScrollReveal from "scrollreveal";

export default {
  install: (app: any) => {
    app.config.globalProperties.$sr = ScrollReveal();
  },
};

在 main.ts 中注册

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import ScrollReveal from "./plugins/scrollReveal";

const app = createApp(App);
app.use(ScrollReveal);
app.mount("#app");

💻 基本用法

简单动画

<template>
  <div class="container">
    <div class="animate-item" data-sr="enter bottom, move 50px, over 0.6s">
      滚动动画内容
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import ScrollReveal from "scrollreveal";

const sr = ScrollReveal();

onMounted(() => {
  sr.reveal(".animate-item", {
    delay: 200,
    distance: "50px",
    duration: 1000,
    easing: "ease-in-out",
    origin: "bottom",
    scale: 0.85,
    opacity: 0,
  });
});
</script>

组合式 API 封装

<script setup lang="ts">
import { onMounted, ref } from "vue";
import ScrollReveal from "scrollreveal";

const containerRef = ref<HTMLElement>();
const sr = ScrollReveal();

onMounted(() => {
  if (containerRef.value) {
    sr.reveal(containerRef.value, {
      delay: 300,
      distance: "30px",
      duration: 800,
      origin: "left",
      opacity: 0,
      scale: 0.9,
    });
  }
});
</script>

<template>
  <div ref="containerRef" class="animated-container">动画内容</div>
</template>

🎨 高级用法

自定义动画配置

<script setup lang="ts">
import { onMounted } from "vue";
import ScrollReveal from "scrollreveal";

const sr = ScrollReveal({
  distance: "60px",
  duration: 1000,
  easing: "cubic-bezier(0.5, 0, 0, 1)",
  interval: 200,
  opacity: 0,
  origin: "bottom",
  scale: 0.85,
  cleanup: true,
  container: document.documentElement,
  delay: 0,
  desktop: true,
  mobile: true,
  reset: false,
  useDelay: "always",
  viewFactor: 0.25,
  viewOffset: {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
  },
});

onMounted(() => {
  // 为不同元素配置不同动画
  sr.reveal(".fade-in", { origin: "bottom" });
  sr.reveal(".slide-in", { origin: "left" });
  sr.reveal(".scale-in", { scale: 0.5 });
});
</script>

响应式动画

<script setup lang="ts">
import { onMounted } from "vue";
import ScrollReveal from "scrollreveal";

const sr = ScrollReveal();

onMounted(() => {
  // 桌面端动画
  if (window.innerWidth > 768) {
    sr.reveal(".desktop-animation", {
      distance: "100px",
      duration: 1200,
    });
  }

  // 移动端动画
  if (window.innerWidth <= 768) {
    sr.reveal(".mobile-animation", {
      distance: "50px",
      duration: 800,
    });
  }
});
</script>

序列动画

<script setup lang="ts">
import { onMounted } from "vue";
import ScrollReveal from "scrollreveal";

const sr = ScrollReveal();

onMounted(() => {
  // 创建序列动画
  const items = document.querySelectorAll(".sequence-item");
  items.forEach((item, index) => {
    sr.reveal(item, {
      delay: index * 150,
      distance: "30px",
      origin: "bottom",
    });
  });
});
</script>

<template>
  <div class="sequence-container">
    <div class="sequence-item">项目 1</div>
    <div class="sequence-item">项目 2</div>
    <div class="sequence-item">项目 3</div>
  </div>
</template>

🎯 最佳实践

1️⃣ 性能优化

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import ScrollReveal from "scrollreveal";

const sr = ScrollReveal();

onMounted(() => {
  sr.reveal(".animate-item");
});

onUnmounted(() => {
  // 清理实例
  sr.destroy();
});
</script>

2️⃣ 条件动画

<script setup lang="ts">
import { onMounted, ref } from "vue";
import ScrollReveal from "scrollreveal";

const shouldAnimate = ref(true);
const sr = ScrollReveal();

onMounted(() => {
  if (shouldAnimate.value) {
    sr.reveal(".conditional-animation");
  }
});
</script>

3️⃣ 自定义指令

// directives/scrollReveal.ts
import { Directive } from "vue";
import ScrollReveal from "scrollreveal";

const sr = ScrollReveal();

export const scrollReveal: Directive = {
  mounted(el, binding) {
    const options = binding.value || {};
    sr.reveal(el, options);
  },
};

⚠️ 注意事项

• 🔄 确保在 onMounted 中初始化
• 🧹 组件卸载时清理实例
• 📱 考虑移动端性能
• 🎯 避免过度使用动画
• 🔧 合理配置动画参数

📝 总结

ScrollReveal 为 Vue 3 应用提供了强大的滚动动画能力。通过合理配置和最佳实践，可以创建流畅、优雅的用户体验。记住要平衡视觉效果和性能表现。