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

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

可以做些什么来更正此代码？

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 添加不透明度来修复它。

这是它的工作方式，但我不确定它是否是您想要的。

我还对代码做了一些调整。你有一些多余的变量。

我不确定你的意思是什么，但我认为这看起来更好一些。

于 2013-02-15T20:51:38.447 回答