0

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

アニメーションを実行しない場合、クリックすると、意図した場所の中央に「スパークマーク」が残ります。ただし、アニメーションを試みても何も表示されず、ログにアニメーションが表示されないようです。目的は、2秒間移動し、2秒でフェードアウトして非表示になるアニメーションを作成することです。

このコードを修正するために何ができるでしょうか？

4

1 に答える 1

0

不透明度を設定していないため、オブジェクトがコレクションに表示されませんでした

ここで不透明度をチェックしたとき：

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

数字ではなく空白でした。

そこで、image_object に opacity を追加して修正しました。

これがどのように機能しているように見えますが、それがあなたが望んでいたものかどうかはわかりません.

また、コードにいくつかの調整を加えました。いくつかの冗長な変数がありました。

何をするつもりだったのかはわかりませんが、これで少しは良くなったと思います。

于 2013-02-15T20:51:38.447 に答える