canvas confetti
1.9.3
catdad.github.io/canvas-confetti
이 모듈을 NPM의 구성 요소로 설치할 수 있습니다.
npm install --save canvas-confetti 그런 다음 require('canvas-confetti'); 프로젝트 빌드에서 사용합니다. 참고 : 이것은 클라이언트 구성 요소이며 노드에서 실행되지 않습니다. 이를 사용하려면 Webpack과 같은 프로젝트를 구축해야합니다.
CDN에서 직접 HTML 페이지 에이 라이브러리를 포함시킬 수도 있습니다.
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js " > </ script >참고 : 프로젝트를 포함 할 당시 최신 버전을 사용해야합니다. 릴리스 페이지에서 모든 버전을 볼 수 있습니다.
귀하의 웹 사이트에서 Motion에 관한이 중요한 메시지에 참여해 주셔서 감사합니다. 모든 사람이 그것을 좋아하는 것은 아니며 일부는 실제로 움직임을 선호하지 않습니다. 그들은 우리에게 그것에 대해 말할 방법이 있고 우리는 들어야합니다. 아직 페이지에 색종이가 없다고 말하고 싶지는 않지만 사용자가 원하는 것을 쉽게 존중할 수 있도록하고 싶습니다. 혼란스러운 애니메이션에 문제가있는 사용자가 웹 사이트에서 어려움을 겪을 필요가 없도록 사용할 수있는 disableForReducedMotion 옵션이 있습니다. 이것은 기본적으로 비활성화되지만 향후 주요 릴리스에서이를 변경하는 것을 고려하고 있습니다. 이것에 대해 강한 감정이 있다면 알려주십시오. 지금은 책임감있게 색종이를 만들어주세요.
npm 에서 설치하면이 라이브러리는 프로젝트 빌드에서 클라이언트 구성 요소로 필요할 수 있습니다. CDN 버전을 사용하는 경우 window 에서 confetti 기능으로 노출됩니다.
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) : 선택적으로 3 차원 색종이가 현실 세계에서 틸트를 끄고 흔들립니다. 그래, 그들은 조금 슬퍼 보이지만, 당신은 그들에게 물어 보았으므로 나를 비난하지 마십시오.ticks 번호 (기본값 : 200) : 색종이가 몇 번이나 움직일 것입니다. 이것은 추상적이지만 ... 색종이가 너무 빨리 사라지면 그것을 가지고 놀십시오.origin 개체 : 색종이 발사를 시작하는 곳. 원한다면 화면에서 자유롭게 발사하십시오.origin.x 번호 (기본값 : 0.5) : 페이지의 x 위치, 0 은 왼쪽 가장자리이고 1 오른쪽 가장자리입니다.origin.y 번호 (기본값 : 0.5) : 페이지의 y 위치, 0 은 상단 가장자리이고 1 하단 가장자리입니다.colors 배열 <string> : 16 진 형식의 색상 배열 ... #bada55 와 같이 알다시피.shapes <문자열 | 모양> : 색종이의 모양 배열. square , circle 및 star 의 3 개의 내장 값이 있습니다. 기본값은 정사각형과 원을 균일하게 사용하는 것입니다. 단일 모양을 사용하려면 ['star'] 와 같은 배열에서 하나의 모양 만 제공 할 수 있습니다. ['circle', 'circle', 'square'] 와 같은 값을 제공하여 두 개의 세 번째 원과 1 개의 제곱을 사용하여 믹스를 변경할 수도 있습니다. confetti.shapeFromPath 또는 confetti.shapeFromText 도우미 방법을 사용하여 고유 한 모양을 만들 수도 있습니다.scalar 번호 (기본값 : 1) : 각 색종이 입자의 스케일 팩터. 데시 말을 사용하여 색종이를 더 작게 만듭니다. 계속해서, 작은 작은 색종이를 시도해보십시오. 그들은 사랑 스럽습니다!zIndex Integer (기본값 : 100) : 색종이는 결국 맨 위에 있어야합니다. 그러나 높은 페이지가 있다면 더 높은 페이지를 설정할 수 있습니다.disableForReducedMotion 부울 (기본값 : false) : 모션 감소를 선호하는 사용자에게는 색종이를 완전히 비활성화합니다. 이 경우 confetti() 약속은 즉시 해결됩니다.confetti.shapeFromPath({ path, matrix? }) → Shape이 헬퍼 메소드를 사용하면 SVG 경로 문자열을 사용하여 사용자 정의 색종이 모양을 만들 수 있습니다. 몇 가지 경고가 있지만 유효한 경로는 작동해야합니다.
canvas-confetti 라이브러리를 업데이트하면 매트릭스를 다시 생성하고 다시 캐시하는 것이 가장 좋습니다.Path2D 지원하는 브라우저로 제한되며,이 시점에서 실제로 모든 주요 브라우저가되어야합니다. 이 방법은 Shape 반환합니다. 실제로 속성이있는 일반적인 물체 일뿐입니다. 이 Shape 객체를 shapes 배열에 직접 전달하십시오.
예를 들어, 삼각형 색종이를 수행 할 수있는 방법은 다음과 같습니다.
var triangle = confetti . shapeFromPath ( { path : 'M0 10 L5 0 L10 10z' } ) ;
confetti ( {
shapes : [ triangle ]
} ) ;confetti.shapeFromText({ text, scalar?, color?, fontFamily? }) → Shape이것은 이모티콘 색종이를 렌더링하는 매우 기대되는 기능입니다! 표준 유니 코드 이모티콘을 사용하십시오. 또는 다른 텍스트이지만 ... 다른 텍스트를 사용하지 않을 수도 있습니다.
텍스트가 작동하지만 몇 가지 경고가 있습니다.
scalar 값을 사용하여 색종이를 스케일링하려면 모양을 만들 때 동일한 scalar 값을 사용하십시오. 이것은 색종이가 흐릿하지 않도록합니다.이 방법의 옵션은 다음과 같습니다.
options Object :text String : 색종이로 렌더링 될 텍스트. 당신이 당신의 마음을 구성 할 수 없다면, 나는 "?"를 제안합니다.scalar Number, optional, default: 1 : 기본 크기에 대한 스케일 값. 색종이 옵션의 scalar 값과 일치합니다.color String, optional, default: #000000 : 텍스트를 렌더링하는 데 사용되는 색상.fontFamily String, optional, default: native emoji : 텍스트를 렌더링 할 때 사용할 글꼴 패밀리 이름. 기본값은 장치의 기본 OS 이모티콘을 렌더링하여 sans-serif 로 돌아가는 모범 사례를 따릅니다. 웹 글꼴을 사용하는 경우 색종이를 렌더링하기 전에이 글꼴이로드되어 있는지 확인하십시오. var scalar = 2 ;
var pineapple = confetti . shapeFromText ( { text : '?' , scalar } ) ;
confetti ( {
shapes : [ pineapple ] ,
scalar
} ) ;confetti.create(canvas, [globalOptions]) → function 이 메소드는 사용자 정의 캔버스를 사용하는 confetti 함수의 인스턴스를 만듭니다. 이것은 색종이가 나타나는 페이지의 영역을 제한하려는 경우 유용합니다. 기본적 으로이 방법은 캔버스를 어떤 식 으로든 수정하지 않습니다 (그 외에는).
캔버스는 약간 오해 할 수 있으므로 모듈이 캔버스를 약간 수정하도록하는 이유를 설명하겠습니다. 기본적으로 canvas 브라우저에 따라 비교적 작은 이미지입니다. CSS를 사용하여 크기를 조정하면 캔버스의 디스플레이 크기가 설정되지만 해당 캔버스에 표시되는 이미지는 없습니다. img 태그에 300x150 JPEG 이미지를로드 한 다음 해당 태그의 CSS를 1500x600 으로 설정하십시오. 이미지가 늘어나고 흐릿하게됩니다. 캔버스의 경우 캔버스 이미지 자체의 너비와 높이를 설정해야합니다. 그렇게하고 싶지 않다면 confetti 당신을 위해 설정하도록 허용 할 수 있습니다.
또한 사용자 정의 인스턴스를 유지하고 동일한 캔버스 요소로 스컬트 인스턴스를 두 번 이상 초기화하지 않아야합니다.
다음과 같은 글로벌 옵션을 사용할 수 있습니다.
resize (기본값 : false) : 캔버스 이미지 크기 설정을 허용할지 여부와 창 크기가 변경되면 (예 : 창 크기 조정, 모바일 장치 회전 등) 크기를 올바르게 유지하십시오. 기본적으로 캔버스 크기는 수정되지 않습니다.useWorker Boolean (기본값 : False) : 가능한 경우 색종이 애니메이션을 렌더링하기 위해 비동기 웹 작업자를 사용해야하는지 여부. 이것은 기본적으로 꺼져 있습니다. 즉, 애니메이션은 항상 기본 스레드에서 실행됩니다. 켜지고 브라우저가 지원하면 애니메이션이 기본 스레드에서 실행되어 페이지가 필요한 다른 작업을 차단하지 않도록합니다. 이 옵션을 사용하면 캔버스가 수정되지만 바로 아래에 더 많은 것을 읽으십시오. 브라우저에서 지원되지 않으면이 값은 무시됩니다.disableForReducedMotion 부울 (기본값 : false) : 모션 감소를 선호하는 사용자에게는 색종이를 완전히 비활성화합니다. True로 설정되면이 색종이 인스턴스를 사용하면 항상 모션 감소에 대한 사용자의 요청을 존중하고 색종이를 비활성화합니다. 중요 : 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
} ) ;창의력을 발휘하십시오. 페이지의 임의의 부분에서 작은 색종이를 시작하십시오.
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 ) ;
}
} ( ) ) ;
