我目前遇到了一个问题,试图获得一个平滑的动画。
我使用的是vue + electron,主进程向渲染器进程发送数据的时间大约为16- 33 ms(30- 60 fps)。当我在组件中接收到数据时,我更新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>
1条答案
按热度按时间p1tboqfb1#
你在那里制造了一个多层问题。
电子IPC的速度很慢,原因是它们对JSON对象进行序列化/反序列化,而不是缓冲,主进程和渲染进程也必须同步。此特定问题的一个简单解决方案是编写一个预加载脚本,并将逻辑从主进程带入渲染线程。无需IPC,无需序列化,直接访问NodeJS和任何本地节点模块。
对于恒定的动画值,CSS动画通常在低端PC上缺乏,它们往往会中断动画,因此建议使用补间/动画框架这方面的一个示例是anime.js或来自vue docs www.example.com的此自写vue示例https://v2.vuejs.org/v2/guide/transitioning-state.html#Dynamic-State-Transitions
我希望这能让你走上正轨;)