Aquí está la situación. Tengo una colección de nodos y necesito que se muevan hacia arriba y luego hacia abajo. Para esto estoy usando Konva.Tween como en la demo . Como puede ver, creo y ejecuto interpolaciones en un bucle for . Lo que quiero es que todos los cuadrados se muevan sincronizados, pero parece que algunos de ellos se están moviendo por completo, pero algunos se han vuelto locos y se mueven con un retraso o algo así. Y lo interesante es que, si hace clic en el botón IR muchas veces, verá que son los mismos cuadrados los que se desincronizan, no los aleatorios, por lo que esto es algo persistente.
¿Qué estoy haciendo mal y hay una forma correcta de implementar lo que necesito?
Agréguelos a un Konva.Group y luego ejecute la interpolación en el grupo. Puede agregarlos al grupo cuando se crean o puede rect.moveTo(group) [OR group.add(rect)] justo antes de que necesite interpolarlos.
var tweenGroup = new Konva.Group(); layer.add(tweenGroup); document.getElementById('go').addEventListener('click', () => { const durationSec = 0.3; for (const r of rects) { tweenGroup.add(r); } new Konva.Tween({ node: tweenGroup, y: 70, duration: durationSec / 2, onFinish: function() { new Konva.Tween({ node: tweenGroup, y: 100, duration: durationSec / 2 }).play(); } }).play(); })Aquí está el codepen actualizado con ellos moviéndose sincronizados. https://codepen.io/richardjonlewis/pen/VwrGqNN