vue实现好看的特效

Vue 实现视觉特效的方法

在 Vue 中实现视觉特效可以通过多种方式完成，包括 CSS 动画、第三方动画库、Canvas/SVG 渲染等。以下是几种常见的实现方法：

CSS 过渡与动画

通过 Vue 的 <transition> 组件结合 CSS 实现平滑的过渡效果。例如实现元素淡入淡出：

<transition name="fade">
  <div v-if="show">内容</div>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

GSAP 动画库

GSAP 是一个专业级动画库，适合实现复杂的时间轴动画。在 Vue 中安装 GSAP 后：

import { gsap } from "gsap";

export default {
  mounted() {
    gsap.to(".box", {
      duration: 1,
      x: 100,
      rotation: 360,
      ease: "bounce.out"
    });
  }
}

Animate.css 预置动画

通过流行的 Animate.css 快速添加预设动画效果：

npm install animate.css

import 'animate.css';

<div class="animate__animated animate__bounce">弹跳效果</div>

粒子特效实现

使用 particles.js 或 tsParticles 创建背景粒子效果：

npm install tsparticles

import Particles from "tsparticles";

export default {
  mounted() {
    this.$nextTick(() => {
      Particles.init({
        selector: ".particles",
        color: ["#03dac6", "#ff0266"],
        connectParticles: true
      });
    });
  }
}

3D 视觉效果

通过 Three.js 实现 3D 渲染效果：

import * as THREE from 'three';

export default {
  mounted() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.container.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  }
}

视差滚动效果

使用 vue-parallax-js 创建视差效果：

npm install vue-parallax-js

import VueParallaxJs from 'vue-parallax-js'

Vue.use(VueParallaxJs)

<parallax :speed="0.5">
  <img src="background.jpg">
</parallax>

鼠标跟随特效

实现自定义鼠标跟随效果：

export default {
  data() {
    return {
      x: 0,
      y: 0
    }
  },
  methods: {
    updatePosition(e) {
      this.x = e.clientX;
      this.y = e.clientY;
    }
  },
  mounted() {
    window.addEventListener('mousemove', this.updatePosition);
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.updatePosition);
  }
}

<div class="follower" :style="{ left: x + 'px', top: y + 'px' }"></div>

响应式动画技巧

使用 Vue 的响应式数据驱动动画：

export default {
  data() {
    return {
      scale: 1
    }
  },
  methods: {
    hoverEffect() {
      this.scale = 1.2;
    },
    resetEffect() {
      this.scale = 1;
    }
  }
}

<div 
  @mouseover="hoverEffect"
  @mouseleave="resetEffect"
  :style="{ transform: `scale(${scale})` }"
>
  悬停放大
</div>

这些方法可以根据项目需求组合使用，Vue 的响应式特性使其特别适合创建动态交互效果。对于性能要求高的场景，建议使用 CSS 硬件加速属性如 transform 和 opacity。