3
votes

REPEAT onload animation onclick - Raphael Javascript SVG animation

J'ai essayé de faire une animation Raphael, ça marche bien et l'animation en charge comme il se doit mais .. Je veux qu'il s'anime ENCORE lorsque vous cliquez sur un texte ou un bouton (un article de raphael en dehors du site div).

Raphael Code est ici:

window.onload = function () { var paper = new Raphael (document.getElementById ('frivardihouse'), 250, 250);

function round(value, precision) {
    var multiplier = Math.pow(10, precision || 0);
    return Math.round(value * multiplier) / multiplier;
}

let ltv = 0.6;
let h = 144*ltv;
let y = 86+((1-ltv)*144);
let ltvtxt = round(ltv * 100);


var fillhouse = paper.rect(40.5,230,172.3,0).attr({fill: "#ff6600", stroke: "none"});

var sAnimation = Raphael.animation({ 'width': 172.3, 'height': h, 'x': 40.5, 'y': y, fill: "#ff0066"}, 2000, "backOut")
fillhouse.animate(sAnimation);


var thehouse = paper.path("M236.5,80.4L128.9,2.1c-1.6-1.1-3.7-1.1-5.3,0L16.1,80.4c-3.5,2.6-1.7,8.1,2.6,8.1l13,0c-1,2.5-1.5,5.3-1.5,8.2l0,122.7c0,12,9.2,21.7,20.6,21.7l150.9,0c11.4,0,20.6-9.7,20.6-21.7l0-122.7c0-2.9-0.5-5.7-1.5-8.2h13C238.2,88.6,240,83,236.5,80.4z M206.7,104.9l0,106.5c0,9-6.9,16.3-15.5,16.3l-129.9,0c-8.5,0-15.5-7.3-15.5-16.3l0-106.5c0-9,6.9-16.3,15.5-16.3l129.9,0C199.8,88.6,206.7,95.9,206.7,104.9z").attr({fill: "#ccc", stroke: "none"});
};

J'ai fait un violon.

J'ai essayé normal cliquez sur les fonctions, mais n'arrive tout simplement pas à le faire fonctionner: (Rien ne se passe. Vraiment frustrant!

Voir violon ici

javascript jquery animation raphael repeat

1 commentaires

cherchez-vous toujours des réponses à votre question?

4 Réponses :

5
votes

Ajoutez simplement l'événement click à la classe .clickme avec jquery.

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="frivardihouse"></div>

    <div class="clickme">
    CLICK ME AND REPEAT ANIMATION
    </div>

Voici le code complet

     onload = function () {
        var paper = new Raphael(document.getElementById('frivardihouse'), 250, 250);
        
    function round(value, precision) {
        var multiplier = Math.pow(10, precision || 0);
        return Math.round(value * multiplier) / multiplier;
    }

    let ltv = 0.6;
    let h = 144*ltv;
    let y = 86+((1-ltv)*144);
    let ltvtxt = round(ltv * 100);


    var fillhouse = paper.rect(40.5,230,172.3,0).attr({fill: "#ff6600", stroke: "none"});

    var sAnimation = Raphael.animation({ 'width': 172.3, 'height': h, 'x': 40.5, 'y': y, fill: "#ff0066"}, 2000, "backOut")
    fillhouse.animate(sAnimation);


    var thehouse = paper.path("M236.5,80.4L128.9,2.1c-1.6-1.1-3.7-1.1-5.3,0L16.1,80.4c-3.5,2.6-1.7,8.1,2.6,8.1l13,0c-1,2.5-1.5,5.3-1.5,8.2l0,122.7c0,12,9.2,21.7,20.6,21.7l150.9,0c11.4,0,20.6-9.7,20.6-21.7l0-122.7c0-2.9-0.5-5.7-1.5-8.2h13C238.2,88.6,240,83,236.5,80.4z M206.7,104.9l0,106.5c0,9-6.9,16.3-15.5,16.3l-129.9,0c-8.5,0-15.5-7.3-15.5-16.3l0-106.5c0-9,6.9-16.3,15.5-16.3l129.9,0C199.8,88.6,206.7,95.9,206.7,104.9z").attr({fill: "#ccc", stroke: "none"});


    };
    $('.clickme').click(function(){
    document.getElementById('frivardihouse').innerHTML = '';
    	onload();
    });

$('.clickme').click(function(){
    document.getElementById('frivardihouse').innerHTML = '';
    onload();
});

3 commentaires

C'est tellement bizarre, j'ai déjà essayé ça mais ça n'a pas marché. Je vais essayer de l'implémenter dans mes fichiers originaux :-) Merci!

