CSS3 निरंतर घुमाएँ एनीमेशन (बस एक लोडिंग सनडायल की तरह)

Question

मैं एक PNG और CSS3 एनीमेशन का उपयोग करके Apple स्टाइल एक्टिविटी इंडिकेटर (sundial लोडिंग आइकन) को दोहराने की कोशिश कर रहा हूं। मेरी छवि घूमने और इसे लगातार करने की है, लेकिन लगता है कि एनीमेशन समाप्त होने के बाद एक देरी हो रही है, इससे पहले कि वह अगला रोटेशन करता है।

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}
#loading img
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: linear;
    }

मैंने एनिमेशन की अवधि को बदलने की कोशिश की है, लेकिन इससे कोई फर्क नहीं पड़ता, अगर आप इसे धीमा करते हैं, तो 5 एस कहें कि यह अधिक स्पष्ट है कि पहले रोटेशन के बाद फिर से घूमने से पहले एक विराम होता है। यह यह विराम है जिससे मैं छुटकारा पाना चाहता हूं।

किसी भी मदद की बहुत सराहना की है, धन्यवाद।

Comments

वेबकिट-विशिष्ट कोड इसे कम नहीं बनाता है CSS3 .. यह देखते हुए कि अन्य प्रदाताओं में से किसी ने भी उस समय समान कार्य प्रदान नहीं किए थे :)

— 19

क्या एनीमेशन 0 से 359 तक नहीं चलना चाहिए? यदि यह 0 से 360 तक चला है, तो आपके पास फ्रेम 0 पर दो बार खेला जाएगा, क्योंकि फ्रेम 0 और फ्रेम 360 समान होगा ...

— ब्रैड पार्क्स

@BradParks दूसरी ओर, यदि आप 0 से 359 पर जाते हैं, तो 359.5 पर जो एनीमेशन होना चाहिए वह पूरी तरह से छोड़ दिया गया है। ज्यादातर मामलों में, 0 और 360 का ओवरलैप इतना जल्दी हो जाएगा जितना कि किसी का ध्यान नहीं जाएगा।

— ब्लेज़ेमॉन्गर

@Blazemonger जरूरी नहीं है। आप इसे अपने आप को एक jsfiddle में आज़मा सकते हैं और देख सकते हैं कि एनीमेशन अवधि के आधार पर यह इतना सूक्ष्म नहीं हो सकता है।

— इलन बियाला

यह पूरी '359 डिग्री' बात मूर्खतापूर्ण है - एनीमेशन के कदम पर आपका कोई नियंत्रण नहीं है। 60 सेकंड के साथ 6 फ्रेम प्रति फ्रेम के साथ 1 सेकंड का एनीमेशन संभालने पर आपको '354 डिग्री' पर रोक देना चाहिए। लेकिन जैसा मैंने कहा कि आपके यहाँ फ्रेम दर पर नियंत्रण नहीं है, इसलिए यह बहुत व्यर्थ है। मुझे लगता है कि एक स्मार्ट कार्यान्वयन 0-360 का पता लगा सकता है और तदनुसार समायोजित कर सकता है। मैंने समय और कोण को 100 से गुणा किया है - अर्थात। 0 से 36000 डिग्री तक नीचे है तो सैद्धांतिक गड़बड़ केवल हर 100 घुमाव पर होगी। लेकिन मैंने पाया है कि आप एनीमेशन glitches पाने के लिए जा रहे हैं कोई फर्क नहीं पड़ता कि आप वैसे भी क्या करते हैं

— Simon_Weaver

Answer 1

यहाँ आपका मुद्दा यह है कि -webkit-TRANSITION-timing-functionजब आप चाहते हैं कि आपने आपूर्ति की है -webkit-ANIMATION-timing-function। आपके 0 से 360 के मान ठीक से काम करेंगे।

Comments

एक विशिष्ट कॉपी-पेस्ट त्रुटि। आपका बहुत बहुत धन्यवाद! (मैं वास्तव में मेरे crea को shareaholic से मिला है और गलत तरीके से नामित संपत्ति के कारण, यह डिफ़ॉल्ट easeटाइमिंग फ़ंक्शन का उपयोग करता है)।

— डॉकमैन

Answer 2

आप थोड़ा अंतराल भी देख सकते हैं क्योंकि 0deg और 360deg एक ही स्पॉट हैं, इसलिए यह 1 सर्कल से वापस स्पॉट 1 में जा रहा है। यह वास्तव में महत्वहीन है, लेकिन इसे ठीक करने के लिए, आपको 360gg को बदलना होगा। 359deg

मेरा jsfiddle आपके एनीमेशन दिखाता है:

