canvas confetti

Демо

catdad.github.io/canvas-confetti

Установить

Вы можете установить этот модуль в качестве компонента из NPM:

npm install --save canvas-confetti

Затем вы можете require('canvas-confetti'); Чтобы использовать его в сборке проекта. Примечание: это клиентский компонент, и он не будет работать в узле. Вам нужно будет создать свой проект с чем -то вроде WebPack, чтобы использовать его.

Вы также можете включить эту библиотеку в свою HTML -страницу прямо из CDN:

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js " > </ script >

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

Уменьшенное движение

Спасибо, что присоединились ко мне в этом очень важном сообщении о движении на вашем сайте. Видите, не всем нравится, а некоторые на самом деле не предпочитают никаких движений. У них есть способы рассказать нам об этом, и мы должны слушать. Хотя я не хочу заходить так далеко, как сказать вам, что вы пока не имеете конфетти на вашей странице, я хочу, чтобы вам было легко уважать то, чего хотят ваши пользователи. Существует вариант disableForReducedMotion который вы можете использовать, чтобы пользователи, у которых были проблемы с хаотической анимацией, не нужно бороться на вашем веб -сайте. Это отключено по умолчанию, но я рассматриваю возможность изменить это в будущем крупном выпуске. Если у вас есть сильные чувства по поводу этого, пожалуйста, дайте мне знать. На данный момент, пожалуйста, конфиетти ответственно.

API

При установке из npm эта библиотека может потребоваться в качестве клиентского компонента в сборке проекта. При использовании версии CDN она выявляется как функция confetti в window .

confetti([options {Object}]) → Promise|null

confetti берет один дополнительный объект. Когда window.Promise доступен, он вернет обещание сообщить вам, когда это будет сделано. Когда обещания недоступны (как в IE), он вернет null . Вы можете многофильки, используя любые из популярных полифиллов. Вы также можете предоставить обещание реализации confetti через:

 const MyPromise = require ( 'some-promise-lib' ) ;
const confetti = require ( 'canvas-confetti' ) ;
confetti . Promise = MyPromise ;

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

options

Параметр confetti - это единственный необязательный объект options , который обладает следующими свойствами:

• particleCount Integer (по умолчанию: 50) : количество конфетти для запуска. Больше - это всегда весело ... но будь крутой, есть много математики.
• Номер angle (по умолчанию: 90) : угол, в котором можно запустить конфетти, в градусах. 90 прямо вверх.
• Номер spread (по умолчанию: 45) : как далеко может идти конфетти, в градусах. 45 означает, что конфетти будет запущен под определенным angle плюс или минус 22,5 градусов.
• Номер startVelocity (по умолчанию: 45) : как быстро начнет конфетти, в пикселях.
• Номер decay (по умолчанию: 0,9): как быстро конфетти потеряет скорость. Держите это число от 0 до 1, в противном случае конфетти получит скорость. Еще лучше, просто никогда не менять.
• gravity число (по умолчанию: 1) : как быстро частицы стянуты. 1 - это полная гравитация, 0,5 - это половина тяжести и т. Д., Но нет ограничений. Вы даже можете заставить частицы подняться, если хотите.
• drift номер (по умолчанию: 0) : сколько в стороне конфетти будет дрейфовать. По умолчанию 0, что означает, что они упадут прямо вниз. Используйте отрицательное число для левого и положительного числа для справа.
• flat Boolean (по умолчанию: false) : необязательно выключает наклон и колебания, которые трехмерные конфетти будут иметь в реальном мире. Да, они выглядят немного грустно, но вы их просили, так что не вините меня.
• Номер ticks (по умолчанию: 200) : сколько раз конфетти будет двигаться. Это абстрактно ... но играйте с ним, если конфетти исчезнет слишком быстро для вас.
• Объект origin : откуда начать стрелять из конфетти. Не стесняйтесь запускать за кадром, если хотите.
  • Номер origin.x (по умолчанию: 0,5) : позиция x на странице, а 0 - левый край и 1 - правый край.
  • Номер origin.y (по умолчанию: 0,5) : положение y на странице, а 0 - верхний край и 1 - нижний край.
