Создание динамического пользовательского опыта с помощью интерактивной SVG анимации

Создание динамического пользовательского опыта с помощью интерактивной SVG анимации
Создание динамического пользовательского опыта с помощью интерактивной SVG анимации

SVGator's Player JS API

Больше информации по теме смотрите на сайте разработчика svgator

Этот документ описывает свойства, методы и интерфейс SVGator JS API, а также демонстрирует использование через Live Demo. 

II. Свойства игрока

Имя ИмуществаТипОписание
player.currentTime Целочисленный текущее время анимации в миллисекундах
player.direction Целочисленный Новый: направление анимации (1 == нормальное, -1 == обратное)
player.duration Целочисленный длительность одной петли в миллисекундах
player.fill Целочисленный Новый: режим заполнения анимации (1 для форварда, -1 для назад); если настроить на -1, анимация перепрыгнет к своему началу после завершения
player.fps Целочисленный Новый: Кадр в секунду (по умолчанию: 100)
player.hasEnded Булевый правда, если бы анимация дошла до конца
player.isAlternate Булевый верно, если анимация настроена на альтернативный режим
player.isBackwards Булевый Новый: верно, если режим заполнения установлен в обратном направлении (-1)
player.isInfinite Булевый Новый: верно, если анимация установлена в бесконечный цикл
player.isPlaying Булевый правда, если анимация в данный момент играет
player.isReversed Булевый Новый: правда, если направление анимации настроено на обратное
player.isRollingBack Булевый правда, если анимация откатывается назад
player.iterations Целочисленный число итераций или 0 для бесконечной игры
player.speed Поплавок Новый: скорость анимации как плавающее число, 1, представляющее 100% (нормальная скорость)
player.state Строка / Enum статус игрока; одно из следующих: ["играть", "приостановлено", "завершено", "откат"]
player.totalTime Целочисленный Общее время анимации, если оно конечное ( = iterations xx duration); продолжительность для бесконечных анимаций

III. Методы Игрока

Каждый player.method() вызов возвращает player Сам объект API.

Имя ДействияПарам.Триггерное СобытиеОписание
.play() н/а play воспроизводит текущую анимацию из текущего смещения или перезапускается, если она закончилась
.pause() н/а pause Останавливает текущую анимацию.
.restart() н/а restart Перезапускает анимацию с самого начала.
.reverse() н/а reverse Обращает игровое направление и воспроизводит анимацию.
.toggle() н/а playили pause Переключение между игрой и паузой.
.togglePlay() н/а playили pause Новый: Псевдоним для toggle
.stop() н/а stop Останавливает текущую анимацию и сбрасывает её на первый кейфрейм.
.ready(callback) Функция н/а Звонки callback когда player готов, минуя player как 1-й параметр. читать далее
.seek(offsetPercent) Поплавок н/а Повышает анимацию до %, где смещение должно быть поплавком между 0 и 100. player.seek(50) продвинет анимацию до 50%
.seekBy(offsetMs) Целочисленный н/а Достигает анимации с offsetMs миллисекунды. Также допускаются отрицательные значения.
.seekTo(offsetMs) Целочисленный н/а Достигает анимации offsetMs миллисекунды
.set(property, value) Струна, Смешанная н/а Новый: Наборы свойства, поддающиеся обработке
.destruct() н/а stop Отделяет объект игрока от SVG, удаляет обработчики событий, останавливает анимацию и сбрасывает на первый кеймфрейм. Дальнейшие вызовы API не будут иметь никакого эффекта.

IV. Записываемые Свойства

Свойства, перечисленные ниже, могут быть установлены подробно player.set(property, value) звоните, который возвращает player Сам объект API.

СобственностьТипЦенностиОписание
alternate Булевый truefalse Переключатели чередуют режим включения или выключения; применяется только для большего количества итераций. Образец звонка: player.set('alternate', true)
direction Целочисленный -11 задаёт направление на нормальное (1) или обратное (-1)
fill Целочисленный -11 устанавливает режим заполнения в направлении вперед (1) или назад (-1)
fps Целочисленный 1к 100 устанавливает кадры в секунду (фактические кадры в секунду могут быть ниже, в зависимости от аппаратного обеспечения)
iterations Целочисленный 0к Infinity задает количество итераций, 0 представляющих неопределенные анимации
speed Поплавок 0к 100 устанавливает скорость анимации, 1 представляющую 100% и 0,5 представляющую 50% от первоначальной продолжительности

V. События Игрока

Существует 2 специальных метода для прикрепления и отсоединения обработчиков событий:

Прикрепление События

player.on( eventName, fn, prepend = false )
ПараметрТипОписание
eventName Строка
  • Название событие(ы) слушать
  • Допускаются множественные события, разделённые пространством или запятой
  • значение образца: start, restart
fn Функция
  • Функция обработчика событий
  • Внутри функции, this будет ссылаться на объект API
  • обработчик получит ток offset как первый параметр
prepend Булевый
  • Если установить true, обработчик будет добавлен в начало списка обработчиков

Пример:

player.on( 'pause',
	offset => console.log(`Animation paused at offset ${offset}.`)
);

Отсоединение События

player.off( eventName[, fn])
ПараметрТипОписание
eventName Строка
  • Название событие чтобы убрать слушателей из прослушивания
  • Несколько событий не допускаются
  • значение образца: start
fn Функция
  • Функция обработчика для удаления из текущего события
  • Необязательно; если не дано, все слушатели будут удалены из текущего события

Пример:

player.off( 'pause');

Доступные Методы:

  • play
  • pause
  • restart
  • reverse
  • stop

Пожалуйста, обратитесь к таблице действия API чтобы увидеть, когда срабатывают 5 событий выше. Следует отметить, что они запускаются также от действий пользователя, а не только от вызовов API (то есть, если анимация начинается нажатием).

  • end

Это событие запускается, когда анимация достигает конца.

  • keyframe

The keyframe специальное событие запускается с каждым наложенным кадром. Что касается других обработчиков событий, то первым аргументом функции обработчика является offset (в миллисекундах) рамки наносятся на.

Читать дальше:

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

Приведение в движение: анимация автомобилей с помощью HTML и SVG
Приведение в движение: анимация автомобилей с помощью HTML и SVG
SVG <animateMotion> предоставляет способ определить, как элемент перемещается по траектории движения. В этой статье Пол Скэнлон делится идеей о том, как использовать это, анимируя гоночные автомобили в бесконечном цикле так же просто, как раз-два-три!

Использование SVG с медиа-запросами
Использование SVG с медиа-запросами
В HTML-документах мы можем показывать, скрывать или переставлять части страницы в зависимости от условий области просмотра. Например, если окно браузера имеет ширину 480 пикселей, мы могли бы перенести нашу навигацию с горизонтальной на вертикальный, сворачиваемый список. Мы можем сделать нечто подобное при использовании SVG с медиа-запросами...

6 распространенных сбоев SVG (и как их исправить)
6 распространенных сбоев SVG (и как их исправить)

Поскольку SVG это часть DOM, мы можем проверять любой встроенный SVG в любом браузере DevTools. И из-за этого у нас есть возможность проанализировать ситуацию и выявить любые потенциальные проблемы или возможности для оптимизации SVG.


CSS анимация обводки блоков
CSS анимация обводки блоков
Интересные эффекты для границ блоков контента с анимацией, которые вам могут пригодиться при оформлении страниц сайта.

Фоновая волна на простом CSS
Фоновая волна на простом CSS
Рассмотрим в этой статье, как сделать фоновые волны на сайте, используя только возможности CSS3 и SVG файл. Т.е. без применения Javascript.

QRcode

2010-2024 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.