¿Cómo hago que el borde se anime como en una hormiga que marcha y lo apunto hacia el nodo de destino?
Intenté usar la propiedad line-dash-offset
esta manera, pero no se repite.
estilo
{ selector: "edge", style: { "curve-style": "taxi", width: 2, "target-arrow-shape": "triangle", "target-arrow-color": "#9dbaea", "line-style": "dashed", "line-dash-pattern": [8, 4], } }
animación
let loopAnimation = eles => { eles.animation( { style: { "line-dash-offset": 24, "line-dash-pattern": [8, 4], } }, { duration: 1000 } ).play().promise('complete').then(() => loopAnimation(eles)) }; cy.edges().forEach(loopAnimation);
Pude resolver esto llamando a reverse() antes de jugarlo
let loopAnimation = eles => { const ani = eles.animation( { style: { "line-dash-offset": 24, "line-dash-pattern": [8, 4], } }, { duration: 1000 } ); ani.reverse().play().promise('complete').then(() => loopAnimation(eles)) };