Как создать плавно изменяющуюся кнопку Play-Pause для HTML5 видео с помощью SVG

Как создать плавно изменяющуюся кнопку Play-Pause для HTML5 видео с помощью SVG

От автора: если внимательно присмотреться к плееру YouTube, можно заметить, что кнопка play не просто переключается на иконку паузы по клику, а плавно и быстро перетекает между двумя состояниями. Сделать это можно с помощью SVG под управлением JavaScript. Сегодня я покажу мою интерпретацию данного UI шаблона.

Создаем целевые состояния для плавного перехода

Основное условие выполнения плавного перехода из одного состояния в другое в SVG – количество вершин в обоих состояниях должно совпадать. Также в SVG нельзя разбить замкнутый элемент и превратить его в два. То есть в случае с кнопкой play в SVG нам придется прятать некоторые вершины состояния паузы (8 или более вершин) в самой кнопке (для которой нужно всего 3 вершины). Также это значит, что кнопка play должна будет состоять из двух отдельных частей, но выглядеть как одно целое.

Я создал треугольник в Adobe Illustrator на листе размером 50 х 50 пикселей. Привязав треугольник к слою, поверх него я создал два отдельных элемента, повторяющих его форму.

Два элемента накладываются друг на друга в середине. Обратите внимание, что правый треугольник состоит из 5 точек, а не из 4, чтобы сохранить форму стрелки. Самые правые три вершины имеют свою позицию, но могут перекрывать друг друга. После экспорта в SVG и зачистки кода разметка выглядит следующим образом:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Каждый polygon нужно анимировать в новое состояние. Перетащив существующие точки и превратив иконку в два вертикальных прямоугольника, результат можно экспортировать и добавить в предыдущий SVG в качестве значений тегов animate. SVG теперь стал таким:

В предыдущей статье по SVG морфизму я вас уже познакомил с двумя новыми атрибутами из этого кода. Атрибут begin=»indefinite» запрещает моментальный старт анимации (для теста можете просто удалить этот атрибут). Атрибут fill=»freeze» – то же самое, что animation-direction: forward в CSS (анимация проигрывается один раз и застывает в конечном состоянии). Также теги animate я расположил после полигонов, а не внутри них, а ссылки на анимируемые элементы задал с помощью xlink:href.

После перехода SVG в состояние паузы необходимо вернуть его обратно в режим play. К сожалению, в SVG нет простой инверсии движений, нам придется создать второе целевое состояние:

Каждой анимации я присвоил свой ID (id: lefttopause и lefttoplay).

Расставляем все на места

Для упрощенного доступа SVG помещен в тег button:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Настройки включают в себя сокрытие SVG по умолчанию. Появляться кнопка будет при помощи JS:

Свойство transition на теге svg, примененное через класс, заставит кнопку плавно появляться и исчезать. Добавлять и удалять класс мы будем через classList.

Приводим все в движение

Чтобы кнопка play/pause заработала, необходимо определить элементы, с которыми мы будем работать:

Применяя технику прогрессивного улучшения, мы удаляем стандартные кнопки из видео и показываем наш собственный UI:

Теперь необходимо ловить событие клика на кнопку button. Мы не будем отслеживать состояние элемента, мы будем смотреть на состояние видео:

Будущие наработки

Если открыть консоль в Chrome и запустить пример выше, вы получите следующее сообщение: «SVG SMIL анимация (animate, set и т.д.) устарела и будет удалена. Пожалуйста, воспользуйтесь CSS или веб-анимацией.»

К счастью или нет, это правда: в скором времени Chrome полностью откажется от SMIL (язык на основе SVG, который мы до сих пор использовали для анимации) в угоду Web Animations API. К сожалению, в новой спецификации пока что ничего не сказано про морфизм, что ставит этот код в затруднительное положение на довольно долгий промежуток времени. Наш код будет в подвешенном состоянии, пока не будет разработана отдельная JS библиотека, или пока Web Animations API не расширится. На этот переходной период мы можем использовать библиотеку анимации Greensock в качестве фолбэка, более подробно о ней я расскажу в следующей статье.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree