uni-app 求nvue直播页面连续点赞动画插件

在uni-app中实现nvue直播页面的连续点赞动画，可以通过编写自定义的nvue组件来完成。下面是一个简单的示例代码，展示了如何在nvue中实现连续点赞动画效果。

首先，创建一个名为LikeAnimation.nvue的自定义组件，代码如下：

<template>
  <div class="container">
    <div class="like-icon" v-for="(like, index) in likes" :key="index" :style="likeStyle(index)">
      <image class="icon" src="/static/like.png"></image>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      likes: [],
      animationFrameId: null,
      likeCount: 0,
      maxLikes: 10, // 最大点赞数
      animationDuration: 500, // 动画持续时间（毫秒）
    };
  },
  methods: {
    startLikeAnimation() {
      this.stopLikeAnimation();
      this.animationFrameId = requestAnimationFrame(this.animateLikes);
    },
    stopLikeAnimation() {
      if (this.animationFrameId) {
        cancelAnimationFrame(this.animationFrameId);
        this.animationFrameId = null;
      }
      this.likes = [];
    },
    animateLikes(timestamp) {
      this.likes = this.likes.slice(-this.maxLikes); // 保持最大点赞数
      if (this.likes.length < this.maxLikes) {
        this.likes.push({ time: timestamp });
      }
      this.likes = this.likes.map((like, index) => ({
        ...like,
        opacity: Math.max(0, (timestamp - like.time) / this.animationDuration),
      }));
      this.animationFrameId = requestAnimationFrame(this.animateLikes);
    },
    likeStyle(index) {
      const like = this.likes[index];
      return {
        transform: `translateY(-${(index * 50)}px)`, // 调整点赞图标位置
        opacity: like.opacity,
        transition: `opacity ${this.animationDuration / 1000}s ease-in-out`,
      };
    },
  },
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.like-icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.icon {
  width: 30px;
  height: 30px;
}
</style>

在直播页面中，引入并使用这个组件：

<template>
  <div>
    <button @click="startLike">点赞</button>
    <LikeAnimation ref="likeAnimation" />
  </div>
</template>

<script>
import LikeAnimation from '@/components/LikeAnimation.nvue';

export default {
  components: {
    LikeAnimation,
  },
  methods: {
    startLike() {
      this.$refs.likeAnimation.startLikeAnimation();
    },
  },
};
</script>

在上面的代码中，LikeAnimation组件通过requestAnimationFrame实现了点赞图标的连续动画效果。startLikeAnimation方法启动动画，stopLikeAnimation方法停止动画。通过调整likes数组中的元素来管理动画状态，并在页面上渲染出点赞动画效果。