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

user_9160027 0
Viewed 161

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>
electron vuejs2 vue.js animation javascript
1 Answers

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 ;)

user_51150090
Related