Интерфейсный компонент, который может реализовать эффект заграждения маски станции B — Barrage UI

NPM

Barrage UI

Best and lightest barrage component for web UI.

Легкий компонент чата для веб-интерфейса и игроков.

Demo

использовать

  • Смонтируйте анимацию экрана пули для вашего видеоплеера, браузера изображений и других элементов
  • Используется для реализации станции B (bilibili.com) СтильМаска ШквалаЭффект

Установить

yarn add barrage-ui

или

npm install --save barrage-ui

быстрый старт

import Barrage from 'barrage-ui';
import example from 'barrage-ui/example.json'; // 组件提供的示例数据

// 加载弹幕
const barrage = new Barrage({
  container: 'barrage', // 父级容器或ID
  data: example, // 弹幕数据
  config: {
    // 全局配置项
    duration: 20000, // 弹幕循环周期(单位：毫秒)
    fontFamily: 'Microsoft Yahei', // 弹幕默认字体
    defaultColor: '#fff', // 弹幕默认颜色
  },
});

// 新增一条弹幕
barrage.add({
  key: 'fctc651a9pm2j20bia8j', // 弹幕的唯一标识
  time: 1000, // 弹幕出现的时间(单位：毫秒)
  text: '这是新增的一条弹幕', // 弹幕文本内容
  fontSize: 24, // 该条弹幕的字号大小(单位：像素)，会覆盖全局设置
  color: '#0ff', // 该条弹幕的颜色，会覆盖全局设置
});

// 播放弹幕
barrage.play();

Параметры инициализации

При создании экземпляра заграждения необходимо передать следующие параметры инициализации:

параметр тип данных По умолчанию иллюстрировать
container string/element Обязательное, нет значения по умолчанию Точка установки заграждения
data array [] Данные заграждения
config object Подробности см. в глобальных элементах конфигурации. смотрите подробностиэлемент глобальной конфигурации
mask string/ImageData string/ImageData Изображение маски, используемое для достижения эффекта заграждения маски, см. подробностиМаска Шквала
beforeRender function (ctx, progress, animState) => {} Обратный вызов перед рендерингом кадра, аргументы функции:
ctxхолст контекст холста
progressПрогресс воспроизведения анимации (миллисекунды)
animStateсостояние анимации: «пауза» или «воспроизведение»
afterRender function (ctx, progress, animState) => {} Обратный вызов после рендеринга кадра, аргументы функции:
ctxхолст контекст холста
progressПрогресс воспроизведения анимации (миллисекунды)
animStateсостояние анимации: «пауза» или «воспроизведение»
overlapOptimized boolean false Следует ли включать оптимизацию макета при перезагрузке экрана маркеров, чтобы максимально избежать перекрытия чатов маркеров в смежные моменты времени.

в,containerПараметры должны передаваться при инициализации экземпляра, остальные параметры являются необязательными, а типы данных и значения по умолчанию показаны в таблице выше.

элемент глобальной конфигурации

Элементы конфигурации и значения по умолчанию

Все глобальные элементы конфигурации и значения по умолчанию для заградительного огня следующие:

{
  duration: -1, // 弹幕动画的循环周期，-1 表示不循环播放
  speed: 100, // 弹幕的运动速度
  fontSize: 24, // 文字大小，单位：像素
  fontFamily: 'Microsoft Yahei', // 字体，默认值：微软雅黑
  textShadowBlur: 1.0, // 字体阴影扩散，有效值 >= 0
  opacity: 1.0, // 透明度，有效值 0-1
  defaultColor: '#fff', // 默认颜色，与 CSS 颜色属性一致
}

Обновить элементы конфигурации

Если ваш экземпляр даммаку был создан или воспроизводится, вы можете пройти.setConfig()метод обновления в реальном времени:

// 更新全局透明度
barrage.setConfig({ opacity: 0.5 });

Данные заграждения

структура и содержание

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

{
  key: 'fctc651a9pm2j20bia8j',
  createdAt: '2019-01-13T13:34:47.126Z',
  time: 1200,
  text: '我膨胀了',
  fontFamily: 'SimSun',
  fontSize: 32,
  color: 'yellow',
}

поле данных

  • createdAt - время создания заграждения (должен)
  • time - время анимации шквала (должен)
  • text - текстовое содержимое пули чата (должен)
  • key - уникальный идентификатор данных (рекомендовать)
  • fontFamily - шрифт текста пули чата (необязательно)
  • fontSize - размер шрифта текста пули в чате, единица измерения: пиксели (необязательно)
  • color - цвет текста пули в чате (необязательно)

О ключах

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

При динамическом обновлении набора данных для непрерывности анимации некоторые из одних и тех же данных могут существовать в наборе данных до и после обновления. Компонент Barrage сравнивает ключи данных до и после обновления и только инкрементально отображает только что добавленные данные без изменения существующего макета Barrage.

Подводя итог, значение ключа поля должно быть стабильным и уникальным. Для того же заграждения значение ключа должно быть неизменным.

Перезарядить шквал

Есть два способа перезарядить заграждение:

Способ 1: передача данных во время инициализации

const barrage = new Barrage({
  container: 'barrage',
  data: JSON_DATA, // JSON_DATA -> 你的弹幕数据
});

Способ 2: обновить данные после инициализации

const barrage = new Barrage({
  container: 'barrage',
});

barrage.setData(JSON_DATA); // JSON_DATA -> 你的弹幕数据

Добавить заграждение

Если ваш экземпляр даммаку был создан или воспроизводится, вы можете пройти.add()Метод добавляет новую запись:

barrage.add({
  key: 'fctc651a9pm2j20bia8j',
  time: 1000,
  text: '这是新增的一条弹幕',
  fontSize: 26,
  color: '#0ff',
});

