爲什麼我的火花沒有動畫？

我已經在http://blajeny.com，下面的代碼意味着動畫幾個火花從用戶點擊在屏幕上跳舞遠：爲什麼我的火花沒有動畫？

jQuery('body').click(function(event_object) 
    { 
    var number_of_sparks = 6 + Math.round(6 * Math.random()); 
    for(var index = 0; index < number_of_sparks; ++index) 
     { 
     spark(event_object.pageX, event_object.pageY); 
     } 
    }); 

function move_spark(image, angle, increment, speed, x, y) 
    { 
    console.log('angle: ' + angle + ', increment: ' + increment + ', speed: ' 
     + speed); 
    my_angle = angle + (Math.random() - Math.random())/10; 
    var velocity_x = Math.round(Math.cos(angle) * speed); 
    var velocity_y = Math.round(Math.sin(angle) * speed); 
    image.style.top = (y - 10 + velocity_y) + 'px'; 
    image.style.left = (x - 10 + velocity_x) + 'px'; 
    my_increment = increment + 1; 
    if (increment > 10) 
     { 
     image.style.opacity = (20 - my_increment)/10; 
     } 
    if (image.style.opacity < .01) 
     { 
     document.body.removeChild(image); 
     } 
    else 
     { 
     setTimeout(function() 
      { 
      move_spark(image, my_angle, my_increment, speed, x, y); 
      }, 100); 
     } 
    } 

function spark(x, y) 
    { 
    var increment = 0; 
    var image_object = new Image(); 
    var angle = 2 * 3.1416 * Math.random(); 
    var speed = 7 * Math.random() + 7 * Math.random() + 7 * Math.random(); 
    image_object.onload = function() 
     { 
     image_object.style.position = 'absolute'; 
     image_object.style.zIndex = 1; 
     image_object.style.top = (y - 10) + 'px'; 
     image_object.style.left = (x - 10) + 'px'; 
     } 
    image_object.src = '/img/spark.png'; 
    document.body.appendChild(image_object); 
    console.log('Before move_spark: '); 
    move_spark(image_object, angle, increment, speed, x, y); 
    }

如果我不跑動畫，點擊留下了「火花標誌」集中在預期的地方。但是，如果我嘗試動畫，我什麼都看不到，並且日誌似乎沒有顯示動畫。目的是製作一個動畫，它會移動兩秒鐘，在第二秒鐘後漸漸消失。

可以做些什麼來糾正這個代碼？

來源

2013-02-15 JonathanHayward

什麼火花，我看到的只是一些惱人的魔方？ – adeneo 2013-02-15 20:35:11

@adeneo OP表示火花不會出現......或者你真的需要那些老花鏡嗎？ ; ）。 – Teemu 2013-02-15 20:37:11

@泰姆 - 哦，好吧，我真的需要眼鏡。 +1給我至少努力訪問該網站！ – adeneo 2013-02-15 20:45:16

你沒有設置不透明度，以使對象從未集合

中出現了，當你檢查不透明這裏：

if (image.style.opacity < .01) { 
     document.body.removeChild(image); 
    } else { 
     setTimeout(function() { 
      move_spark(image, my_angle, increment, speed, x, y); 
     }, 100); 
    }

是空白的不是一個數字。

所以我通過給image_object添加不透明度來修復它。

Here is how it appears to be working, but I am not sure it is what you wanted.

我也做了一些調整，以代碼。你有一些冗餘變量。

我不確定你的意思，但我認爲this looks a little better。

來源

2013-02-15 20:51:38

爲什麼我的火花沒有動畫？

回答

相關問題