CSS随机动画

CSS random animation

本文关键字：动画 随机 CSS      更新时间：2023-09-26

我的想法是把一个图像分解成小的部分，当它们飞走的时候，它们会按比例缩小。

我已经设法用几个CSS动画- scale + translate3d -(结果不是很好，但这是一个开始)。

现在，问题是我希望翻译是随机的。据我所知，有一种简单的方法涉及JS/Jquery/GSAP，还有一种更复杂的方法涉及SCSS/Sass…

他们我都不熟悉。

我发现了一个代码，使用javascript随机轮换，我已经适应了我的翻译。

代码贴在这里作为答案。

// search the CSSOM for a specific -webkit-keyframe rule
function findKeyframesRule(rule)
{
    // gather all stylesheets into an array
    var ss = document.styleSheets;
    // loop through the stylesheets
    for (var i = 0; i < ss.length; ++i) {
        // loop through all the rules
        for (var j = 0; j < ss[i].cssRules.length; ++j) {
            // find the -webkit-keyframe rule whose name matches our passed       over parameter and return that rule
            if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule)
                return ss[i].cssRules[j];
        }
    }
    // rule not found
    return null;
}
// remove old keyframes and add new ones
function change(anim)
{
    // find our -webkit-keyframe rule
    var keyframes = findKeyframesRule(anim);
    // remove the existing 38% and 39% rules
    keyframes.deleteRule("38%");
    keyframes.deleteRule("39%");
    // create new 38% and 39% rules with random numbers
    keyframes.insertRule("38% { -webkit-transform: translate3d("+randomFromTo(-100,100)+"vw,"+randomFromTo(-100,100)+"vw,0vw); }");
    keyframes.insertRule("39% { -webkit-transform: translate3d("+randomFromTo(-100,100)+"vw,"+randomFromTo(-100,100)+"vw,0vw); }");
    // assign the animation to our element (which will cause the animation to run)
    document.getElementById('onet').style.webkitAnimationName = anim;
}
// begin the new animation process
function startChange()
{
    // remove the old animation from our object
    document.getElementById('onet').style.webkitAnimationName = "none";
    // call the change method, which will update the keyframe animation
    setTimeout(function(){change("translate3d");}, 0);
}
// get a random number integer between two low/high extremes
function randomFromTo(from, to){
   return Math.floor(Math.random() * (to - from + 1) + from);
}

最后是这部分

$(function() {
    $('#update-box').bind('click',function(e) {
        e.preventDefault();
        startChange();        
    });
});

我不确定，但我猜它的功能是触发功能startChange。

。在我的例子中，我想要一个自动触发的函数，因为动画必须继续播放，它必须无限循环。

你知道怎么做吗?我想我可以用onAnimationEnd ..

内置JavaScript函数setTimeout(functionName, time)在time毫秒后调用名为functionName的函数。删除$('#update-box').bind...部分，并替换为每1000ms左右调用一次的函数。例如:

$(function() {
    function callStartChange() {
        startChange();
        setTimeout(callStartChange, 1000);
    }
    // And now start the process:
    setTimeout(callStartChange, 1000);
});

这将每秒(1000ms)调用startChange。

相关文章：