• Массив colors <String> : массив цветовых струн, в шестнадцатеричном формате ... вы знаете, как #bada55 .
• shapes массив <строка | форма> : массив форм для конфетти. Есть 3 встроенные значения square , circle и star . По умолчанию является использование как квадратов, так и кругов в ровном миксе. Чтобы использовать одну форму, вы можете предоставить только одну форму в массиве, например ['star'] . Вы также можете изменить микс, предоставив такую ​​ценность, как ['circle', 'circle', 'square'] чтобы использовать два третьего круга и одну третью квадраты. Вы также можете создать свои собственные формы confetti.shapeFromText используя confetti.shapeFromPath .
• scalar число (по умолчанию: 1) : масштабный коэффициент для каждой частицы конфетти. Используйте десятичные ткви, чтобы сделать конфетти меньше. Давай, попробуй подростки крошечные конфетти, они очаровательны!
• zIndex Integer (по умолчанию: 100) : конфетти должен быть на вершине, в конце концов. Но если у вас есть сумасшедшая высокая страница, вы можете установить ее еще выше.
• disableForReducedMotion Boolean (по умолчанию: false) : отключает конфетты полностью для пользователей, которые предпочитают уменьшенное движение. Обещание confetti() в этом случае немедленно решится.

confetti.shapeFromPath({ path, matrix? }) → Shape

Этот вспомогательный метод позволяет создавать пользовательскую форму конфетти, используя строку пути SVG. Любой действительный путь должен работать, хотя есть несколько предостережений:

• Все пути будут поданы. Если вы надеялись пройти путь инсульта, это не реализовано.
• Пути ограничены одним цветом, поэтому имейте это в виду.
• Все пути нуждаются в допустимой матрице преобразования. Вы можете пройти один, или вы можете оставить его и использовать этого помощника для расчета матрицы для вас. Обратите внимание, что расчет матрицы немного дорого, поэтому лучше всего рассчитать ее один раз для каждого пути в разработке и кэше этого значения, чтобы производственные конфетти оставались быстрыми. Матрица детерминированная и всегда будет одинаковой, учитывая одинаковое значение пути.
• Для лучшей совместимости вперед лучше всего заново разградить и повторно перехватить матрицу, если вы обновите библиотеку canvas-confetti .
• Поддержка конфетти, основанных на пути, ограничена браузерами, которые поддерживают Path2D , который на самом деле должен быть основным браузером.

Этот метод вернет Shape - это на самом деле просто простой объект с некоторыми свойствами, но Shhh ... мы притворяемся, что это форма. Передайте этот объект Shape в массив shapes напрямую.

Например, вот как вы можете сделать треугольник конфетти:

 var triangle = confetti . shapeFromPath ( { path : 'M0 10 L5 0 L10 10z' } ) ;

confetti ( {
  shapes : [ triangle ]
} ) ;

Shape confetti.shapeFromText({ text, scalar?, color?, fontFamily? })

Это долгожданная особенность, чтобы отобразить смайлики конфетти! Используйте любой стандартный emoji Unicode. Или другой текст, но ... может быть, не используйте другой текст.

Хотя любой текст должен работать, есть некоторые предостережения:

• Для Flailing Confetti, то, что в основном является квадратным, лучше всего работает. То есть единственный персонаж, особенно смайлики.
• Вместо того, чтобы отдавать текст каждый раз, когда нарисована конфетти, этот помощник фактически расписывает текст. Следовательно, он не значительно масштабируется после его создания. Если вы планируете использовать scalar значение для масштабирования ваших конфетти, используйте такое же scalar значение здесь при создании формы. Это убедится, что конфетти не размыты.

Варианты для этого метода:

• Object options :
  • text String : текст, который будет представлен как конфетти. Если вы не можете принять решение, я предлагаю "?".
  • scalar Number, optional, default: 1 : значение шкалы относительно размера по умолчанию. Он соответствует scalar значению в параметрах конфетти.
  • color String, optional, default: #000000 : цвет, используемый для рендеринга текста.
  • Строка fontFamily String, optional, default: native emoji : Fant Family Family для использования при рендеринге текста. По умолчанию следует лучшие практики для разжигания нативного ОС ЭМОдзи устройства, возвращающегося в sans-serif . При использовании веб -шрифта убедитесь, что этот шрифт загружен перед тем, как отдать ваш конфетти.

 var scalar = 2 ;
var pineapple = confetti . shapeFromText ( { text : '?' , scalar } ) ;

confetti ( {
  shapes : [ pineapple ] ,
  scalar
} ) ;

confetti.create(canvas, [globalOptions]) → function

Этот метод создает экземпляр функции confetti , которая использует пользовательский холст. Это полезно, если вы хотите ограничить область на своей странице, на которой появляются конфетти. По умолчанию этот метод не будет изменять холст каким -либо образом (кроме рисования к нему).

Понва может быть неправильно понят, хотя, поэтому позвольте мне объяснить, почему вы, возможно, захотите позволить модулю немного изменить холст. По умолчанию canvas - это относительно небольшое изображение - где -то около 300x150, в зависимости от браузера. Когда вы измените его размер с помощью CSS, это устанавливает размер дисплея холста, но не изображение, представленное на этом холсте. Думайте об этом как о загрузке изображения JPEG 300x150 в тег img , а затем установите CSS для этого тега на 1500x600 - ваше изображение в конечном итоге будет растянутым и размытым. В случае с холстом вам необходимо также установить ширину и высоту самого изображения холста. Если вы не хотите этого делать, вы можете позволить confetti установить его для вас.

