Javascript 使用Vue.js设置恒定（未知）数据流动画的最佳方法？

我目前遇到了一个问题，试图获得一个平滑的动画

我使用的是vue+electron，主进程以大约16-33毫秒（30-60帧/秒）的速度向渲染器进程发送数据。当我收到组件中的数据时，我会更新数据属性，并将其绑定到元素的样式属性。这确实有效，但存在相当大的抖动。我很好奇是否有更好的方法来处理这件事。是否有类似于requestAnimationFrame（）的内容？多谢各位

简化示例：

<template>
  <div>
    <img :style={'transform': `translate(${x}%, ${y}%)} src=""></img>
  </div>
</template>


<script>
  data: function () {
    return {
      x: 50,
      y: 50
    }
  },
  mounted () {
    // this is coming every ~16-33ms
    this.$electron.ipcRenderer.on('data', (e, data) => {
      this.x = data.x
      this.y = data.y
    })
  }
</script>

数据：函数（）{
返回{
x:50，
y:50
}
},
挂载（）{
//每16-33毫秒一次
这个.electron.ipcrender.on（'data'，（e，data）=>{
this.x=data.x
this.y=data.y
})
}

您在那里创建了一个多层次的问题

电子IPC的速度很慢，原因是它们序列化/反序列化JSON对象，而不是缓冲区，而且主进程和渲染进程必须同步。这个特定问题的一个简单解决方案是编写一个预加载脚本，并将您的逻辑从主线程带到渲染线程中。无需IPC，无需序列化，可直接访问NodeJ和任何本机节点模块

对于固定值动画，低端PC上通常缺少CSS动画，它们往往会中断动画，因此建议使用tweening/animation的框架，例如anime.js或vue文档中的这个自写vue示例

我希望这会让你走上正轨；）