vue实现启动动画

实现启动动画的基本方法

在Vue中实现启动动画可以通过多种方式完成，常见的是利用Vue的过渡系统或结合CSS动画。以下是一种典型的实现方式：

创建动画组件 在components文件夹下新建LaunchAnimation.vue文件，内容如下：

<template>
  <transition name="launch" @after-enter="onAnimationComplete">
    <div v-if="show" class="launch-screen">
      <!-- 动画内容，可以是logo、加载条等 -->
      <div class="logo">Your Logo</div>
      <div class="loader"></div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    onAnimationComplete() {
      this.show = false
      this.$emit('animation-complete')
    }
  }
}
</script>

<style scoped>
.launch-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.logo {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

在应用中使用动画组件

在App.vue或主布局文件中引入并使用动画组件：

<template>
  <div id="app">
    <LaunchAnimation @animation-complete="handleAnimationComplete" />
    <!-- 其他应用内容 -->
    <router-view />
  </div>
</template>

<script>
import LaunchAnimation from '@/components/LaunchAnimation.vue'

export default {
  components: {
    LaunchAnimation
  },
  methods: {
    handleAnimationComplete() {
      // 动画完成后的处理逻辑
    }
  }
}
</script>

基于路由的启动动画

如果需要仅在首次加载时显示启动动画，可以结合Vue Router实现：

<template>
  <div id="app">
    <LaunchAnimation 
      v-if="showLaunchAnimation" 
      @animation-complete="handleAnimationComplete" 
    />
    <router-view />
  </div>
</template>

<script>
import LaunchAnimation from '@/components/LaunchAnimation.vue'

export default {
  components: {
    LaunchAnimation
  },
  data() {
    return {
      showLaunchAnimation: true
    }
  },
  methods: {
    handleAnimationComplete() {
      this.showLaunchAnimation = false
    }
  },
  created() {
    // 检查是否首次访问
    if (sessionStorage.getItem('visited')) {
      this.showLaunchAnimation = false
    } else {
      sessionStorage.setItem('visited', 'true')
    }
  }
}
</script>

使用第三方动画库

对于更复杂的动画效果，可以结合第三方动画库如Animate.css：

安装Animate.css：

npm install animate.css

修改动画组件：

<template>
  <transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
    @after-enter="onAnimationComplete"
  >
    <div v-if="show" class="launch-screen animate__animated animate__fadeIn">
      <!-- 动画内容 -->
    </div>
  </transition>
</template>

<script>
import 'animate.css'
export default {
  // 组件逻辑
}
</script>

带进度显示的启动动画

实现带加载进度的启动动画：

<template>
  <transition name="launch" @after-enter="onAnimationComplete">
    <div v-if="show" class="launch-screen">
      <div class="progress-bar">
        <div class="progress" :style="{ width: progress + '%' }"></div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      progress: 0
    }
  },
  mounted() {
    const interval = setInterval(() => {
      this.progress += 10
      if (this.progress >= 100) {
        clearInterval(interval)
      }
    }, 300)
  },
  methods: {
    onAnimationComplete() {
      this.show = false
      this.$emit('animation-complete')
    }
  }
}
</script>

<style scoped>
.progress-bar {
  width: 80%;
  height: 20px;
  background: #f3f3f3;
  border-radius: 10px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #42b983;
  transition: width 0.3s ease;
}
</style>

这些方法提供了不同复杂度的Vue启动动画实现方案，可以根据项目需求选择合适的实现方式。