RaphaelJS / CSS - 动画文本/数字答案

【问题标题】：RaphaelJS / CSS - Animating text/numbersRaphaelJS / CSS - 动画文本/数字
【发布时间】：2014-11-20 23:15:44
【问题描述】：

所以，我只是深入研究一个游戏的简单网络动画，我正在寻求建议。最终，我会很好地掌握贝塞尔曲线和弧线，并学习如何沿着一条路径制作动画，以获得一些不错的暗黑破坏神 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 坐标，并将 .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;
}

【问题讨论】：

我并没有真正看到第一个示例的问题。我无法在那里悬停或看到文本光标？
你好 :) 我已经通过删除填充不透明度动画稍微改变了第一个：jsfiddle.net/rLcwax9k/8 是否可以引用它们，即使它们没有变量名?
取决于你的意思。您可以将您创建的对象作为函数的一部分返回，并将其分配给一个值。不太确定问题仍然存在。我很想用一个更简洁的例子（比如在后面的 jsfiddle 中）写一个新问题，其中包含遇到的问题以及如何复制它。
第 8 版示例在您的浏览器上没有显示相同的行为吗？我只在 Chrome 和 IE 上测试过（本来打算安装 FF）。我取消了动画中的不透明度淡入淡出以显示文本仍然存在。即使 alpha 发生了变化，对象仍然在物理上，并且光标在悬停时发生了变化。它看起来很草率，我无法在我没有直接定义的对象上调用 .hide() 方法（至少我不这么认为）。但是，我想我找到了问题所在。

标签： javascript css animation svg raphael

【解决方案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();
        }
    );
}

【讨论】：