Hinzufügen von Animationen zwischen zwei Objekten in Fabric js

Question

Ich habe eine sehr einfache Anwendung, mit der Sie Formen erstellen und sie mit einer Linie verbinden können. Um das zu tun, würden Sie Folgendes tun.

Example 

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

Sie können die Formen verschieben, ziehen und ihre Größe ändern. Ich habe mich gefragt, ob es möglich ist, eine Animation zwischen zwei Objekten hinzuzufügen. So würde beispielsweise ein kleiner runder Kreisball auf der Linie zwischen zwei Objekten animieren. Ich habe Demos auf der Animationsseite in Fabric js ausgecheckt, bin mir aber nicht sicher, ob es von Objekt b aus möglich ist.

Hier ist die FIDDLE.

Answer 1

Ich weiß nicht, ob Sie die eingebaute Animationsfunktion in Fabric verwenden können, weil Sie sagen, dass sich diese Objekte möglicherweise selbst bewegen. Aber man kann ganz leicht so etwas wie dieses machen manuell ein bisschen Mathe mit:

Sie können dies tun, indem sie sich wie eine Welle oszillierend zwischen 0 und 1. Die richtige Formel für diese Funktion zu behandeln, ist:

• Wenn der "Winkel" 0 ist, oder ein Vielfaches von 2π die Amplitude gleich 0 ist, so ist der Ball auf object1 Zentrum
• Wenn die „ang le“ist ein Vielfaches von π, die Amplitude 1 und der Ball ist in der Mitte des object2
• Wenn die Amplitude 0,5, ist der Ball zwischen den beiden Objekten

Sie können nur die Winkel erhöhen basierend auf die Zeit, zu welcher Zeit oder Dauer Sie wollen.

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 mit ihr hier.