Avez-vous une idée de la raison pour laquelle j'obtiens cette erreur lorsque je cache et montre la maison? Erreur: attribut dy: longueur attendue, "NaN". Voir le violon ici: jsfiddle.net/5mv0enuz/2 (je sais que la jauge s'affiche deux fois)

Les erreurs tspan ne se produisent que lorsque l'animation est toujours en cours Avec la modification ci-dessus, cela ne se produit que lorsque la jauge est toujours en cours d'animation et que vous la changez pour la maison. L'animation de la jauge est toujours en cours d'exécution et vous la modifiez en maison et l'animation de la jauge est arrêtée à ce stade et l'animation de la maison est en cours d'exécution.

0
votes

Sans JQuery oui c'est possible!

Utilisez dispatchEvent (new Event ('load')); pour déclencher un événement onload à partir de JS ..

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="frivardihouse"></div>

<div class="clickme">
  CLICK ME AND REPEAT ANIMATION
</div>

0 commentaires

0
votes

La manière la plus simple de le faire est la suivante:

Appeler la fonction reFill sur l'événement de clic

function reFill() {
  document.getElementById('frivardihouse').innerHTML = '';
  onload();
}

Voilà!

0 commentaires

0
votes

si vous cherchez toujours une réponse. Je résoudrais un peu différent de ceux existants. En gros, je voudrais

ne remplace pas onload en déclarant la fonction onload comme globale. c'est un peu difficile à suivre
séparez une méthode pour dessiner et une méthode pour animer.
dans onload, j'appellerai draw et récupérerai un objet. cet objet effectuera une animation.
onClick appellera à nouveau la méthode d'animation
vérifiera si la maison est déjà remplie. s'il est rempli, supprimez uniquement l'élément rempli. Ensuite, il effectuera pour ajouter un nouvel élément de remplissage avec une animation. lien fiddle pour vérifier https://jsfiddle.net/hye0os7f/9/

function round(value, precision) {
  const multiplier = Math.pow(10, precision || 0);
  return Math.round(value * multiplier) / multiplier;
}
function draw() {
  const paper = new Raphael(document.getElementById('frivardihouse'), 250, 250);

  const ltv = 0.6;
  const h = 144 * ltv;
  const y = 86 + (1 - ltv) * 144;
  const ltvtxt = round(ltv * 100);

  const sAnimation = Raphael.animation(
    {
      width: 172.3,
      height: h,
      x: 40.5,
      y,
      fill: '#ff0066',
    },
    2000,
    'backOut',
  );
  paper
    .path(
  'M236.5,80.4L128.9,2.1c-1.6-1.1-3.7-1.1-5.3,0L16.1,80.4c-3.5,2.6-1.7,8.1,2.6,8.1l13,0c-1,2.5-1.5,5.3-1.5,8.2l0,122.7c0,12,9.2,21.7,20.6,21.7l150.9,0c11.4,0,20.6-9.7,20.6-21.7l0-122.7c0-2.9-0.5-5.7-1.5-8.2h13C238.2,88.6,240,83,236.5,80.4z M206.7,104.9l0,106.5c0,9-6.9,16.3-15.5,16.3l-129.9,0c-8.5,0-15.5-7.3-15.5-16.3l0-106.5c0-9,6.9-16.3,15.5-16.3l129.9,0C199.8,88.6,206.7,95.9,206.7,104.9z',
    )
    .attr({ fill: '#ccc', stroke: 'none' });
  let fillhouse = null;
  return {
    paper,
    animateInHouse: () => {
      if (fillhouse) {
        fillhouse.remove();
      }
      fillhouse = paper.rect(40.5, 230, 172.3, 0).attr({ fill: '#ff6600', stroke: 'none' });
      fillhouse.animate(sAnimation);
    },
  };
}
let thePaper = null;
const pageOnLoad = function () {
  thePaper = draw();
  thePaper.animateInHouse();
};

function onRedraw() {
  thePaper.animateInHouse();
}

window.onload = pageOnLoad;

0 commentaires