CSS3 Continuous Rotate Animation (как у загружаемых солнечных часов)

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

Я пробовал изменить продолжительность анимации, но это не имеет значения, если вы замедляете ее прямо, скажем, на 5 секунд, это просто более очевидно, что после первого вращения есть пауза, прежде чем он снова повернется. Я хочу избавиться от этой паузы.

Любая помощь очень ценится, спасибо.

— Gcoop
источник

14

Код, специфичный для Webkit, не делает его менее CSS3 ... учитывая, что ни один из других провайдеров в то время не предоставлял одинаковых функций :)

— 19h

4

Разве анимация не должна идти от 0 до 359? Если бы он работал от 0 до 360, тогда кадр с 0 воспроизводился дважды, так как кадр 0 и кадр 360 были бы одинаковыми ...

— Брэд Паркс

1

@BradParks С другой стороны, если вы перейдете от 0 к 359, то анимация, которая должна иметь место на 359,5, будет полностью пропущена. В большинстве случаев перекрытие 0 и 360 будет настолько быстрым, что будет незаметно.

— Blazemonger 09

@Blazemonger не обязательно. Вы можете попробовать это сами в jsfiddle и убедиться, что в зависимости от продолжительности анимации это может быть не так уж и сложно.

— Илан Бяла

1

Вся эта штука с «359 градусами» глупая - вы не можете контролировать шаг анимации. Предполагая, что 1-секундная анимация с частотой 60 кадров в секунду составляет 6 градусов на кадр, поэтому вы должны остановиться на «354 градусах». но, как я уже сказал, у вас нет контроля над частотой кадров, так что это бесполезно. Я бы предположил, что умная реализация может обнаружить 0-360 и соответствующим образом настроить. Я просто умножил время и угол на 100 - т.е. От 0 до 36000 градусов, поэтому теоретический сбой будет происходить только через каждые 100 оборотов. но я обнаружил, что вы все равно будете получать сбои анимации, независимо от того, что вы делаете

— Simon_Weaver

71

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

— rrahlf
источник

Типичная ошибка копирования-вставки. Большое спасибо! (На самом деле я получил свой css от shareaholic, и из-за неправильно названного свойства он использовал easeфункцию времени по умолчанию ).

— doekman

55

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

мой 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 - т.е.

— От

@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 02

8

Если вы ищете только версию webkit, это здорово: 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 не дает мне пауз при использовании этого метода.

— Alex
источник

Отлично, я почти уверен, что ваше предположение верно, однако я использую 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();

Пример .

— Алекс
источник