CSS zufällige Animation

Question

Meine Idee ist es, ein Bild in kleine Teile zu zerlegen, die verkleinert werden, während sie wegfliegen.

Ich habe es mit ein paar CSS-Animationen geschafft - scale + translate3d - (die Ergebnisse sind nicht großartig, aber es ist ein Anfang).

Jetzt ist das Problem, dass ich möchte, dass die Übersetzungen zufällig sind. Soweit ich verstanden habe, gibt es einen einfachen Weg mit JS/Jquery/GSAP, und ein wenig komplizierter Weg mit SCSS/Sass ...

Ich bin nicht vertraut mit allen von ihnen.

Ich habe einen Code gefunden, der Javascript verwendet, um eine Rotation randomisieren, und ich habe es an meine Übersetzung angepasst.

Der Code wurde here als Antwort veröffentlicht.

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

So endlich ist es dieser Teil:

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

Was ich bin nicht sicher, aber ich denke, es ist Funktion auszulösen startChange die Funktion ist.

Jetzt. In meinem Fall möchte ich, dass eine Funktion automatisch ausgelöst wird, und da die Animation weiter abgespielt werden muss, müsste sie unbegrenzt wiederholt werden.

Irgendwelche Ideen, wie man das macht? Ich glaube, ich onAnimationEnd verwenden könnte .. Aber natürlich weiß ich nicht, wie es zu schreiben ...

Answer 1

Die eingebaute JavaScript-Funktion setTimeout(functionName, time) die Funktion functionName nach time Millisekunden Namen nennt. Entfernen Sie den $('#update-box').bind... Teil und ersetzen Sie ihn durch eine Funktion, die alle 1000ms oder so aufgerufen wird. Zum Beispiel:

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

Dies wird startChange jede Sekunde (1000 ms) nennen.