RaphaelJS/CSS-设置文本/数字动画

RaphaelJS / CSS - Animating text/numbers

本文关键字：数字 动画 置文本 CSS- RaphaelJS      更新时间：2023-09-26

所以，我只是在为一个游戏研究简单的网络动画，我正在寻求建议。最终，我会很好地掌握边框和弧线，并学习如何沿着一条路径设置动画，以获得一些漂亮的暗黑破坏神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（）处理它；

在保存的版本之间，我做了很多小的修改，使代码变得像现在这样庞大。我希望能够限制一次飞行的数字数量（对于速度较慢的计算机），所以我把它们放在一个数组中，可以无休止地循环使用，尽管这可能不需要，也没什么大不了的。

还从使用变换转移到设置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;
}

我想我想通了！

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();
        }
    );
}
相关文章：