.add()Этот метод обычно используется в сочетании с операцией отправки/запроса данных для реализации реальных онлайн-приложений.

Применимая сцена:Экран маркеров в реальном времени для синхронизации с несколькими терминалами

  1. Пользователь отправляет шквал на стороне клиента на сторону сервера
  2. Сервер сохраняет и передает данные клиенту в текущем сеансе.
  3. После того, как клиент получит данные, используйте.add()метод обновления данных

интерфейс управления анимацией

barrage.play()

описывать

Используется для воспроизведения анимации. Если в данный момент он приостановлен, продолжить воспроизведение с текущего прогресса.

Пример

barrage.play();

barrage.pause()

описывать

для приостановки анимации

Пример

barrage.pause();

barrage.replay()

описывать

Используется для перезапуска анимации

Пример

barrage.replay();

barrage.goto(progress)

описывать

Используется для перехода к прогрессу воспроизведения. Этот метод действителен как в состоянии воспроизведения анимации, так и в состоянии паузы.

параметр

progress - прогресс, к которому нужно перейти. Значение представляет собой количество миллисекунд, указывающее количество миллисекунд для перехода к анимации.

Пример

barrage.goto(15000); // 跳转到第 15 秒

свойство состояния анимации

barrage.progress

имея в виду

Ход воспроизведения текущей анимации

Типы

Миллисекунда, описывающая ход воспроизведения

barrage.animState

имея в виду

Состояние воспроизведения текущей анимации

Типы

Строка, описывающая состояние воспроизведения:

  • 'готов' - готов. то есть: экземпляр заграждения создан, но никогда не воспроизводился
  • 'пауза' - приостановлено
  • 'играть' - играть

Другие интерфейсы и свойства

barrage.setMask(mask)

описывать

Используется для установки изображения маски. Концепцию изображения маски смотрите нижеМаска Шквала

параметр

mask - URL-адрес изображения маски илиImageData

Пример

barrage.setMask('mask.png'); // 通过图片 url 设置蒙版图像

barrage.setMask(imageData); // 直接设置 ImageData 类型的数据

barrage.clearMask()

описывать

Используется для очистки текущего изображения маски. Если вы не сбросите изображение маски после очистки, анимация больше не будет иметь эффекта маски.

Пример

barrage.clearMask();

barrage.canvas

имея в виду

Холст для рендеринга заграждения

barrage.ctx

имея в виду

Контекст холста, эквивалентныйbarrage.canvas.getContext('2d')

Маска Шквала

Компонент Barrage позволяет реализовать эффект заграждения маски. Демонстрационный эффект на основе этого компонента выглядит следующим образом:

蒙版弹幕效果

Что такое «замаскированный барраж»

Маска Шквала— это известный веб-сайт с видеороликами Bullet Screen.bilibiliВ середине 2018 года был запущен эффект рендеринга маркированного экрана, который может эффективно уменьшить влияние текста маркированного экрана на основную информацию видео.

Для получения дополнительной информации, пожалуйста, обратитесь к соответствующим статьям bilibili:

Десятая пуля проекта солнечного света с экраном пули, вы слышали о маске и понимаете технологию черного экрана пули?

Не загораживай лицо, смотри высокомерно! Секрет обстрела Маски Черных Технологий на Станции B

Принцип реализации

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

в параметрах инициализации компонента BarragemaskОдин используется для обработки эффекта маски. Для эффекта на снимке экрана выше используется следующий эффект изображения маски:

蒙版图像

При рендеринге экрана пули «полая» часть изображения маски (пиксели, альфа-канал которых равен 0 в канале RGBA изображения) будет удалена для достижения эффекта «замаскированного экрана пули».

Реализация простого заграждения в маске

Эффекта заграждения маски можно добиться, установив изображение маски (маску) для экземпляра заграждения.

  • через параметры инициализацииmaskПередайте изображение маски:
import Barrage from 'barrage-ui';
import example from 'barrage-ui/example.json';

const barrage = new Barrage({
  container: 'barrage',
  data: example,
  mask: 'mask.png', // 传入蒙版图像的 url
});
  • Вы также можете пройти.setMask()метод обновления в реальном времени:
import Barrage from 'barrage-ui';
import example from 'barrage-ui/example.json';

const barrage = new Barrage({
  container: 'barrage',
  data: example,
});

// 设置蒙版图像
barrage.setMask('mask.png'); // 传入蒙版图像的 url

Уведомление

maskпараметры и.setMask()Параметры метода однотипны и могут принимать URL изображения илиImageData

рендеринг в реальном времени

В приведенном выше примере может быть реализован рендеринг только одного кадра изображения маски (устанавливайте маску только один раз, не обновляя ее в реальном времени).Обрабатывается каждый кадр анимации экрана.

Использование функции ловушки beforeRender, предоставляемой компонентом, может быть легко реализовано:

import Barrage from 'barrage-ui';
import example from 'barrage-ui/example.json';

const barrage = new Barrage({
  container: 'barrage',
  data: example,
  beforeRender: (ctx, progress) => {
    const imageData = getMask(progress); // 用于获取当前进度对应蒙版的方法
    barrage.setMask(imageData);
  },
});

Конечно, хук beforeRender также можно смонтировать после инициализации чата:

import Barrage from 'barrage-ui';
import example from 'barrage-ui/example.json';

const barrage = new Barrage({
  container: 'barrage',
  data: example,
});

barrage.beforeRender = (ctx, progress) => {
  const imageData = getMask(progress); // 用于获取当前进度对应蒙版的方法
  barrage.setMask(imageData);
};
Категории