使用 Vue.js 動畫恆定（未知）數據流的最佳方法？

Question

我目前在嘗試獲得平滑的 animation 時遇到問題。

我正在使用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>

Answer 1

您在那里創建了一個多層問題。

Electron IPC 很慢，原因是它們序列化/反序列化 JSON 對象而不是緩沖區，主進程和渲染進程也必須同步。 針對這個特定問題的一個簡單解決方案是編寫一個預加載腳本並將您的邏輯從主線程帶入渲染線程。 無需 IPC，無需序列化，直接訪問 NodeJS 和任何原生節點模塊。

對於值 CSS 的恆定動畫，低端 PC 通常缺少動畫，它們往往會中斷動畫，因此建議使用補間/動畫框架，例如： anime.js或 vue 文檔中的這個自寫 vue 示例https://v2.vuejs.org/v2/guide/transitioning-state.html#Dynamic-State-Transitions

我希望這能讓你走上正軌；）