CSS3 ধারাবাহিক ঘোরান অ্যানিমেশন (ঠিক একটি লোডিং সানডিয়ালের মতো)

Question

আমি একটি পিএনজি এবং সিএসএস 3 অ্যানিমেশন ব্যবহার করে একটি অ্যাপল শৈলীর ক্রিয়াকলাপ সূচক (সানডিয়াল লোডিং আইকন) প্রতিলিপি করার চেষ্টা করছি। আমার কাছে ইমেজটি ঘোরানো এবং এটি ধারাবাহিকভাবে করা আছে, তবে অ্যানিমেশনটি পরবর্তী ঘূর্ণায়মানের আগে শেষ হওয়ার পরে বিলম্ব হতে পারে বলে মনে হচ্ছে।

@-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;
    }

আমি অ্যানিমেশনের সময়কাল পরিবর্তন করার চেষ্টা করেছি তবে এটি কোনও পার্থক্য করে না, আপনি যদি এই মুহূর্তে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে পরিবর্তন ঘটাতে পারেন তবে এটি প্রথম স্পষ্ট হওয়ার পরে এটি আরও স্পষ্টভাবে বলুন again এই বিরতি আমি মুক্তি পেতে চাই।

যে কোনও সাহায্যের অনেক প্রশংসা করা হয়, ধন্যবাদ।

Comments

ওয়েবকিট-নির্দিষ্ট কোড এটিকে কম সিএসএস 3 করে না .. বিবেচনা করে যে অন্য সরবরাহকারীদের কেউই সেই সময় সমান ফাংশন সরবরাহ করেনি :)

— 19

অ্যানিমেশনটি 0 থেকে 359 পর্যন্ত চালানো উচিত নয়? যদি এটি 0 থেকে 360 অবধি চলতে থাকে তবে আপনি 0 এ ফ্রেমটি দু'বার খেলতেন, যেহেতু ফ্রেম 0 এবং ফ্রেম 360 এক রকম হবে ...

— ব্র্যাড পার্কস

@ ব্র্যাডপার্কস অন্যদিকে, আপনি যদি 0 থেকে 359 পর্যন্ত যান তবে 359.5 এ হওয়া অ্যানিমেশনটি পুরোপুরি বাদ দেওয়া হবে। বেশিরভাগ ক্ষেত্রে, 0 এবং 360 এর ওভারল্যাপটি এত তাড়াতাড়ি হয়ে উঠবে যে অলক্ষিত হতে পারে।

— ব্লেজমোনজার

পছন্দ করুন আপনি এটিকে একটি jsfiddle এ চেষ্টা করতে পারেন এবং দেখতে পারেন যে অ্যানিমেশনের সময়কালের উপর নির্ভর করে এটি এত সূক্ষ্ম নাও হতে পারে।

— ইলান বিয়াল 20

এই পুরো '359 ডিগ্রি' জিনিসটি নির্বোধ - অ্যানিমেশনটির ধাপে আপনার কোনও নিয়ন্ত্রণ নেই। ফ্রেম প্রতি 6 ডিগ্রি সহ 60fps সহ একটি 1 সেকেন্ড অ্যানিমেশন ধরে নেওয়া যাতে আপনার '354 ডিগ্রি' এ থামানো উচিত। তবে আমি যেমন বলেছিলাম যে এখানে ফ্রেম রেটের উপর আপনার নিয়ন্ত্রণ নেই তাই এটি বেশ বৃথা। আমি কল্পনা করতে পারি যে একটি স্মার্ট বাস্তবায়ন 0-360 সনাক্ত করতে পারে এবং সে অনুযায়ী সামঞ্জস্য করতে পারে। আমি কেবল সময় এবং কোণকে 100 দ্বারা গুণ করেছি - অর্থাৎ। 0 ডিগ্রি থেকে 36000 ডিগ্রি তাই তাত্ত্বিক ত্রুটি প্রতি 100 টি ঘূর্ণন শুধুমাত্র ঘটবে। তবে আমি পেয়েছি আপনি যেভাবেই করুন না কেন আপনি অ্যানিমেশন

— গ্লিটস পেতে চলেছেন

Answer 1

এখানে আপনার সমস্যাটি হ'ল আপনি -webkit-TRANSITION-timing-functionযখন চান তখন সরবরাহ করেছিলেন -webkit-ANIMATION-timing-function। আপনার 0 থেকে 360 এর মানগুলি সঠিকভাবে কাজ করবে।

Comments

