ПОВТОРНАЯ анимация загрузки onclick - анимация Raphael Javascript SVG - PullRequest
Новая
       27

ПОВТОРНАЯ анимация загрузки onclick - анимация Raphael Javascript SVG

0 голосов
/ 21 января 2019

Я пытался создать анимацию Рафаэля, она отлично работает и анимирует при загрузке, как и должно, но ... Я хочу, чтобы она оживляла СНОВА при нажатии на текст или кнопку (div-рафаэльская бумага).

Код Рафаэля здесь:

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

Я сделал скрипку.

Я попробовал обычные функции щелчка, но просто не могу заставить его работать :( Ничего не происходит. Действительно расстраивает!

Смотрите скрипку здесь

Ответы [ 4 ]

0 голосов
/ 31 января 2019

, если вы все еще ищете ответ.Я бы решил немного отличаться от существующих.По сути, я бы

  1. не переопределял нагрузку, объявив функцию загрузки глобальной.немного сложнее следовать
  2. разделению метода для рисования и метода для анимации.
  3. в onload Я вызову draw и получу объект обратно.этот объект будет выполнять анимацию.
  4. onClick снова вызовет метод анимации
  5. Метод анимации проверит, если дом уже заполнен.если он заполнен, удалите только заполненный элемент.Затем будет выполнено добавление нового элемента заливки с анимацией.Скриптовая ссылка для проверки 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 голосов
/ 30 января 2019

Без JQuery да, это возможно!

Используйте dispatchEvent(new Event('load')); для запуска события загрузки из 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>
0 голосов
/ 30 января 2019

Самый простой способ сделать это следующим образом

Вызвать функцию reFill для события щелчка 

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

Вот и все!.

0 голосов
/ 24 января 2019

Просто добавьте событие click в класс .clickme с помощью jquery. 

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

Ниже приведен полный код 

     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>
...