Лучший способ оживить постоянный (неизвестный) поток данных с Vue.js?

Question

В настоящее время я сталкиваюсь с проблемой, пытаясь получить плавную анимацию.

Я использую Vue + Electron, при этом основные процессы отправляют данные в процесс рендерера примерно в 16-33 мс (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

Вы создали многослойную проблему там.

Электронные IPC медленны , причина в том, что они сериализуют / десериализуют объекты JSON, а не буферизуют , также должны синхронизироваться основной и рендер процесс. Простое решение этой конкретной проблемы - написать сценарий предварительной загрузки и перенести логику из основного в поток рендеринга . Нет необходимости в IPC, в сериализации, в прямом доступе к NodeJS и любому модулю нативных узлов.

Для постоянных анимаций на значениях CSS-анимации часто не хватает на младших компьютерах, которые имеют тенденцию прерывать анимации, поэтому этоРекомендуется использовать каркас для анимации / анимации . Примером этого является anime.js или этот самопишущий пример vue из документации https://vuejs.org/v2/guide/transitioning-state.html#Dynamic-State-Transitions

Я надеюсь, что это принесет вамна правильном пути;)