javascript - RaphaelJS/CSS - 动画文本/数字

Question

所以，我只是深入研究简单的游戏网络动画，我正在寻求建议。最终，我会很好地掌握贝塞尔曲线和弧线，并学习如何沿着路径设置动画以获得一些漂亮的暗黑破坏神 III 风格的曲线数字，但目前，我只是想了解基础知识。

First (real) attempt

关键代码很简单-

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 坐标，并将 .hide() 放入单独的回调函数中(出于某种原因，它起作用了，而不是将其放在动画的末尾)。

这个版本一开始似乎可以工作，但是当您点击太多次时动画会中断，我不确定为什么。我确信我最终可以在足够的时间内弄清楚，但无论如何我可能会把它弄得太复杂。完整代码-

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