javascript - 为什么我的 Spark 没有动画？

Question

我有，在 http://blajeny.com ，以下代码旨在为用户点击屏幕时跳动的几个 Spark 设置动画:

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

如果我不运行动画，单击会在预期的位置居中留下“ Spark 标记”。但是，如果我尝试播放动画，我什么也看不到，而且日志似乎也没有显示动画。目的是制作一个动画，该动画将移动两秒钟，并在第二秒逐渐消失。

如何更正此代码？

Answer 1

您没有设置不透明度，因此该对象从未出现在集合中

当您在此处检查不透明度时:

    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 .