JavaScript를 사용하여 애니메이션 Favicon 로더를 만드는 방법
Favicons 온라인 브랜딩의 중요한 부분 인 시각적 단서를 주다. 사용자에게 제공하고 도움을줍니다. 귀하의 사이트를 구별하십시오. 다른 사람들로부터. 대부분의 favicon은 정적이지만, 애니메이션 파비콘 만들기 게다가.
끊임없이 움직이는 favicon은 대부분의 사용자에게는 당황스럽고 접근성에 해를 끼치지만 짧은 시간 동안 만 움직이는 경우 사용자 행동 또는 배경 이벤트에 응답하여, 페이지로드와 같은 여분의 시각 정보 제공-따라서 사용자 환경 개선.
이 글에서는 내가 만드는 방법을 보여줄 것입니다. HTML 캔버스의 애니메이션 순환 로더, 그것을 파비콘으로 사용하는 방법에 대해 설명합니다. 안 애니메이션 파비콘 로더 에 좋은 도구입니다 어떤 행동의 진행 상황을 시각화하다. 파일 업로드 또는 이미지 처리와 같은 페이지에서 수행됩니다. 당신은 이 튜토리얼에 속한 데모 ...에 기둥 게다가.
1.
첫째, 우리는 캔버스 애니메이션 만들기 그 완전히 동그라미를 그리며, 총 100 % (이것은 원호를 증가시킬 필요가있을 때 중요 할 것이다).
캔버스에 표준 파비콘 크기 인 16 * 16 픽셀을 사용하고 있습니다. 원하는 경우 크기보다 큰 크기를 사용할 수 있지만 캔버스 이미지는 16로 축소2 픽셀 영역 그것이 파비콘으로 적용될 때.
2. 다음을 확인하십시오.
내부 길 위에() 이벤트 핸들러, 우리는 canvas 요소에 대한 참조를 얻는다. [이력서]를 사용하여 querySelector () 메소드, 참조 2D 드로잉 컨텍스트 객체 [ctx]의 도움으로 getContext () 방법.
onload = function () cv = document.querySelector ( '# cvl'), ctx = cv.getContext ( '2d'); if (!! ctx) / * ... * /;
우리는 또한 확인해야합니다. 캔버스가 UA 드로잉 컨텍스트 객체 [ctx] 존재하고 정의되지 않았다.. 우리는 놓을거야. 로드 이벤트에 속하는 모든 코드 이걸로 만약 조건.
3. 초기 변수 생성
만들어 보자. 3 개의 전역 변수, 에스 그 호의 개시 각도, TC 그 이드의 setInterval () 시간제 노동자, 과 pct 그 같은 타이머의 백분율 값. 코드 tc = pct = 0 0을 초기 값 그 TC 과 pct 변수.
onload = function () cv = document.querySelector ( '# cvl'), ctx = cv.getContext ( '2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0; ;
의 가치를 보여주는 방법 에스 나는 어떻게 계산 되었는가? 원호 각도 작업.
호각
그만큼 끼인 각 (원호를 정의하는 두 개의 광선으로 구성된 각도) 원주의 ~이다. 2π 라드, 어디에 라드 라디안 단위 기호입니다. 이것은 4 분의 1 아크를위한 각도 동일 0.5π 라드.
언제 로드 진행 상황 시각화, 캔버스의 원을 그려야합니다. 최상위 위치에서 기본 권한보다.
시계 방향으로 가고있다. (기본 방향 호가 캔버스에 그려진다) 올바른 위치에서, 최고점은 3 분기 후 도달, 즉 각도 1.5π 라드. 따라서 변수를 만들었습니다. s = 1.5 * Math.PI 나중에 원호의 시작 각도를 나타냅니다. 캔버스에서 그려지는.
4. 원을 그리다.
드로잉 컨텍스트 개체의 경우 선의 폭 과 strokeStyle 원의 속성 우리는 다음 단계로 나아갈 것입니다. 그만큼 strokeStyle 속성은 그 색깔을 의미한다..
onload = function () cv = document.querySelector ( '# cvl'), ctx = cv.getContext ( '2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = '자홍색'; ;
5. 원 그리기
우리 클릭 이벤트 핸들러 추가 로드 버튼에 [#lbtn] 어느 60 밀리 초의 setInterval 타이머를 트리거합니다., 원 그리기를 담당하는 함수를 실행하는 [updateLoader ()] 서클이 완전히 그려 질 때까지 60ms마다.
그만큼 setInterval () 방법 타이머 ID를 반환합니다. 에 할당 된 타이머를 식별한다. TC 변하기 쉬운.
onload = function () cv = document.querySelector ( '# cvl'), ctx = cv.getContext ( '2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ( '# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = '자홍색'; btn.addEventListener ( 'click', function () tc = setInterval (updateLoader, 60);); ;
6. updateLoader () 사용자 정의 함수
사용자 정의를 만들 차례입니다. updateLoader () 기능은 ~에 의해 불린 setInterval () 방법 버튼을 클릭하면 이벤트가 트리거됩니다. 먼저 코드를 보여 드리겠습니다. 그러면 설명과 함께 할 수 있습니다..
function updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); if (pct === 100) clearInterval (tc); 반환; pct ++;
그만큼 clearRect () 방법 캔바스의 직사각형 영역을 지 웁니다. 왼쪽 상단 모서리의 (x, y) 좌표 매개 변수로 정의됩니다. 그만큼 clearRect (0, 0, 16, 16) 선 모든 것을 지우다. 우리가 만든 16 * 16 픽셀 캔버스에서.
그만큼 beginPath () 방법 새로운 경로를 만든다. 그림 그리기 및 행정() 방법 새로 만든 경로에 페인트 칠하기.
의 끝에서 updateLoader () 기능, 백분율 계수 [pct]가 1 씩 증가합니다, 증가 이전에 우리는 100과 같은지 확인하십시오.. 100 %가되면 setInterval () 시간제 노동자 (타이머 ID로 식별 됨), TC) 클리어 됨 의 도움으로 clearInterval () 방법.
첫 번째 세 가지 매개 변수는 호() 방법은 원호의 중심 좌표 (x, y) 과 반경. 네 번째 및 다섯 번째 매개 변수는 시작 각도와 끝 각도 호의 드로잉이 시작되고 끝나는.
우리는 이미 로더 서클의 시작점을 결정했습니다. 에스, 그리고 그것은 모든 반복에서 동일 함.
그러나 끝 각도는 백분율로 증분하다., 우리는 증분 크기 다음과 같은 방식으로 1 %라고 말하십시오 (100 중에서 1). 각도와 동등한 α 2 명 중π 서클에서 (2π = 전체 원주의 각도)이면, 다음 식과 같이 쓸 수 있습니다.
1/100 = α/ 2π
방정식을 재 배열 할 때 :
α = 1 * 2π / 100 α = 2π/ 100
따라서 1 %는 각도 2와 같습니다.π/ 100 원. 따라서 각 백분율 증분 중 끝 각도는 2를 곱하여 계산π/ 백분율 값으로 100. 그 결과는 다음과 같습니다. ~에 추가됨 에스 (시작 각도), 그래서 호들은 같은 시작 위치에서 가져온 때마다. 이것이 우리가 pct * 2 * 수학 .PI / 100 + s 위 코드 스 니펫에서 끝 각도를 계산하는 수식.
7. 파비콘 추가
광고 게재 위치를 favicon link 요소 HTML로 섹션, 직접 또는 JavaScript를 통해.
에서 updateLoader () 함수, 먼저 우리는 파비콘 가져 오기 ~을 사용하여 querySelector () 메소드에 할당하고 잉꼬 변하기 쉬운. 그럼 우리는 캔버스 이미지 내보내기 호가 그릴 때마다 인코딩 된 이미지로 ~을 사용하여 toDataURL () 방법 및 해당 데이터 URI 콘텐츠를 파비콘 이미지로 할당. 이것은 애니메이션 파비콘을 만듭니다. 캔버스 로더와 동일.
onload = function () cv = document.querySelector ( '# cvl'), ctx = cv.getContext ( '2d'); if (!! ctx) s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ( '# lbtn'), lnk = document.querySelector ( 'link [rel = "icon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = '자홍색'; btn.addEventListener ( 'click', function () tc = setInterval (updateLoader, 60);); ; function updateLoader () ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); lnk.href = cv.toDataURL ( 'image / png'); if (pct === 100) clearTimeout (tc); 반환; pct ++;
전체 코드를 볼 수 있습니다. Github에.
보너스 : 비동기 이벤트에 로더 사용
이 캔버스 애니메이션을 사용해야 할 때 로딩 동작과 함께 웹 페이지에서 updateLoader () 기능 에 대한 이벤트 핸들러로 진행() 행동의 사건.
예를 들어, 자바 스크립트는 다음과 같이 바뀔 것입니다. AJAX에서:
onload = function () cv = document.querySelector ( '# cvl'), ctx = cv.getContext ( '2d'); if (!! ctx) s = 1.5 * Math.PI, lnk = document.querySelector ( 'link [rel = "icon"]'); ctx.lineWidth = 2; ctx.strokeStyle = '자홍색'; var xhr = new XMLHttpRequest (); xhr.addEventListener ( 'progress', updateLoader); xhr.open ( 'GET', 'https://xyz.com/abc'); xhr.send (); ; function updateLoader (evt) ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (evt.loaded * 2 * Math.PI / evt.total + s)); ctx.stroke (); lnk.href = cv.toDataURL ( 'image / png');
에서 호() 메소드에서 백분율 값 [pct] 와 더불어 짐을 실은 이벤트의 속성-얼마나 많은 파일이로드되었는지를 나타냅니다. 100 사용 합계 ProgressEvent의 속성, 이것은 적재 될 총 금액을 나타냅니다..
저기있다. 필요 없음 setInterval () 그런 경우에, 진행() 이벤트는 자동 해고 로딩이 진행됨에 따라.
