Raphael：单独触发多个路径动画

Question

我有一个项目使用 Raphael 来绘制和动画路径。该项目旨在有多个具有相似路径的 divs，以及在鼠标悬停时触发的动画。目前，div 正在正确填充，但动画仅在最后创建的 div 中发生。我如何让脚本区分 divs 以在 dividually 中对它们进行动画处理？

示例HTML：

<div id="box" class="con1"></div>
<div id="box" class="con2"></div>

示例CSS：

#box {
    width: 100px;
    height: 50px;
    float: left;
}
.con1 {
    background-color:#6634FD;
}
.con2 {
    background-color:#2BA18D;
}

示例 JS：

var divs = document.getElementsByTagName("div");

function init() {
    for(var i = 0; i < divs.length; i++){
        var box = divs[i];
        var boxheight = box.offsetHeight;
        var boxWidth = box.offsetWidth;
        var paper = Raphael(box,boxWidth,boxheight);
        var path1 = paper.path("M20,10 l25,0").attr({'stroke-width': 2,stroke:"#FF0000"});
        var path2 = paper.path("M21,10 l-25,0").attr({'stroke-width': 2,stroke:"#FF0000"});

        box.addEventListener("mouseover", function() {
            paper.setStart();
            path1.animate({path:"M20,10 l5,5 l5,-5 l5,5"}, 200); 
            path2.animate({path:"M21,10 l-5,5 l-5,-5 l-5,5"}, 200); 
            cat = paper.setFinish();
        });
        box.addEventListener("mouseout", function() {
            paper.setStart();
            path1.animate({path:"M20,10 l25,0"}, 200);
            path2.animate({path:"M21,10 l-25,0"}, 200); 
            cat = paper.setFinish();
        });
     }
}

init();

http://fiddle.jshell.net/BlueInkAlchemist/dneyhvm1/10/

Answer 1

我想知道有多少令人头疼的事 Javascript 闭包引起了...可能不少 :) 你的代码很好，你只需要将 for 循环的内部移动到一个单独的函数中来创建一个新作用域，因为在 Javascript 中，闭包是在函数级别创建的，而不是块级别。

for(var i = 0; i<divs.length; i++){
  createDiv(i);
}

function createDiv(i){
  var box = divs[i];
  ...
}

查看 this forked fiddle 以查看工作示例。

如果您想阅读更多关于闭包的内容，我推荐例如this question or possibly this one.

Raphael：单独触发多个路径动画

Raphael: Trigger multiple path animations individually

javascript

animation

path

raphael