重复onload动画onclick-Raphael Javascript SVG动画

我一直在尝试制作一个拉斐尔动画，它工作得很好，并且应该加载动画，但是。。 我希望它再次动画时，点击一个文本或按钮（一个div-outsite拉斐尔纸）

拉斐尔代码如下：

window.onload=函数（）{ var paper=new Raphael（document.getElementById（'frivardihouse'），250250）

我做了一把小提琴

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

---

只需将单击事件添加到

。使用jquery单击我

类

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

下面是完整的代码

onload=函数（）{
var paper=new Raphael（document.getElementById（'frivardihouse'），250250）；
函数舍入（值、精度）{
var乘数=数学功率（10，精度| | 0）；
返回数学四舍五入（值*乘数）/乘数；
}
设ltv=0.6；
设h=144*ltv；
设y=86+（（1-ltv）*144）；
设ltvtxt=圆形（ltv*100）；
var fillhouse=paper.rect（40.5230172.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”）
动画制作（sAnimation）；
var thehouse=纸张路径("1.1.2.7 7.7 7 7 7.6 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 M206.5,80.4z M206.7104.9L0106.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.6206.7,95.9206.7104.9z”）.attr（{fill:“ccc”，stroke:“none”}）；
};
$（'.clickme'）。单击（函数（）{
document.getElementById（'frivardihouse'）。innerHTML=''；
onload（）；
})；

单击我并重复动画

如果没有JQuery，是的，这是可能的

使用

dispatchEvent（新事件（'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'），250250）；
函数舍入（值、精度）{
var乘数=数学功率（10，精度| | 0）；
返回数学四舍五入（值*乘数）/乘数；
}
设ltv=0.6；
设h=144*ltv；
设y=86+（（1-ltv）*144）；
设ltvtxt=圆形（ltv*100）；
var fillhouse=paper.rect（40.52302172.3,0）.attr({
填写：“ff6600”，
笔划：“无”
});
var sAnimation=Raphael.animation({
“宽度”：172.3，
“高度”：h，
“x”：40.5，
y:y，
填写：“ff0066”
}，2000年，“退出”）
动画制作（sAnimation）；
var thehouse=纸张路径（“1.1.2.7 7.7 7 7 7.6 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 M206.5,80.4z M206.7104.9L0106.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.6206.7,95.9206.7104.9z”）.attr({
填写：“ccc”，
笔划：“无”
});
};
//单击元素时触发onload事件
var clickEle=document.getElementsByClassName（“clickme”）[0]；
clickEle.addEventListener（“单击”，函数（）{
document.getElementById（“frivardihouse”）.innerHTML=“”；
dispatchEvent（新事件（“加载”）；
})；

单击我并重复动画

最简单的方法如下 在单击事件上调用重新填充函数

---

就是这样！

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

不要通过将onload函数声明为global来覆盖onload。这有点难理解

分离要绘制的方法和要设置动画的方法

在onload中，我将调用draw并取回一个对象。这个对象将执行动画

onClick将再次调用动画方法

动画方法将检查房屋是否已填充。如果已填充，则仅移除填充的元素。然后将使用动画添加新的填充元素。通过小提琴链接进行检查

---

---

这太奇怪了，我已经试过了，但是没有用。我会尝试在我的原始文件中实现它：-）谢谢！你知道为什么我在隐藏和显示房子时会出现这个错误吗？错误：属性dy：预期长度，“NaN”。请看这里的小提琴：（我知道仪表显示了两次）t平移错误仅在动画仍在进行上述修改时发生，仅当仪表仍在进行动画制作且您将其更改为房屋时才会发生。仪表动画仍在运行且您将其更改为房屋，此时仪表动画停止且房屋动画正在运行。您是否仍在寻找答案f还是你的问题？

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

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

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;