如何让我的 javascript 动画更快？

Posted 2023-02-22

【中文标题】如何让我的 javascript 动画更快？

【英文标题】：How can I make my javascript animation faster?

【发布时间】：2020-05-30 12:19:42

【问题描述】：

我制作了一个 Vue 组件来在 X 轴上创建一个 div 循环。但我注意到它使用了大量的 CPU。我按自己的意愿工作，但我想对其进行优化。我怎样才能让我的动画更快。 galeryItems 在 x 轴上移动，当它们达到其父 div 的宽度时，它们会移动到另一侧。所以一直循环。我宁愿不要使用外部插件。

<template>
    <div class="placeholder">
      <div class="galery" ref="galery">
          <div class="galery-item" v-for="i in 10" :key="i" ref="galeryItems" />
      </div>
    </div>
</template>

<script>
export default 
    props:
      xoffset : 
        type: Number,
        default: 0,
      ,
      speed : 
        type: Number,
        default: 1,
      ,
      spaceBetween : 
        type: Number,
        default: 50,
      ,
    ,
    data() 
      return 
      
    ,
    mounted()
      for(let i = 0; i < this.$refs.galeryItems.length; i++)
        this.$refs.galeryItems[i].style.transform = 'translateX(' + (this.$refs.galeryItems[i].clientWidth + this.spaceBetween) * i + 'px)';
      this.animate();
    ,
    methods:
      animate()
        window.requestAnimationFrame(this.animate);
        for(let i = 0; i < this.$refs.galeryItems.length; i++)
        
          let galeryItemRect = this.$refs.galeryItems[i].getBoundingClientRect();
          if(galeryItemRect.x > this.$refs.galery.clientWidth)
          
            this.$refs.galeryItems[i].style.transform = 'translateX(' + -galeryItemRect.width + 'px)';
            continue;
          

          this.$refs.galeryItems[i].style.transform = 'translateX(' + (galeryItemRect.x + this.speed) + 'px)';
        
      
    

</script>

<style lang="scss" scoped>
.placeholder
  height: 100vh;
  display: flex;
  align-items: center;


.galery

  position: relative;
  background-color: green;
  height: 100px;
  width: 100%;
  overflow: hidden;


.galery-item
  display: block;
  position: absolute;
  background-color: black;
  height: inherit;
  min-width: 100px;
  transition: 0s;

</style>

【参考方案1】：

尝试使用外部插件，它的性能和质量更好，在vue.js 使用下面链接中的v-animate 和transition 等框架选项：

https://vuejs.org/v2/guide/transitions.html

【讨论】：

但是如何使用 vue.js 过渡制作无限动画？

插入这个：动画迭代计数：无限；在进入和离开标签中