Анімація безперервного обертання CSS3 (як і завантажувальний сонячний годинник)

120

Я намагаюся повторити індикатор активності в стилі Apple (піктограма завантаження сонячного годинника), використовуючи анімацію PNG та CSS3. У мене зображення обертається і роблю це постійно, але, здається, є затримка після того, як анімація закінчилася, перш ніж здійснити наступне обертання.

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

Я спробував змінити тривалість анімації, але це не має ніякої різниці, якщо ви її сповільнюєте, скажіть, 5s це просто очевидніше, що після першого обертання виникає пауза, перш ніж вона знову обертається. Мені хочеться позбутися цієї паузи.

Будь-яка допомога дуже вдячна, дякую.

— Gcoop
джерело

14

Специфічний для Webkit код не робить його менш CSS3 .. враховуючи, що жоден з інших провайдерів тоді не забезпечував рівних функцій :)

— 19h

4

Чи не повинна анімація працювати від 0 до 359? Якби він становив від 0 до 360, то у вас був би кадр з 0 грав два рази, оскільки кадр 0 і кадр 360 були б однаковими ...

— Бред Паркс

1

@BradParks З іншого боку, якщо ви переходите від 0 до 359, то анімація, яка має відбутися на рівні 359,5, пропускається повністю. У більшості випадків перекриття 0 і 360 буде настільки швидким, що буде непомітним.

— Blazemonger

@Blazemonger не обов'язково. Ви можете спробувати самостійно в jsfiddle і побачити, що залежно від тривалості анімації вона може бути не настільки тонкою.

— Ілан Білала

1

уся ця штука на 359 градусів нерозумна - у вас немає контролю над кроком анімації. припускаючи анімацію на 1 секунду з 60 кадрів в секунду, це 6 градусів на кадр, тож слід зупинитися на "354 градуси". але, як я сказав, ви не маєте контролю над частотою кадрів тут, так що це досить марно. Я думаю, розумна реалізація могла б виявити 0-360 і відповідно скоригуватися. Я просто помножив час і кут на 100 - тобто. 0 градусів до 36000 градусів, тому теоретичний збій відбуватиметься лише кожні 100 обертів. але я виявив, що ви збираєтеся отримати анімаційні глюки незалежно від того, чим все одно

— займаєтесь

71

Ваша проблема полягає в тому, що ви поставили товари, -webkit-TRANSITION-timing-functionколи хочете -webkit-ANIMATION-timing-function. Ваші значення від 0 до 360 будуть працювати належним чином.

— rrahlf
джерело

Типова помилка копіювання та вставки. Дуже дякую! (Я фактично отримав свій css від shareaholic, і через неправильно названу властивість він використовував функцію easeсинхронізації за замовчуванням ).

— doekman

55

Ви також можете помітити невелике відставання, тому що 0deg і 360deg - це одне і те ж місце, тому воно йде від місця 1 по колу назад до місця 1. Це дійсно незначно, але щоб виправити це, все, що вам потрібно зробити, це змінити 360deg на 359дег

мій jsfiddle ілюструє вашу анімацію:

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

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

Крім того, що може більше нагадувати піктограму завантаження яблук - це анімація, яка перетворює непрозорість / колір смужок сірого, а не піктограму, що обертається.

— Ілан Біла
джерело

3

Ваш JS Fiddle містить найбільш лаконічну реалізацію, яку я бачив для простого обертання зображення - ідеальну (і дякую за публікацію).

— Філіп Мерфі

дякую, дайте мені знати, якщо вам потрібна будь-яка інша допомога, до речі, я використовував префікси webkit для анімації, але ви також повинні включити префікси mozilla, оскільки вони замість них використовують правило -moz-css.

— Ілан Білала

ви також можете помножити час і кут на 100 - тобто. 0 градусів до 36000 градусів :-)

— Simon_Weaver

@Simon_Weaver все одно знадобиться 35999deg, щоб не бачити подвійних кадрів.

— Ілан Білала

2

@IlanBiala, за винятком я дуже сумніваюся, що ваша відеокарта працює зі швидкістю 720 кадрів в секунду ;-) Ви не можете знати, який приріст між кадрами, не знаючи частоти кадрів. Якщо ви можете, то можете поставити 348 градусів, тому що за пів секунди зі швидкістю 60 кадрів в секунду кожен кадр просунувся б на 12 градусів. Я вважаю за краще просто поставити 360 і сподіваюся, що хтось розумний запрограмував браузер для автоматичного налаштування

— Simon_Weaver

27

Ви можете використовувати анімацію так:

-webkit-animation: spin 1s infinite linear;

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

— Kinglybird
джерело

2

Дивовижне та просте рішення!

— THELD

8

Якщо ви шукаєте лише версію веб-файлів, це чудово: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html від http://37signals.com/svn/posts/2577-loading- спінер-анімація-використання-css-і-webkit

— Тюдор
джерело

9

Дуже круто. Я насправді збираю спінери, як GIFі CSS. Моя колекція . Якщо ви знаєте більше, будь ласка, дайте мені знати.

— doekman

1

Ваш код здається правильним. Я припускаю, що це пов'язане з тим, що ви використовуєте .png, і те, як браузер перемальовує об’єкт при обертанні, є неефективним, викликаючи зависання (під яким браузером ви тестуєте?)

Якщо можливо, замініть .png чимось рідним.

побачити; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

Chrome не дає мені пауз при використанні цього методу.

— Олексій
джерело

Ідеально, я впевнений, що ваше припущення правильне, проте я використовую PNG, оскільки мій значок завантаження не є сонячним годинником, це символ ядерного стилю ... Це не повинно бути, хоча я можу змінити його на метод, який ви запропонуйте - спасибі!

— Gcoop

1

Я зробив невелику бібліотеку яка дозволяє вам легко використовувати пульсацію без зображень.

Він використовує CSS3, але повертається на JavaScript, якщо браузер його не підтримує.

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

Приклад .

— алекс
джерело