当前位置：首页 > VUE

vue动画实现跑动

2026-02-20 02:01:03VUE

Vue动画实现跑动效果

使用Vue的Transition组件

Vue内置的<transition>组件可以用于实现元素进入/离开的动画效果。通过CSS定义动画关键帧，结合Vue的过渡类名实现跑动效果。

<template>
  <div class="runner-container">
    <transition name="run">
      <div class="runner" v-if="isRunning"></div>
    </transition>
    <button @click="toggleRun">Toggle Run</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRunning: false
    }
  },
  methods: {
    toggleRun() {
      this.isRunning = !this.isRunning
    }
  }
}
</script>

<style>
.runner {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
}

.run-enter-active {
  animation: run-animation 2s linear infinite;
}

@keyframes run-animation {
  0% {
    left: 0;
    transform: rotate(0deg);
  }
  50% {
    left: 200px;
    transform: rotate(360deg);
  }
  100% {
    left: 400px;
    transform: rotate(720deg);
  }
}
</style>

使用GSAP库实现高级动画

对于更复杂的跑动动画，可以使用GSAP动画库。GSAP提供更精细的动画控制和时间线功能。

<template>
  <div>
    <div ref="runner" class="gsap-runner"></div>
    <button @click="startRun">Start Running</button>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  methods: {
    startRun() {
      gsap.to(this.$refs.runner, {
        x: 500,
        duration: 3,
        repeat: -1,
        yoyo: true,
        ease: "power1.inOut"
      })
    }
  }
}
</script>

<style>
.gsap-runner {
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 50%;
}
</style>

使用CSS变量和Vue数据绑定

通过Vue的数据绑定动态控制CSS变量，实现响应式跑动动画。

<template>
  <div 
    class="dynamic-runner"
    :style="{
      '--run-distance': runDistance + 'px',
      '--run-duration': runDuration + 's'
    }"
    @click="startDynamicRun"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      runDistance: 0,
      runDuration: 2
    }
  },
  methods: {
    startDynamicRun() {
      this.runDistance = 300
      setTimeout(() => {
        this.runDistance = 0
      }, 2000)
    }
  }
}
</script>

<style>
.dynamic-runner {
  width: 60px;
  height: 60px;
  background-color: green;
  transition: transform var(--run-duration) ease-in-out;
  transform: translateX(var(--run-distance));
  cursor: pointer;
}
</style>

使用Vue的Animate.css集成

通过Animate.css库快速实现预定义的跑动动画效果。

<template>
  <div>
    <div 
      class="animated-runner"
      :class="{'animate__animated animate__bounce': isAnimating}"
      @click="toggleAnimation"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAnimating: false
    }
  },
  methods: {
    toggleAnimation() {
      this.isAnimating = !this.isAnimating
    }
  }
}
</script>

<style>
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';

.animated-runner {
  width: 70px;
  height: 70px;
  background-color: purple;
  margin: 20px;
}
</style>

每种方法适用于不同场景：简单动画可使用Vue内置过渡，复杂动画推荐GSAP，快速原型开发可用Animate.css，需要动态控制的动画则适合CSS变量绑定。根据项目需求选择最适合的实现方式。

vue动画实现跑动