当前位置：首页 > VUE

vue实现浮窗游动

2026-01-21 15:59:58VUE

Vue实现浮窗游动效果

核心实现思路

使用Vue的响应式数据绑定和CSS动画结合，通过修改元素的transform属性实现游动效果。需要计算随机运动路径并平滑过渡。

基础实现代码

<template>
  <div class="floating-window" :style="windowStyle">
    <!-- 浮窗内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      posX: 0,
      posY: 0,
      windowWidth: 200,
      windowHeight: 150
    }
  },
  computed: {
    windowStyle() {
      return {
        transform: `translate(${this.posX}px, ${this.posY}px)`,
        width: `${this.windowWidth}px`,
        height: `${this.height}px`
      }
    }
  },
  mounted() {
    this.startAnimation()
  },
  methods: {
    getRandomPosition() {
      const maxX = window.innerWidth - this.windowWidth
      const maxY = window.innerHeight - this.windowHeight
      return {
        x: Math.random() * maxX,
        y: Math.random() * maxY
      }
    },
    startAnimation() {
      const duration = 3000 + Math.random() * 4000
      const newPos = this.getRandomPosition()

      this.posX = newPos.x
      this.posY = newPos.y

      setTimeout(() => {
        this.startAnimation()
      }, duration)
    }
  }
}
</script>

<style>
.floating-window {
  position: fixed;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  transition: transform 3s ease-in-out;
  z-index: 1000;
}
</style>

高级优化方案

增加贝塞尔曲线路径运动，使移动轨迹更自然。使用requestAnimationFrame实现平滑动画。

methods: {
  animate() {
    const start = { x: this.posX, y: this.posY }
    const end = this.getRandomPosition()
    const control1 = this.getRandomControlPoint(start, end)
    const control2 = this.getRandomControlPoint(start, end)

    const startTime = performance.now()
    const duration = 3000

    const step = (currentTime) => {
      const elapsed = currentTime - startTime
      const progress = Math.min(elapsed / duration, 1)

      // 三次贝塞尔曲线计算
      this.posX = this.cubicBezier(
        start.x, control1.x, control2.x, end.x, progress
      )
      this.posY = this.cubicBezier(
        start.y, control1.y, control2.y, end.y, progress
      )

      if (progress < 1) {
        requestAnimationFrame(step)
      } else {
        this.animate()
      }
    }

    requestAnimationFrame(step)
  },
  cubicBezier(p0, p1, p2, p3, t) {
    const mt = 1 - t
    return mt*mt*mt*p0 + 3*mt*mt*t*p1 + 3*mt*t*t*p2 + t*t*t*p3
  }
}

边界检测处理

防止浮窗移出可视区域，在随机位置生成时增加边界检查。

vue实现浮窗游动

getRandomPosition() {
  const padding = 20
  const maxX = window.innerWidth - this.windowWidth - padding
  const maxY = window.innerHeight - this.windowHeight - padding
  return {
    x: padding + Math.random() * maxX,
    y: padding + Math.random() * maxY
  }
}

性能优化建议

使用will-change: transform提升动画性能
适当降低动画频率，避免过度消耗资源
在组件销毁时清除动画循环

beforeDestroy() {
  cancelAnimationFrame(this.animationId)
}

标签: vue

分享给朋友：

vue实现安全免登录

Vue 实现安全免登录的方案免登录功能通常通过持久化认证状态（如 Token）实现，但需兼顾安全性。以下是基于 Vue 的常见实现方案：基于 Token 的免登录登录成功后存储 Token…

vue实现矩阵

Vue 实现矩阵的方法在 Vue 中实现矩阵操作可以通过多种方式完成，以下是一些常见的方法：使用二维数组表示矩阵矩阵可以用二维数组来表示，每个元素对应矩阵中的一个值。在 Vue 的 data…

vue实现slider

Vue 实现 Slider 组件使用 Vue 实现 Slider 组件可以通过原生开发或借助第三方库。以下是两种常见方法：原生实现 Slider 创建一个基础的 Slider 组件，通过 v-m…

jquery实现vue

jQuery 和 Vue.js 是两种不同理念的前端工具，jQuery 以 DOM 操作和事件驱动为核心，而 Vue.js 是数据驱动的现代化框架。如果想用 jQuery 实现类似 Vue 的功能（如…

vue实现swiper

Vue 中实现 Swiper 的方法安装 Swiper 依赖在 Vue 项目中安装 Swiper 和相关依赖： npm install swiper vue-awesome-swiper 全局引…

vue实现word文档实现预览

在Vue中实现Word文档预览可以通过多种方式实现，以下是几种常见的方法：使用mammoth.js库 mammoth.js是一个将Word文档（.docx）转换为HTML的JavaScript库，…

vue实现浮窗游动