javascript - 使用 Vue.js 为恒定(未知)数据流设置动画的最佳方式？

Question

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

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

Answer 1

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

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

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

我希望这能让您走上正确的道路；)