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

【问题标题】：Best way to animate a constant (unknown) data flow with Vue.js?使用 Vue.js 动画恒定（未知）数据流的最佳方法？
【发布时间】：2020-02-09 10:00:46
【问题描述】：

我目前在尝试获得流畅的动画时遇到了问题。

我正在使用 vue + electron，主要进程以大约 16-33ms (30-60fps) 的速度向渲染器进程发送数据。当我在组件中收到数据时，我会更新 data 属性并将其绑定到元素的 style 属性。这确实有效，但有相当多的抖动。我很好奇是否有更好的方法来处理这个问题。有没有类似于 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>

【问题讨论】：

标签： javascript vue.js animation vuejs2 electron

【解决方案1】：

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

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

对于值的恒定动画 CSS 动画通常在低端 PC 上缺乏，它们往往会中断动画，因此建议使用补间/动画框架这方面的一个例子是 Anime.js 或来自 vue 文档https://vuejs.org/v2/guide/transitioning-state.html#Dynamic-State-Transitions的这个自写 vue 示例

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

【讨论】：