I am currently facing an issue with achieving a seamless animation.
My setup involves using Vue.js and Electron, where the main processes are sending data to the renderer process every 16-33ms (equivalent to 30-60fps). Upon receiving this data in my component, I update the data property which is then bound to the style property of the element. While this method technically works, there is noticeable jitter in the animation. I am wondering if there is a more efficient approach to handle this situation. Is there a feature similar to requestAnimationFrame() that could assist? Thank you for any insights.
Here's a simplified example:
<template>
<div>
<img :style={'transform': `translate(${x}%, ${y}%`} src=""></img>
</div>
</template>
<script>
data: function () {
return {
x: 50,
y: 50
}
},
mounted () {
// Updates are received approximately every ~16-33ms
this.$electron.ipcRenderer.on('data', (e, data) => {
this.x = data.x
this.y = data.y
})
}
</script>