RaphaelJS/CSS - 텍스트/숫자 애니메이션하기

Question

나는 게임을위한 간단한 웹 애니메이션으로 뛰어 들고 있으며, 조언을 구하고있다. 궁극적으로 베 지어와 호를 잘 이해하고 경로를 따라 움직여 멋진 디아블로 III 스타일의 커브 번호를 얻는 방법을 배우게됩니다. 그러나 지금은 기본 원리를 없애기 위해 노력하고 있습니다.

First (real) attempt

키 코드

는 CSS 스타일이 (도움을 여기를 사용자에게 감사)을 강조 표시되는 텍스트를 방지

paper.text(170, 95, dmgValue).attr({fill:"white", "font-size":16}).animate({ 
    transform:"t0,-50", "fill-opacity":0} ,500).node.setAttribute("class", "no-select"); 

꽤 SIMPLE-입니다. 주요 문제는 텍스트가 여전히 불투명하지 않다는 것입니다. 텍스트 위에 커서를 올려 놓고 텍스트 커서를 볼 수 있습니다. 작동하지만,보기가 지저분합니다. 또한 할당 된 변수가 없으므로 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; 
} 

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