Embed Size (px)
DESCRIPTION
В гостях у Tech Hangout Юрий Артюх - специалист по верстке с многолетним стажем, «зачинщик» многих украинских мероприятий о веб-технологиях, организатор площадки для обмена опытом среди веб-профессионалов Smartme. * Tech Hangout – мероприятие, организованное разработчиками для разработчиков с целью обмена знаниями и опытом. Подобные встречи проводятся еженедельно по средам с 12:00 до 13:00 и охватывают исключительно инженерные темы. Формат данного ивента подразумевает под собой 30 минутный доклад на ранее определенную тему, и такую же по продолжительности дискуссию в формате круглого стола. Если у вас есть неутомимое рвение к новым знаниям, профессиональному росту, или же вы хотите поделиться своим опытом - добро пожаловать в Hangout Club! Присоединяйтесь к обсуждению - https://www.facebook.com/groups/techhangout/ Читайте нас на - http://hangout.innovecs.com/
Citation preview
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