একটি সাধারণ অনুলিপি-ত্রুটি। অনেক ধন্যবাদ! (আমি আসলে শেয়ারহোলিকের কাছ থেকে আমার সিএসএস পেয়েছি এবং ভুলভাবে নামের সম্পত্তি হিসাবে এটি ডিফল্ট easeটাইমিং ফাংশন ব্যবহার করেছে )।

— ডোকম্যান

Answer 2

আপনি কিছুটা পিছিয়েও লক্ষ্য করতে পারেন কারণ 0deg এবং 360deg একই স্পট, তাই এটি 1 চক্রের মধ্যে 1 চক্র থেকে স্পট 1 এ চলেছে really এটি সত্যই তুচ্ছ নয়, তবে এটি ঠিক করার জন্য আপনাকে যা করতে হবে তা হ'ল 360deg পরিবর্তন করতে হবে 359deg

আমার jsfiddle আপনার অ্যানিমেশন চিত্রিত:

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

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

এছাড়াও আপেল লোডিং আইকনটির সাদৃশ্য আরও কী হতে পারে তা হ'ল একটি অ্যানিমেশন যা আইকনটি ঘোরানোর পরিবর্তে ধূসর বর্ণের বর্ণের অস্বচ্ছ / বর্ণকে রূপান্তর করে।

Comments

আপনার জেএস ফিডল সর্বাধিক সংক্ষিপ্ত বাস্তবায়ন ধারণ করেছে যা আমি সাধারণ চিত্র ঘোরানোর জন্য দেখেছি - নিখুঁত (এবং পোস্ট করার জন্য ধন্যবাদ)।

— ফিলিপ মারফি

ধন্যবাদ আপনাকে যদি অন্য কোনও সহায়তার দরকার হয় তবে আমাকে জানাবেন, আমি অ্যানিমেশনটির জন্য ওয়েবকিট উপসর্গগুলি ব্যবহার করেছি তবে মোজিলা উপসর্গগুলিও আপনাকে অন্তর্ভুক্ত করা উচিত কারণ তারা পরিবর্তে-মোজ-সিএসএস নিয়ম ব্যবহার করে।

— ইলান বিয়াল

আপনি সময় এবং কোণটি 100 - দিয়েও গুণতে পারেন। 0 ডিগ্রি থেকে 36000 ডিগ্রি :-)

— সাইমন_উইভার

@ সিমন_উইভার এখনও কোনও ডাবল ফ্রেম না দেখতে 35999 ডিগ্রি প্রয়োজন।

— ইলান বিয়াল

আপনার গ্রাফিক্স কার্ডটি 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

দুর্দান্ত এবং সহজ সমাধান!

— TheLD

Answer 4

যদি আপনি কেবল ওয়েবকিট সংস্করণটি সন্ধান করছেন তবে এটি নিফটি: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html থেকে http://37signals.com/svn/posts/2577-loading- স্পিনার-অ্যানিমেশন-ব্যবহার-CSS-এবং-WebKit

Comments

খুব ঠান্ডা. আমি আসলে স্পিনার সংগ্রহ করি GIFএবং উভয়ই CSS। আমার সংগ্রহ । আপনি যদি আরও জানেন তবে দয়া করে আমাকে জানান।

— ডোকম্যান

Answer 5

আপনার কোডটি সঠিক বলে মনে হচ্ছে। আমি অনুমান করব যে আপনি একটি .png ব্যবহার করছেন এবং ব্রাউজারটি যেভাবে ঘোরার পরে বস্তুটিকে পুনরায় আঁকবে তা হ্যাং হওয়ার কারণ হয়ে থাকে (আপনি কোন ব্রাউজারের অধীনে পরীক্ষা করছেন?)

সম্ভব হলে দেশীয় কিছু দিয়ে .png প্রতিস্থাপন করুন।

দেখা; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

ক্রোম আমাকে এই পদ্ধতিটি ব্যবহার করে কোনও বিরতি দেয় না।

Comments

নিখুঁত, আমি নিশ্চিত যে আপনার অনুমানটি সঠিক কিনা তবে আমি একটি পিএনজি ব্যবহার করছি কারণ আমার লোডিং আইকনটি একটি পারমাণবিক শৈলীর প্রতীক নয় যে এটি একটি সূর্যময় নয় ... তবে এটি হওয়ার দরকার নেই তাই আমি আপনাকে এ পদ্ধতিতে পরিবর্তন করতে পারি পরামর্শ - ধন্যবাদ!

— Gcoop

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();

উদাহরণ ।