CODEWITHSUNDEEP
javascriptjqueryanimationraphaelrepeat
Sabine Quardon
Sabine Quardon

Reputation: 207

REPEAT onload animation onclick - Raphael Javascript SVG animation

I've been trying to make a raphael animation, it's working fine and animating on load as it should but.. I want it to animate AGAIN when clicking a text or button (a div outsite raphael paper).

Raphael Code is here:

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"});
};

I made a fiddle.

I tried normal click functions, but just can't seem to get it to work :( Nothing is happening. Really frustrating!

See fiddle here

Upvotes: 3

Views: 466

Answers (4)

duc mai
duc mai

Reputation: 1422

if you are still looking for answer. I would solve a little bit different from the existing ones. Basically I would

  1. not override onload by declaring onload function as global. it is a little bit difficult to follow
  2. separate a method to draw and a method to animate.
  3. in onload I will call draw and get an object back. this object will perform animation.
  4. onClick will call animation method again
  5. animation method will check if the house is already filled. if it is filled then remove the filled element only. Then it will performing to add new fill element with animation. fiddle link to check 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;

Upvotes: 0

Suhas More
Suhas More

Reputation: 38

The simplest way to do this is as follows

Call reFill function on the click event

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

That's it!.

Upvotes: 0

VIJAY P
VIJAY P

Reputation: 1433

Without JQuery yes its possible!

Use dispatchEvent(new Event('load')); to trigger onload event from JS..

var clickEle = document.getElementsByClassName("clickme")[0];
clickEle.addEventListener("click", function() {
  document.getElementById("frivardihouse").innerHTML = "";
  dispatchEvent(new Event('load'));
});


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"
  });


};

//Trigger onload event while clicking the element
var clickEle = document.getElementsByClassName("clickme")[0];
clickEle.addEventListener("click", function() {
  document.getElementById("frivardihouse").innerHTML = "";
  dispatchEvent(new Event('load'));
});
<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>

Upvotes: 0

Sukhjinder Singh
Sukhjinder Singh

Reputation: 489

Just add the click event to .clickme class with jquery. 

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

Below is the full code 

     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();
    });
<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>

Upvotes: 5

Related Questions