Анимации по-новому — лень, гордыня и нетерпимость

Анимация по-новому — лень, гордыня и нетерпимость

Андрей Ситник

Злые марсиане

18+

$.fn.animate() — 2006 год

Теперь массовое производство

Зачем нужна анимация

Не пугайте пользователя

Сообщайте больше

andrey@sitnik.ru

••••••

Пароль неправильный

andrey@sitnik.ru

••••••

Пароль неправильный

Передавайте эмоции

Главное не переборщить

0,1 с

1 с

10 с

Не анимация

Не мешает

Не должна блокировать

Мультфильм

* Jakob Nielsen, Response Times: The 3 Important Limits

Когда анимация не нужна

Стили при щелчке/касании
Профессиональные интерфейсы

Команда

Дизайнер

Верстальщик

Программист

Хорошая анимация

Дизайнер

Менеджер

Верстальщик

Менеджер

Программист

Плохая анимация

Как задавать анимацию

Что не так с JavaScript

JS: Нужно думать об остановке анимации

b.mouseenter(function () {  b.stop().animate({ left: 100 }, 500);});b.mouseleave(function () {  b.stop().animate({ left: 0 }, 500);});

JS: Только цифровые CSS-свойства

Не работают без расширений:

color
background-color
background-position
transform
box-shadow

JS: Перемешаны стили и код

slider.animate({ left: -950 })

.page { width: 950px }

JS: Сложнее

Нужно уметь программировать
Нужно описывать алгоритм, а не как это выглядит

if app.media('transform-3d')  opensource.addClass('animated3d')  transform = app.css3prop('transform')  light     = $$('.light')  shadow    = $$('.shadow')  corner    = $$('.corner')  animation =  $({ i: 0 })  link.hover ->    back = !link.is(':hover')    link.removeClass('bended') if back    animation.stop().animate { i: (if back then 0 else 1) },      duration: 600      easing:  'easeInOutQuad'      step: (i) ->        angle = Math.round(180 * i)        corner.css(transform, "rotate3d(1, 1, 0, #{angle}deg)")        if i < 0.5          light.css(opacity: 2 * i)          shadow.css(opacity: 0)        else          light.css(opacity: 0)          shadow.css(opacity: (1 - i) / 6)        if i > 0.85 and not back          link.addClass('bended')  link.mousedown ->    corner.css(transform, 'rotate3d(1, 1, 0, 190deg)')    link.removeClass('bended')  link.mouseup ->    corner.css(transform, 'rotate3d(1, 1, 0, 180deg)')    link.addClass('bended')else  link.addClass('animated2d')

JS: Медленее

Количество кадров в секунду:

Хром

74

JS

100

CSS

Андроид

1

JS

15

CSS

* GreenSock Animation Speed Test

Достоинства программиста

Лень, нетерпимость и гордыня

— Ларри Уолл, глоссарий Programming Perl

Анимации прямо в CSS

CSS Transitions

div {  background: blue;  transition: background 500ms  }  div:hover {    background: red    }

CSS Transitions. Описание

Анимирует изменения указанных полей при:

Появлении псевдокласса: div:hover
Смене класса из JS: div.addClass('rotated')
Смене CSS-свойства из JS: div.css({ left: 100 })
Смене стилей из-за медиа-выражений CSS.

CSS Transitions. Преимущества

Просто. Одна строчка прямо в стилях.
Легко. Можно добавлять анимацию на каждый ховер.
Быстро. В 10 раз быстрее на телефоне.
Мощно. Большинство свойств и остановливается посреди анимации.

CSS Transitions. Хитрости

div {  transition: transform 1s }div:hover {  transition-property: left, transform, margin-left;  transition-delay:    0,    1s         2s }

CSS Animations

@keyframes backgrounding {  0%   { background: blue }  100% { background: red }  }div {  background: gray }  div:hover {    background: green;    animation: backgrounding 1s;    animation-delay: 0.5s;    animation-iteration-count: 3 }

наведение

начало анимации

второй повтор

третий повтор

конец анимации

0.5s

1s

CSS Animations. Заполнение

animation-fill-mode:

backwards
forwards
both

CSS Animations. Повторения

@keyframes {  0%   { transform: rotate(0) }  100% { transform: rotate(360deg) }  }.loader {  animation: rotation 2s linear;  animation-iteration-count: infinite; }

Когда что использовать

CSS Transition

Стили при наведении
Всё, что получится

CSS Animation

Бесконечные крутилки
Анимации в несколько шагов
Мультфильмы с демонстрацией
Всё, что не получилось на CSS Transition

Управляйте CSS-анимациями из JavaScript

$('a.signin').click(function () {  signinPopup.show().addClass('animated-show');});$('a.close-popup').click(function () {  signinPopup.removeClass('animated-show').    afterTransition(function () { signinPopup.hide() });});

Расширение jQuery Transition Events

  signinPopup.removeClass('animated-show').    afterTransition(function () { signinPopup.hide() });

github.com/ai/transition-events

Поддержка

22:

-webkit-

23: