REPEAT onload 动画 onclick - Raphael Javascript SVG 动画答案

【问题标题】：REPEAT onload animation onclick - Raphael Javascript SVG animationREPEAT onload 动画 onclick - Raphael Javascript SVG 动画
【发布时间】：2019-06-14 17:40:14
【问题描述】：

我一直在尝试制作一个 raphael 动画，它工作正常，并且在加载时可以按预期制作动画，但是...... 我希望它在单击文本或按钮（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"});
};

我做了一个小提琴。

我尝试了正常的点击功能，但似乎无法让它工作:(什么都没有发生。真令人沮丧！

See fiddle here

【问题讨论】：

您还在为您的问题寻找答案吗？

标签： javascript jquery animation raphael repeat

【解决方案1】：

只需使用 jquery 将点击事件添加到 .clickme 类。

$('.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>

【讨论】：

这太奇怪了，我已经尝试过了，但是没有用。我会尝试在我的原始文件中实现它:-) 谢谢！
你知道为什么我在隐藏和显示房子时会出现这个错误吗？错误：属性 dy：预期长度，“NaN”。请参阅此处的小提琴：jsfiddle.net/5mv0enuz/2（我知道仪表显示两次）
tspan 错误仅在动画仍在进行时发生使用上述修改，它仅在仪表仍在动画并且您将其更改为房屋时发生。仪表动画仍在运行，您将其更改为房屋，仪表动画在该点停止，房屋动画正在运行。

【解决方案2】：

没有 JQuery 是可能的！

使用dispatchEvent(new Event('load'));从JS触发onload事件..

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>

【讨论】：

【解决方案3】：

最简单的方法如下

点击事件调用reFill函数

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

就是这样！

【讨论】：

【解决方案4】：

如果您仍在寻找答案。我会解决一些与现有问题不同的问题。基本上我会

不要通过将 onload 函数声明为全局函数来覆盖 onload。有点难跟上
将绘制方法和动画方法分开。
在onload 中，我将调用draw 并取回一个对象。此对象将执行动画。
onClick 将再次调用动画方法
动画方法会检查房子是否已经被填满。如果已填充，则仅删除已填充的元素。然后它将执行添加带有动画的新填充元素。小提琴链接检查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;

【讨论】：