Best way to animate a constant (unknown) data flow with Vue.js?

Question

I'm currently running into a problem trying to get a smooth animation.

I'm using vue + electron, with the main processes sending data to the renderer process at about 16-33ms (30-60fps). When I receive the data in my component, I update the data property and it is bound to the style property of the element. This does work, but there's quite a bit of jitter. I'm curious if there's a better way to handle this. Is there something similar to requestAnimationFrame()? Thank you.

Simplified example:

<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

You created a multi layered issue there.

Electron IPC's are slow , the reason for that is that they serialize/de-serialize JSON objects and not buffer , also the main and render process have to sync. A simple solution to this specific issue is to write an preload script and bring your logic from the main into the render thread . No need for IPC, no serialization, direct access to NodeJS and any native node module.

For constant animations on values CSS animations are often lacking on low-end PC's they tend to interrupt animations, so it's advisable to use a framework for tweening/animation an example of this is anime.js or this self writting vue example from the vue docs https://v2.vuejs.org/v2/guide/transitioning-state.html#Dynamic-State-Transitions

I hope this brings you on the right track;)