x
 
Аниматор
29 ноября 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Каким способом лучше всего сделать простую анимацию на спрайтах? Можно ли обойтись без яваскрипта?


Попро­буйте поша­го­вую ани­ма­цию с помо­щью animation-timing-function: steps().

Пре­жде, чем браться за спрайты, давайте сде­лаем вари­ант попроще — часы с «меха­ни­че­ской» секунд­ной стрел­кой. Для начала собе­рём сами часы:

/* html */
​
<div class="clock">
  <div class="hand"></div>
</div>
/* css */
​
/* Рамка часов */
.clock {
  position: relative;
  width: 200px;
  height: 200px;
  border: 5px solid black;
  border-radius: 50%;
}
​        
/* "Креп­ле­ние" для стре­лок в цен­тре */
.clock::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: black;
  content: '';
  transform: translate(-50%, -50%);
}
​
/* "Секунд­ная стрелка */
.hand {
  position: absolute;
  top: 5%;
  left: 49%;
  width: 2%;
  height: 50%;
  border-radius: 2px;
  background: #000;
}

Запу­стим стрелку:

/* ... */
​
.hand {
  /* ... */
​
  /* Будем пово­ра­чи­вать стрелку на 360 гра­ду­сов 
  за одну минуту рав­но­мерно и бес­ко­нечно */
  animation: spin 60s linear infinite;
​
  /* Сме­стим цен­тра вра­ще­ния стрелки так
  чтобы он сов­пал с цен­тром часов */
  transform-origin: 50% 90%;
}
​
@keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

«Меха­ни­че­ская» стрелка должна дви­гаться на рав­но­мерно, а рыв­ками. Добиться этого нам помо­жет animation-timing-function: steps(). Это свой­ство поз­во­ляет задать коли­че­ство шагов, за кото­рое про­иг­ра­ется ани­ма­ция. Мы хотим, чтобы стрелка делала рывок каж­дую секунду, поэтому на 60 секунд нужно 60 шагов:

/* ... */
​
.hand {
  /* ... */
​
  /* Вме­сто того, чтобы пово­ра­чи­вать стрелку
  рав­но­мерно, будем пово­ра­чи­вать её за 60 шагов */
  animation: spin 60s steps(60) infinite;
}

Теперь при­ме­ним этот же спо­соб к спрайту. Для начала собе­рём ста­тич­ного Марио:

/* html */
​
<div class="mario"></div>
/* css */
​
.mario {
  position: relative;
  width: 32px;
  height: 64px;
  background-image: url(super-mario-sprite.png);
}

Запу­стим дви­же­ние фона:

/* css */
​
.mario {
  /* ... */
  animation: move 1s linear infinite;
}
​
@keyframes move {
   from { background-position-x: -32px; }
   to { background-position-x: -96px; }
}

Раз­де­лим ани­ма­цию на 3 шага и уско­рим. Готово:

/* css */
​
.mario {
  /* ... */
  animation: move .2s steps(2) infinite;
}
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как устроена беспарольная аутентификация почтой 7




Недавно всплыло

1 Как избежать «эффекта Тильды»? 2 1 Как вы верифицируете оценку сроков от сотрудника? 1