Question

所以，我只是想进入游戏的简单网络动画，我正在寻找建议。最终，我将对beziers和arcs有一个良好的控制，并学习如何沿着一条路径制作动画，以获得一些不错的暗黑破坏神III曲线数字，但是，就目前而言，我只是试图让基础知识降低。

关键代码非常简单 -

paper.text(170, 95, dmgValue).attr({fill:"white", "font-size":16}).animate({
    transform:"t0,-50", "fill-opacity":0} ,500).node.setAttribute("class", "no-select");

CSS样式可防止文本突出显示（感谢此处的用户提供帮助）。主要问题是文本仍然没有不透明度 - 您可以将鼠标悬停在它上面并查看文本光标。虽然它有效，但它可以使用它。有点凌乱的样子。此外，由于没有分配变量，我不认为我可以使用Element.remove（）处理它;

Where I am at now

我在保存的版本之间进行了很多小的修改，这使得代码变得非常庞大。我希望能够限制一次飞来飞去的数字（对于较慢的计算机），所以我将它们放入一个可以无限循环使用的阵列中，虽然这可能不是必需的，但它不会。将它遗漏是一件大事。

还从使用变换，到设置y-coords，并将.hide（）放入一个单独的回调函数中（由于某种原因而不是将其置于动画的末尾）。 / p>

这个版本似乎首先起作用，但是当您点击太多次并且我不确定原因时动画会被中断。我相信我最终可以用足够的时间弄明白，但无论如何我可能会让这个过于复杂。完整代码 -

var paper = Raphael(0, 0, 350, 350);
paper.canvas.style.backgroundColor = "Black";

var dmgValues = [],
    dmgValuesIndex = 0,
    maxMsgs = 15,
    dmgXMaxOffset = 25,
    dmgYMaxOffset = 25,
    dmgXRef = 170 - dmgXMaxOffset,
    dmgYRef = 250 - dmgYMaxOffset,
    dmgMaxDistance = 50;

for (i=0; i< maxMsgs; i++) {
    dmgValues[i] = paper.text().attr({fill:"white", "font-size":16});
    dmgValues[i].node.setAttribute("class", "no-select");
    dmgValues[i].hide();
}

var toggle = paper.rect(150, 270, 50, 25).attr({fill:"green"});

toggle.click(function() { doHit(); });

function doHit() {
    var dmgHit = Math.floor(Math.random() * 99) + 1,
        xPos = Math.floor(Math.random() * dmgXMaxOffset) + 1,
        yPos = Math.floor(Math.random() * dmgYMaxOffset) + 1;
    dmgValues[dmgValuesIndex].show();
    if (dmgValues[dmgValuesIndex].status() == 1) { dmgValues[dmgValuesIndex].stop(); }
    dmgValues[dmgValuesIndex].attr({x:dmgXRef + xPos, y:dmgYRef + yPos, text:dmgHit,
      "fill-opacity":1}).animate({y:dmgYRef - dmgMaxDistance, "fill-opacity":0}, 600,
      "linear", function() { afterEffects(dmgValues[dmgValuesIndex]) });
}

function afterEffects (afterTarget) {
    afterTarget.hide();
    dmgValuesIndex++;
    if (dmgValuesIndex >= maxMsgs) { dmgValuesIndex = 0; }
}

CSS：

.no-select {
   -moz-user-select: none;
   -webkit-user-select: none;
}

Answer 1

我想我明白了！

http://jsfiddle.net/rLcwax9k/10/

我注意到的一件事是增量器在动画之后发生的回调函数中，所以它实际上并没有正确计数。但是，主要是因为dmgValuesIndex是全局的，并且每次点击都会增加。因此，在动画完成时，它正在根据回调中动画结尾处的当前计数执行功能，这可能不是正确的。所以，我只是在函数上放了一个参数，并在整个调用过程中使用它作为参考，并将其传递给回调函数。

嘿，我有点开始明白为什么很多语言需要在他们的对象上使用setter和getter方法。对于像我这样的全球变量范围操作及其可能的副作用，这应该是一个很好的教训。

然而，在我接受答案之前，我仍在寻找可能更有效的其他方法。

主要代码 -

function doHit(iter) {
    this.iter = iter;
    var dmgHit = Math.floor(Math.random() * 99) + 1,
        xPos = Math.floor(Math.random() * dmgXMaxOffset) + 1,
        yPos = Math.floor(Math.random() * dmgYMaxOffset) + 1;
    dmgValues[iter].show();
    if (dmgValues[iter].status() == 1) { dmgValues[iter].stop(); }
    dmgValues[iter].attr({
        x:dmgXRef + xPos,
        y:dmgYRef + yPos,
        text:dmgHit,
        "fill-opacity":1
    })
    .animate({
        y:(dmgYRef + yPos) - dmgMaxDistance,
        "fill-opacity":0},
        1000,
        ">",
        function() {
            dmgValues[iter].hide();
        }
    );
}

RaphaelJS / CSS - 动画文字/数字

1 个答案: