Javascript Girl
  1. Javascript Girl
  3. Ajouter une animation entre deux objets dans Fabric js
Intereting Posts
JavaScript – Utilisez la variable dans la correspondance de la chaîne Pourquoi les demandes XMLHttpRequests asynchrones sont-elles préférables par rapport aux demandes synchrones? Quelle est la différence entre ces deux modèles JavaScript AngularJS: les boutons radio ne fonctionnent pas avec Bootstrap 3 Changer le taux d'échantillonnage de AudioContext (getUserMedia) L'utilisateur rapide avant la fermeture du navigateur? Utilisez une valeur différente des données JSON au lieu de DisplayKey en utilisant Typeahead Enums en JavaScript? Angularjs groupBy + orderBy JSON Parse Error sur Internet Explorer Comment puis-je actualiser une page avec jQuery? Angular 2: TypeError: l_thing0 est indéfini dans Où définit «sprite»? AngularJS – obtenez les valeurs des attributs d'élément Comment augmenter le nombre de 0,01 dans javascript en utilisant une boucle?

Ajouter une animation entre deux objets dans Fabric js

J'ai une application très basique qui vous permet de créer des formes et de les connecter avec une ligne. Pour ce faire, vous ferez ce qui suit. 

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

Vous pouvez déplacer les formes autour, glisser et redimensionner. Je me demandais s'il était possible d'ajouter une animation entre deux objets. Ainsi, par exemple, une petite boule de cercle circulaire animerait sur la ligne entre deux objets. J'ai vérifié les démonstrations sur la page d'animation dans le tissu js mais je ne sais pas si cela est possible à partir de l'objet b.

Voici le FIDDLE .

Je ne sais pas si vous pouvez utiliser la fonction d'animation intégrée dans le tissu car, comme vous le dites, ces objets pourraient se déplacer eux-mêmes. Mais vous pouvez créer quelque chose comme ça facilement manuellement en utilisant un peu de Math:

Entrez la description de l'image ici

Vous pouvez le faire en le traitant comme une onde oscillant entre 0 et 1. La formule correcte pour cette fonction est:

Entrez la description de l'image ici

  • Lorsque l'angle est 0, ou un multiple de 2π l'amplitude est 0, donc la balle est au centre de l'objet1
  • Lorsque l'angle est un multiple de π, l'amplitude est 1 et la balle est au centre de l'objet2
  • Lorsque l'amplitude est de 0,5, la balle est entre les deux objets

Vous pouvez simplement augmenter l'angle en fonction de l'heure, quelle que soit la durée ou la durée souhaitée. 

 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 avec elle ici.