Также обратите внимание, что вы должны сохранять пользовательский экземпляр и избегать инициализации экземпляра конфетти с одним и тем же элементом холста более одного раза.

Доступны следующие глобальные варианты:

• resize Boolean (по умолчанию: false) : разрешить ли настройку размера изображения Canvas, а также сохранить его правильно, если окно меняет размер (например, изменение размера окна, вращение мобильного устройства и т. Д.). По умолчанию размер холста не будет изменен.
• useWorker Boolean (по умолчанию: false) : использовать ли асинхронного веб -работника, чтобы сделать анимацию конфетти, когда это возможно. Это отключается по умолчанию, что означает, что анимация всегда будет выполняться в главном потоке. При включении, и браузер поддерживает его, анимация будет выполняться из основного потока, чтобы она не блокировала ни одной другой работы, которую должна выполнять ваша страница. Использование этой опции также будет изменять холст, но подробнее об этом непосредственно ниже - прочитайте его. Если он не поддерживается браузером, это значение будет проигнорировано.
• disableForReducedMotion Boolean (по умолчанию: false) : отключает конфетты полностью для пользователей, которые предпочитают уменьшенное движение. Когда установлено в True, использование этого экземпляра Confetti всегда будет уважать запрос пользователя о сокращении движения и отключено для них конфетти.

ВАЖНО: Если вы используете useWorker: true , сейчас у меня есть ваш холст. Теперь это мое, и я могу делать с этим все, что хочу (не волнуйтесь ... Я просто положу конфетти в него, я обещаю). Вы не должны пытаться использовать холст каким -либо образом (кроме, я думаю, удаление его из DOM), так как он принесет ошибку. При использовании работников для рендеринга контроль над холстом должен быть передан веб -работнику, предотвращая любое использование этого холста в основном потоке. Если вы должны манипулировать холстом каким -либо образом, не используйте эту опцию.

 var myCanvas = document . createElement ( 'canvas' ) ;
document . body . appendChild ( myCanvas ) ;

var myConfetti = confetti . create ( myCanvas , {
  resize : true ,
  useWorker : true
} ) ;
myConfetti ( {
  particleCount : 100 ,
  spread : 160
  // any other options from the global
  // confetti function
} ) ;

confetti.reset()

Останавливает анимацию и очищает все конфетти, а также немедленно разрешает любые выдающиеся обещания. В случае отдельного экземпляра конфетти, созданного с confetti.create , этот экземпляр будет иметь свой собственный метод reset .

 confetti ( ) ;

setTimeout ( ( ) => {
  confetti . reset ( ) ;
} , 100 ) ; 

 var myCanvas = document . createElement ( 'canvas' ) ;
document . body . appendChild ( myCanvas ) ;

var myConfetti = confetti . create ( myCanvas , { resize : true } ) ;

myConfetti ( ) ;

setTimeout ( ( ) => {
  myConfetti . reset ( ) ;
} , 100 ) ; 

Примеры

Запустите конфетти по умолчанию:

 confetti ( ) ;

Запустить кучу конфетти:

 confetti ( {
  particleCount : 150
} ) ;

Запустите некоторые конфетти действительно широкие:

 confetti ( {
  spread : 180
} ) ;

Проявить творческий подход. Запустите небольшой POOF конфетти из случайной части страницы:

 confetti ( {
  particleCount : 100 ,
  startVelocity : 30 ,
  spread : 360 ,
  origin : {
    x : Math . random ( ) ,
    // since they fall down, start a bit higher than random
    y : Math . random ( ) - 0.2
  }
} ) ;

Я сказал креатив ... мы можем добиться большего. Поскольку не имеет значения, сколько раз мы называем confetti (всего лишь общее количество конфетти в воздухе), мы можем сделать несколько забавных вещей, например, постоянно запускать все больше и больше конфетти в течение 30 секунд, с нескольких направлений:

 // do this for 30 seconds
var duration = 30 * 1000 ;
var end = Date . now ( ) + duration ;

( function frame ( ) {
  // launch a few confetti from the left edge
  confetti ( {
    particleCount : 7 ,
    angle : 60 ,
    spread : 55 ,
    origin : { x : 0 }
  } ) ;
  // and launch a few from the right edge
  confetti ( {
    particleCount : 7 ,
    angle : 120 ,
    spread : 55 ,
    origin : { x : 1 }
  } ) ;

  // keep going until we are out of time
  if ( Date . now ( ) < end ) {
    requestAnimationFrame ( frame ) ;
  }
} ( ) ) ;