实现 图片 多帧 移出移入动效

 <div class="img"
      :style="{ 'background-position-y': currentValue + 'px', 'background-image': ' url(https://img.alicdn.com/imgextra/i1/O1CN01nYkaXy1KudUZDMbYJ_!!6000000001224-2-tps-240-4080.png)' }"
      @mouseout="mouseentera" @mouseover="mouseovera"></div>

 data() {
    return {
      currentValue: 0, // 当前值
      startValue: 0, // 起始值
      endValue: -1920, // 结束值
      duration: 480, // 动画持续时间（毫秒）
      intervalTime: 10, // 每次动画间隔时间（毫秒）
      startTime: null, // 开始时间
      timer: null, // 计时器
      stepCount: 0, // 步数计数器
    }
  },
  methods: {
    startAnimation() {
      this.startTime = Date.now();
      this.timer = setInterval(this.updateAnimation, this.intervalTime);
    },
    updateAnimation() {
      const currentTime = Date.now();
      const progress = currentTime - this.startTime;
      const stepDuration = this.duration / 16; // 每个步骤的持续时间
      const stepValue = (this.endValue - this.startValue) / 16; // 每个步骤的值变化量
      if (progress >= this.duration) {
        clearInterval(this.timer);
        this.currentValue = this.endValue;
        return;
      }

      this.stepCount = Math.floor(progress / stepDuration);
      this.currentValue = this.startValue + this.stepCount * stepValue;
      console.log('this.currentValue :>> ', this.currentValue);

    },
    mouseovera(){
      console.log('object :>> 移入');
      this.state=true
      this.startValue=0
      this.endValue = -1920
      this.startAnimation()
    },
    mouseentera() {
      console.log('object :>> 移出');
      this.startValue=-1920
      this.endValue = 0
      this.startAnimation()

    }
  }

.img {
  height: 120px;
  width: 120px;
  margin-bottom: 8px;
  background-size: cover;
  margin-left: 32px;
  background-repeat: no-repeat;

}