RaphaelJS/CSS - 動畫文本/數字

所以，我只是潛入一個簡單的網頁動畫遊戲，我正在尋找建議。最終，我會抓住貝塞爾曲線和弧線，並學習如何沿着一條路徑進行動畫處理，以獲得一些漂亮的暗黑破壞神III數字，但現在，我只是試圖讓基本面下降。RaphaelJS/CSS - 動畫文本/數字

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

來源

2014-09-26 Dinklebeeeerg

我實在不明白的問題，第一個例子。我無法在這裏懸停或看到文本光標？ – Ian 2014-09-26 06:49:56

再次您好:)我已經通過刪除填充不透明動畫改變了第一個：http://jsfiddle.net/rLcwax9k/8/是否可以引用它們，即使它們沒有變量名？ – Dinklebeeeerg 2014-09-26 16:50:44

取決於你的意思。您可以將您創建的對象作爲函數的一部分返回，並將其分配給一個值。不太確定問題仍然存在。我很想用一個更簡潔的例子來寫一個新問題（就像後面的jsfiddle一樣），這個問題正在經歷以及如何複製它。 – Ian 2014-09-26 23:58:25

我想我想通了！

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

來源

2014-09-27 03:33:12 Dinklebeeeerg

RaphaelJS/CSS - 動畫文本/數字

回答

相關問題