#myImg {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

इसके अलावा क्या हो सकता है कि ऐप्पल लोडिंग आइकन से अधिक समानता एक एनीमेशन की होगी जो आइकन को घुमाने के बजाय ग्रे की धारियों की अपारदर्शिता / रंग को बदल देती है।

Comments

आपके जेएस फिडेल में सबसे रसीला कार्यान्वयन होता है जिसे मैंने सरल छवि रोटेशन के लिए देखा है - एकदम सही (और पोस्ट करने के लिए धन्यवाद)।

— फिलिप मर्फी

धन्यवाद मुझे बताएं कि क्या आपको किसी अन्य सहायता की आवश्यकता है, वैसे, मैंने एनीमेशन के लिए वेबकिट उपसर्गों का उपयोग किया था, लेकिन आपको मोज़िला उपसर्गों को भी शामिल करना चाहिए, क्योंकि वे -moz-css नियम का उपयोग करते हैं।

— इलान बिआला

आप समय और कोण को 100 से गुणा कर सकते हैं - अर्थात। 0 डिग्री से 36000 डिग्री :-)

— साइमन_वेस्टर

@Simon_Weaver को अभी भी किसी भी डबल फ्रेम को नहीं देखने के लिए 35999deg की आवश्यकता होगी।

— इलान बिआला

@IlanBiala को छोड़कर मुझे बहुत संदेह है कि आपके ग्राफिक्स कार्ड 720fps पर चल रहे हैं; ;-) आपके लिए यह जानना असंभव है कि फ्रेम को जाने बिना फ्रेम के बीच क्या वृद्धि होती है। अगर कुछ भी आप 348 डिग्री पर रख सकते हैं क्योंकि 60fps पर आधे सेकंड में प्रत्येक फ्रेम 12 डिग्री से आगे बढ़ेगा। मैं सिर्फ 360 डाल सकता हूं और आशा करता हूं कि किसी स्मार्ट ने ब्राउज़र को स्वचालित रूप से समायोजित करने के लिए प्रोग्राम किया है

— साइमन_वेअर

Answer 3

आप इस तरह से एनीमेशन का उपयोग कर सकते हैं:

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}

Comments

बहुत बढ़िया और आसान उपाय!

— एलएलडी

Answer 4

: आप केवल एक वेबकिट संस्करण के लिए देख रहे हैं इस गंधा है http://s3.amazonaws.com/37assets/svn/463-single_spinner.html से http://37signals.com/svn/posts/2577-loading- स्पिनर-एनीमेशन का इस्तेमाल करने वाली-सीएसएस और वेबकिट

Comments

बहुत ही शांत। मैं वास्तव में स्पिनरों को इकट्ठा करता हूं, दोनों GIFऔर CSS। मेरा संग्रह । यदि आप अधिक जानते हैं, तो कृपया मुझे बताएं।

— डॉकमैन

Answer 5

आपका कोड सही लगता है। मुझे लगता है कि यह इस तथ्य के साथ करने के लिए कुछ है कि आप एक .png का उपयोग कर रहे हैं और जिस तरह से ब्राउज़र ऑब्जेक्ट को रोटेशन पर फिर से बनाता है वह अक्षम है, जिससे हैंग हो जाता है (आप किस ब्राउज़र के तहत परीक्षण कर रहे हैं?)

यदि संभव हो तो .png को कुछ मूल के साथ बदलें।

देख; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

Chrome मुझे इस पद्धति का उपयोग करके कोई रोक नहीं देता है।

Comments

सही है, मुझे पूरा यकीन है कि आपकी धारणा सही है, लेकिन मैं पीएनजी का उपयोग कर रहा हूं क्योंकि मेरा लोडिंग आइकन एक परमाणु शैली का प्रतीक नहीं है ... हालांकि यह होना जरूरी नहीं है, इसलिए मैं इसे आपके तरीके में बदल सकता हूं सुझाव - धन्यवाद!

— गकोप

Answer 6

मैंने एक छोटी सी लाइब्रेरी बनाई जो आपको छवियों के बिना आसानी से एक थ्रोबर का उपयोग करने की सुविधा देती है।

यह CSS3 का उपयोग करता है, लेकिन यदि ब्राउज़र इसका समर्थन नहीं करता है तो जावास्क्रिप्ट पर वापस आ जाता है।

// First argument is a reference to a container element in which you
// wish to add a throbber to.
// Second argument is the duration in which you want the throbber to
// complete one full circle.
var throbber = throbbage(document.getElementById("container"), 1000);

// Start the throbber.
throbber.play();

// Pause the throbber.
throbber.pause();

उदाहरण है ।