animations - juriy artyukh for tech hangout - tech hangout #20 - 2013.04.03
Post on 15-Jan-2015
292 Views
Preview:
DESCRIPTION
TRANSCRIPT
Animationsshmanimations
Monday, February 25, 13
jQuery?
Monday, February 25, 13
Why not?
• Нужно контролировать остановку анимации
• Анимировать нечисловые свойства нетривиально
• Смешивается CSS и JS
Monday, February 25, 13
Попробуйте анимировать
Monday, February 25, 13
Стандартные кейсы
Monday, February 25, 13
Поисковое поле
Monday, February 25, 13
Попап
Monday, February 25, 13
Форма логина
Monday, February 25, 13
Как это делать
Monday, February 25, 13
Transition
transition: left .3s linear 1s;
продолжительность
свойство
Monday, February 25, 13
Magic
transition: all .3s;
Monday, February 25, 13
Magic
transition: all .3s;
Monday, February 25, 13
Monday, February 25, 13
Animation
• Может быть использована много раз• Содержит keyframe
Monday, February 25, 13
Синтаксис
Monday, February 25, 13
animation-direction:
• normal - каждая итерация с начальной позиции
• alternate - проигрывается назад после итерации
Monday, February 25, 13
animation-fill-modeсостояние объекта после анимации
• forwards - остается в конечном состоянии
• backwards - состояние объекта берется из первого keyframe
• both - оба предыдущих пункта
• none - дефолт
Monday, February 25, 13
animation-duration
• Либо в секундах: 0.5s
• Либо пошагово step-end
Monday, February 25, 13
Monday, February 25, 13
Есть готовые библиотеки
• http://thecssguru.freeiz.com/animate/
• http://daneden.me/animate/
Monday, February 25, 13
Transition? =)
Monday, February 25, 13
• При наведении
• Короткие анимации
Transition Animation
• Бесконечные
• Многошаговые
Monday, February 25, 13
Управление анимациями
Monday, February 25, 13
Transition events
https://github.com/ai/transition-events/
Monday, February 25, 13
Transition events
Monday, February 25, 13
Забыть JS.animatehttp://www.css3files.com/animation/
Monday, February 25, 13
Easing
• Ceaser + Compass (https://github.com/jhardy/compass-ceaser-easing)
• Easings.net
Monday, February 25, 13
Monday, February 25, 13
Sass
Monday, February 25, 13
Animation & Sass
Monday, February 25, 13
Резюме
• Все управление в JS (переключение классов обычно)
• Вся визуальная составляющая в CSS
• Profit
Monday, February 25, 13
Производительность
transform: translate(10px,0);особенно важно на мобильных
анимируется лучше чем left:10px;
Monday, February 25, 13
Акселерация
transform: translate3d(0,0,0);особенно важно на мобильных
включает акселерацию
тратит батарею
Monday, February 25, 13
Анимации и мобильный
• hover + transition = тормоза при скролле
• Выход: <html class="touch">
• https://gist.github.com/akella/5016373
Monday, February 25, 13
Monday, February 25, 13
Monday, February 25, 13
• http://tympanus.net/Development/SimpleDropDownEffects/index5.html
• http://tympanus.net/Development/3DBookShowcase/
Monday, February 25, 13
Вопросы?
Monday, February 25, 13
top related