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