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 секунд, это просто более очевидно, что после первого вращения есть пауза, прежде чем он снова повернется. Я хочу избавиться от этой паузы.

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

animation webkit css transform 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();

Пример .

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

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

Ответы: