सीएसएस यादृच्छिक एनीमेशन

Question

मेरा विचार है कि वे छवियों को दूर करने के दौरान, छोटे हिस्सों में घूमने के लिए एक छवि बनाना है।

मैंने कुछ सीएसएस एनिमेशन के साथ ऐसा करने में कामयाब रहा है - scale + translate3d - (परिणाम बहुत अच्छे नहीं हैं लेकिन यह एक शुरुआत है)।

अब, समस्या यह है कि मैं अनुवाद यादृच्छिक होना चाहता हूं। जहां तक ​​मुझे समझा गया है, जेएस/जेक्वायरी/जीएसएपी, और एससीएसएस/एसएएस से जुड़े एक और अधिक जटिल तरीके से एक आसान तरीका है ...

मैं उन सभी से अपरिचित हूं।

मुझे एक कोड मिला है जो एक रोटेशन को यादृच्छिक बनाने के लिए जावास्क्रिप्ट का उपयोग करता है, और मैंने इसे अपने अनुवाद में अनुकूलित किया है।

कोड को उत्तर के रूप में here पोस्ट किया गया था।

// 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 इस्तेमाल कर सकते हैं लगता है .. लेकिन स्पष्ट रूप से मैं इसे कैसे लिखने के लिए नहीं पता ...

Answer 1

इनबिल्ट 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); 
}); 

यह startChange हर दूसरे (1000ms) कॉल करेंगे।