因此,我只是在为游戏开发简单的网络动画,并且正在寻找建议。最终,我将牢牢掌握贝塞尔曲线和弧线,并学习如何沿路径进行动画处理,以获得一些类似《暗黑破坏神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
我在保存的版本之间进行了许多小的修订,使代码变得非常庞大。我希望能够限制一次飞行的数字的数量(对于速度较慢的计算机),因此我将它们放入可以无限循环并使用的数组中,尽管这可能不是必需的,而且不会很大处理掉它。
也从使用transform转移到设置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();
}
);
}
关于javascript - RaphaelJS/CSS-动画文字/数字,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26051164/