Hình động ngẫu nhiên CSS

Question

Ý tưởng của tôi là tạo một hình ảnh để chia nhỏ thành các phần nhỏ sẽ giảm tỷ lệ, trong khi chúng bay đi.

Tôi đã quản lý để làm điều đó với một vài hoạt ảnh CSS - scale + translate3d - (kết quả không tuyệt vời nhưng đó là sự khởi đầu).

Bây giờ, vấn đề là tôi muốn các bản dịch là ngẫu nhiên. Theo như tôi đã hiểu, có một cách đơn giản liên quan đến JS/Jquery/GSAP và một cách phức tạp hơn một chút liên quan đến SCSS/Sass ...

Tôi không quen thuộc với tất cả chúng.

Tôi đã tìm thấy mã sử dụng javascript để ngẫu nhiên xoay vòng và tôi đã điều chỉnh nó thành bản dịch của tôi.

Mã đã được đăng here làm câu trả lời.

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

Vì vậy, cuối cùng, có phần này:

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

Mà tôi không chắc chắn nhưng tôi đoán nó là chức năng để kích hoạt chức năng startChange.

Hiện tại. Trong trường hợp của tôi, tôi muốn một chức năng tự động kích hoạt và, khi hoạt ảnh phải tiếp tục phát, nó sẽ phải lặp vô thời hạn ..

Bất kỳ ý tưởng nào để làm điều đó? Tôi đoán tôi có thể sử dụng onAnimationEnd .. Nhưng rõ ràng là tôi không biết làm thế nào để viết nó ...

Answer 1

Các inbuilt hàm JavaScript setTimeout(functionName, time) gọi hàm có tên functionName sau time mili giây. Xóa phần $('#update-box').bind... và thay thế bằng hàm được gọi cứ 1000ms một lần. Ví dụ:

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

Điều này sẽ gọi startChange mỗi giây (1000ms).