CSS3 спрайт анимация без твининга - PullRequest
Новая
       30

CSS3 спрайт анимация без твининга

4 голосов
/ 21 декабря 2010

Читайте ниже для моего окончательного редактирования!

Можно ли использовать анимацию CSS3 без анимации анимации между кадрами?

Например, у меня есть изображение, на котором у меня есть два спрайта анимации персонажей. Они расположены на расстоянии 50 пикселей. Когда я использую следующую анимацию, я все равно получаю анимацию (хотя она очень быстрая, поэтому она может выглядеть как мерцание). 

#ball .animated{
        -webkit-animation-name: animate;
        -webkit-animation-duration: .5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;}
@-webkit-keyframes animate{
        0%{-webkit-transform: translate3d(0,0,0);}
        49%{-webkit-transform: translate3d(0,0,0);}

        50%{-webkit-transform: translate3d(-50px,0,0);}
        100%{-webkit-transform: translate3d(-50px,0,0);}

Таким образом, исходя из вышеизложенного, спрайт-кадр должен удерживаться в первой части изображения (x = 0px) в течение первых 0-49% продолжительности, а затем переходить ко второй части изображения (x = -50px) на 50-100%. Однако разницы в 1% все же достаточно, чтобы визуально увидеть анимацию от 0 до -50 пикселей.

Мысли

Edit: 

-webkit-animation-timing-function: cubic-bezier(1,0,1,0);

Вышеприведенное, казалось, немного исправило его, но через некоторое время оно снова начинает мерцать.

Edit: Я не понял, что вы можете использовать десятичные числа с процентами. Сокращение разрыва от 1% до 0,1% создает гораздо более быструю анимацию движения, которая почти не видна (с -webkit-animation-duration: <1 с;) </p> 

0%{-webkit-transform: translate3d(0,0,0);}
49.9%{-webkit-transform: translate3d(0,0,0);}

50%{-webkit-transform: translate3d(-50px,0,0);}
100%{-webkit-transform: translate3d(-50px,0,0);}

Окончательное редактирование!: Итак, из того, что я нашел, проценты анимации веб-набора будут принимать десятичную дробь на миллионное место (т. Е. 0,0001). Что на относительно быстром таймере анимации приведет к мгновенному переводу. Полагаю, немного взломать, но это делает свое дело.

Пример: 

@-webkit-keyframes sprite {
 0% {
   -webkit-transform: translate3d(0,0,0);
 }
 50% {
   -webkit-transform: translate3d(0,0,0);
 }
 50.0001%{
   -webkit-transform: translate3d(-50px,0,0);
 }
 100%{
   -webkit-transform: translate3d(-50px,0,0);
 }
}

В приведенном выше примере изображение размером 100px (каждый спрайт на изображении имеет ширину 50px) внутри контейнера div с width: 50px и overflow:hidden для отображения только одного спрайта за раз за раз.

Примечание: я использую translate3d, потому что это аппаратное ускорение в мобильных браузерах, где translateX, translateY, translateZ еще не аппаратно ускорены.

Ответы [ 3 ]

8 голосов
/ 18 июля 2012

Вот еще один замечательный пример использования steps().

Это простой, но мощный способ для анимации спрайтов.Ниже представлена ​​анимация взмахов старого герцога. 

@keyframes wink {
    from { background-position: 0px; }
    to { background-position: -500px; }
}

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://i.stack.imgur.com/1Ad8o.png");
    margin: 0 auto;      
    animation: wink .8s steps(10, end) infinite;
}
<img src="http://i.stack.imgur.com/1Ad8o.png">
<div class="hi"></div>

Существует демоверсия, с которой вы можете играть на cssdeck .

1 голос
/ 23 июня 2012

Прошло некоторое время с тех пор, как был задан этот вопрос, но в CSS3 теперь есть функция синхронизации шагов, поэтому я использовал ее для спрайтовой анимации.Из моего примера с кодом ручки на http://codepen.io/natedsaint/pen/2/7: 

/* Animation keyframes */
@keyframes walk {
  0% { background-position:0px 0px;}
  16.67% { background-position:-104px 0px;}
  33.33% { background-position:-208px 0px;}
  50% {background-position:-320px 0px;}
  66.66% { background-position:-416px 0px;}
  80.65% { background-position:-520px 0px;}
  100% { background-position:-624px 0px;}
}

#guyBrush {
  animation: walk infinite 1s steps(1,end);
  background-image:url('http://www.nathanstpierre.com/gb_walk.png');
  width:104px;
  height:152px;
  position:absolute;
  top:160px;
  left:360px;
}

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

0 голосов
/ 22 декабря 2010

Общая идея CSS Animation - ну, в общем, анимировать. Если вы хотите, чтобы вещи переходили из одной позиции в другую, то вы можете просто установить позицию напрямую с помощью JavaScript и выполнять итерации с помощью JavaScript.

Однако, если вы хотите использовать анимацию, у вас есть несколько вариантов. Одним из них является установка непрозрачности на ноль и обратно на единицу с двумя ключевыми кадрами заполнителя. Или, в качестве альтернативы, измените z-index, чтобы скрыть объект анимации за маскирующим элементом во время перевода. z-индексы не анимация.

ОБНОВЛЕНИЕ: переходы функции шага были добавлены в спецификацию и теперь реализованы в Chrome, так что теперь то, что вы хотели сделать, возможно.

...