Самый эффективный способ создания компонента спрайта в vuejs с помощью листа спрайтов - PullRequest
Новая
       27

Самый эффективный способ создания компонента спрайта в vuejs с помощью листа спрайтов

0 голосов
/ 11 июля 2020

У меня есть лист спрайтов со спрайтом 12x12, я использую background-position и requestAnimationFrame для создания анимированного спрайта для своего веб-сайта. Есть ли какие-то улучшения, которые я могу сделать, чтобы создать лучший анимированный компонент спрайта? Помимо перехода с BMP на PNG. Спасибо за ваше время. 

<template>
  <div
    class="sprite"
    :style="{
      'background-position': `${this.animation[this.currentFrame].x *
        32}px ${this.animation[this.currentFrame].y * 32}px`
    }"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      start: undefined,
      animation: [
        { x: -7, y: 0 },
        { x: -11, y: 0 }
      ],
      currentFrame: 0,
      frames: 2,
      speed: 500
    }
  },
  methods: {
    steps(timestamp) {
      if (this.start === undefined) {
        this.start = timestamp
      }
      const elapsed = timestamp - this.start
      if (elapsed >= this.speed) {
        this.start = timestamp
        this.currentFrame++
        if (this.currentFrame >= this.frames) {
          this.currentFrame = 0
        }
      }

      window.requestAnimationFrame(this.steps)
    }
  },
  created() {
    window.requestAnimationFrame(this.steps)
  }
}
</script>

<style scoped>
.sprite {
  background: url('http://localhost:8080/0-143-0-0.bmp');
  display: inline-block;
  height: 32px;
  width: 32px;
  align-self: center;
}
</style>
...