Aggiungere animazione tra due oggetti in Fabric js

Question

Ho un'applicazione molto semplice che consente di creare forme e collegarle con una linea. Per fare ciò si dovrebbe fare quanto segue.

Example 

1. Click new animation 
2. add rectangle 
3. add child 
4. add circle 

È possibile spostare le forme attorno, trascinare e ridimensionare. Mi stavo chiedendo se è possibile aggiungere un'animazione tra due oggetti. Quindi, ad esempio, una piccola palla circolare circolare si animerà sulla linea tra due oggetti. Ho controllato le demo sulla pagina di animazione in fabric js, ma non sono sicuro se sia possibile farlo dall'oggetto b.

Ecco lo FIDDLE.

Answer 1

Non so se è possibile utilizzare la funzione di animazione incorporata nel tessuto perché, come dici tu, questi oggetti potrebbero spostarsi. Ma si può fare qualcosa di simile abbastanza facilmente manualmente utilizzando un po 'di matematica:

si potrebbe fare questo trattandola come un'oscillazione d'onda tra 0 e 1. La formula corretta per questa funzione è:

• Quando "angolo" è 0, o un multiplo di 2π l'ampiezza è 0, in modo che la palla è al centro di object1
• Quando il "ang Le" è un multiplo di π, l'ampiezza è 1 e la palla è al centro di object2
• Quando l'ampiezza è di 0,5, la palla è tra i due oggetti

Si può solo aumentare l'angolo a base di il tempo, in qualsiasi periodo o durata tu voglia.

var animateBallBetweenObjects = function (obj1, obj2) { 

    // Add the "ball" 

    var circle = new fabric.Circle({ 
     radius: 10, 
     fill: 'blue', 
     left: obj1.getCenterPoint().x, 
     top: obj1.getCenterPoint().y, 
     originX: 'center', 
     originY: 'middle', 
     selectable: false 
    }); 

    canvas.add(circle); 

    var period = 1000; 
    var amplitude = 0; 
    var angle = 0; 
    var prevTime = Date.now(); 

    var loop = function() { 

     // Calculate the new amplitude 

     var now = Date.now(); 
     var elapsed = now - prevTime; 
     prevTime = now; 
     angle += Math.PI * (elapsed/(period * 0.5)); 
     amplitude = 0.5 * (Math.sin(angle - (0.5 * Math.PI)) + 1); 

     // Set the new position 

     var obj1Center = obj1.getCenterPoint(); 
     var obj2Center = obj2.getCenterPoint(); 

     circle.setLeft(obj1Center.x + (amplitude * (obj2Center.x - obj1Center.x))); 
     circle.setTop(obj1Center.y + (amplitude * (obj2Center.y - obj1Center.y))); 
     canvas.renderAll(); 

     requestAnimationFrame(loop); 
    } 

    // Animate as fast as possible 

    requestAnimationFrame(loop); 
}; 

FIDDLE con esso qui.