如何在动画完成后随机改变位置

How to randomly change position after animation complete?

本文关键字：随机 改变 位置 动画      更新时间：2023-09-26

我想创造一个模拟天空中星星闪烁的效果。

我已经在一定程度上做到了:小提琴

我的JS创建星星:

    var limit=50,
body = document.body;
spread={
    start:function(){
        for (var i=0; i<=limit; i++){
            var star=this.newStar();
            var randomD = Math.random()*30;
            var randomDelay = randomD.toString() + "s";
            star.style.top=this.rand()*90+"%";
            star.style.left=this.rand()*98+"%";
            star.style.animationDelay= randomDelay;
            body.appendChild(star);
        };
    },
    rand:function(){
        return Math.random();
    },
    newStar:function(){
        var d = document.createElement('div');
        d.innerHTML= '<figure class="star"></figure>';
        return  d.firstChild;
    }
};
spread.start();

然而，我想在动画完成后随机化"星星"的位置。

我怎么才能做到呢?

你可以监听元素的animationiteration事件，当动画循环时触发。

演示
spread={
    start:function(){
        for (var i=0; i<=limit; i++){
            var star=this.newStar();
            var randomD = Math.random()*30;
            var randomDelay = randomD.toString() + "s";
            this.randomizeStar(star);
            star.style.animationDelay= randomDelay;
            star.addEventListener("animationiteration",
                    this.randomizeStar.bind(null, star));
            body.appendChild(star);
        };
    },
    rand:function(){
        return Math.random();
    },
    newStar:function(){
        var d = document.createElement('div');
        d.innerHTML= '<figure class="star"></figure>';
        return  d.firstChild;
    },
    randomizeStar:function(star){
        star.style.top=Math.random()*90+"%";
        star.style.left=Math.random()*98+"%";
    }
};

你需要稍微调整一下动画，使动画在opacity:0结束，但演示清楚地显示星星在移动。

关于代码的一些提示和注释:

  • 只使用Math.random()而不是在spread上创建rand函数，它不会增加太多。
  • 如果你将星形创建和随机化逻辑封装在Star原型中，代码将更清晰。
相关文章：