Question

基本上我试图让人脸上的头骨闪烁，我已经实现了闪烁一次。但我想要达到的效果是它看起来更有机和随机。这是基本结构：

    function flicker() {

        var maxFlick = 6,
            amount = Math.round(Math.random() * maxFlick),
            running = false;

        function showHide() {

            $flicker.show();

            running = true;

            setTimeout(function() {
                $flicker.hide();

                running = false;

            }, 100)
        }
        for (i = 0; i < amount; i++) {
            if(!running) {
                showHide();
            }
        }           
    }

    setInterval(flicker, 4000);

我曾假设使用随机数量语句运行for循环会产生所需的效果，但它仍然只是像以前一样每4000毫秒闪烁一次。有什么指针吗？

Answer 1

在Regent和this fiddle的帮助下，我想出了答案：

    function flicker() {

        var maxFlick = 6,
            amount = Math.round(Math.random() * maxFlick),
            delta = 2,
            timer;

        var doneFlicks = 0;

        var flickInterval = setInterval(showHide, timer);

        function showHide() {
            timer = Math.round((Math.random() + delta) * 100)

            $flicker.show();

            var hide = setTimeout(function() {
                $flicker.hide();
                doneFlicks++
            }, 20)

            if (doneFlicks == amount) {
                clearInterval(flickInterval);
            }
        }       
    }

    setInterval(flicker, 3000);

这会产生随机闪烁效果，每3秒调用一次 - 非常适合恐怖电影效果！

再次感谢Regent的帮助！

创建随机图像闪烁

1 个答案: