이전에는 모바일 복권 페이지에서 복권 결과 표시 창에 사격 캐러셀을 표시해야 했습니다. 이제 프런트엔드 사격 효과를 달성하는 방법을 요약하겠습니다.
먼저 CSS를 통해 가장 간단한 사격을 구현하는 방법을 살펴보겠습니다.
먼저 HTML에서 사격의 돔 구조를 정의합니다.
<div class=block>나는 탄마쿠입니다</div>
이 블록을 이동하면 포격의 이동이 가능합니다. 예를 들어 포격의 오른쪽에서 왼쪽으로 이동하면 포격의 초기 위치는 컨테이너의 가장 왼쪽에 있으며 가장자리(의 가장 왼쪽)를 따라 숨겨져 있습니다. 포격은 컨테이너의 가장 오른쪽과 동일합니다.) 이는 절대 위치 지정 및 변환을 통해 달성할 수 있습니다.
.block{ 위치:절대;}초기 위치:
from{ 왼쪽:100%; 변환:translateX(0)}가장 왼쪽으로 이동하는 최종 위치는 다음과 같습니다(공격의 가장 오른쪽이 컨테이너의 가장 왼쪽과 정렬됨).
{왼쪽:0; 변환:번역X(-100%)}시작 위치와 끝 위치의 구체적인 그림은 다음과 같습니다.
완전한 2프레임 포격 애니메이션은 시작 위치와 끝 위치를 기준으로 정의할 수 있습니다.
@keyframes 공세{ from{ left:100%; 변환:translateX(0) } to{ left:0;사격 요소에 이 애니메이션을 도입합니다.
.block{ position:absolute; /* 기타 장식 스타일 */ animation:barrage 5s 선형 0s;}이러한 방식으로 거지 버전의 공세 효과를 얻을 수 있습니다.
먼저 CSS의 렌더링 과정을 명확히 해보자.
I) HTML 구조를 기반으로 DOM 트리를 생성합니다(DOM 트리에는 디스플레이:없음 노드가 포함됨). II) DOM 트리를 기반으로 노드의 기하학적 속성(여백/패딩/너비/높이)을 기반으로 렌더 트리를 생성합니다. /left 등) III) 렌더 트리를 기반으로 색상, 글꼴 등의 속성을 계속 렌더링합니다.
I), II)의 속성이 변경되면 Reflow가 발생하고 III)의 속성만 변경되면 Repaint만 발생합니다. 분명히 우리는 CSS 렌더링 프로세스에서도 볼 수 있습니다. 리플로우에는 다시 그리기가 수반되어야 합니다.
리플로우(reflow): 크기, 여백 등으로 인해 렌더 트리의 일부 또는 전체가 변경되면 프로세스를 다시 작성해야 합니다. 리페인트(Repaint): 모양, 배경색 등 요소의 일부 속성이 변경되면 레이아웃이 변경되지 않습니다. 변경으로 인해 다시 렌더링되는 과정을 다시 그리기라고 합니다.
리플로우는 브라우저 CSS의 렌더링 속도에 영향을 미치므로 웹 페이지 성능을 최적화할 때는 리플로우 발생을 줄여야 합니다.
첫 번째 섹션에서는 사격 효과를 얻기 위해 left 속성을 사용했습니다. Left는 요소의 레이아웃을 변경하므로 리플로우가 발생하여 모바일 페이지에서 사격 애니메이션이 정지됩니다.
2. CSS3 사격 성능 최적화첫 번째 섹션의 사격 애니메이션에 멈춤 문제가 있음을 발견했습니다. 멈춤 애니메이션을 해결하는 방법을 살펴보겠습니다.
(1)CSS가 하드웨어 가속을 켭니다.CSS를 사용하여 브라우저에서 하드웨어 가속을 활성화하고 GPU(그래픽 처리 장치)를 사용하여 웹 페이지 성능을 향상시킵니다. 이를 고려하여 GPU의 성능을 사용하여 웹 사이트나 응용 프로그램이 보다 원활하게 작동하도록 할 수 있습니다.
CSS 애니메이션, 변환 및 전환은 GPU 가속을 자동으로 활성화하지 않지만 브라우저의 느린 소프트웨어 렌더링 엔진에 의해 수행됩니다. 그렇다면 GPU 모드로 어떻게 전환할 수 있습니까? 많은 브라우저가 특정 트리거 CSS 규칙을 제공합니다.
보다 일반적인 방법은 3D 변경(translate3d 속성)을 통해 하드웨어 가속을 켤 수 있다는 것입니다. 이를 고려하여 애니메이션을 다음과 같이 수정합니다.
@keyframes 사격{ from{ left:100%; 변환:translate3d(0,0,0) } to{ left:0,0;이러한 방식으로 하드웨어 가속을 켜서 웹 페이지 성능을 최적화할 수 있습니다. 하지만 이 방법은 근본적으로 문제를 해결하지 못합니다. 동시에 GPU를 사용하면 메모리 사용량이 늘어나 모바일 장치의 배터리 수명이 단축되는 등의 문제가 있습니다.
(2) 왼쪽 속성을 변경하지 마십시오
두 번째 방법은 연발 애니메이션 전후에 left 속성의 값이 변하지 않도록 하여 reflow가 발생하지 않도록 하는 방법을 찾는 것이다.
우리는 moveX를 통해서만 사격 노드의 초기 위치를 결정하고 싶지만,translateX(-100%)는 부모 요소가 아닌 사격 노드 자체에 상대적이므로 js와 css를 결합하여 js에서 사격을 얻습니다. 노드가 위치한 상위 요소의 폭을 기준으로 방어 노드의 초기 위치가 정의됩니다.
상위 요소가 본문인 경우를 예로 들어 보겠습니다.
//css .block{ position:absolute; left:0; visible:hidden; /* 기타 장식 스타일 */ animation:barrage 5s 선형 0s;}//jslet style = document.createElement('style');document.head .appendChild(스타일);let 너비 = window.innerWidth;let from = `from { visible: visible; translateX(${width}px); }`;let to = `to { visible: -webkit-transform:translateX(-100%) }`;style.sheet.insertRule(`@-webkit-keyframes barrage { ${from} ${to} }`, 0);사격 노드의 초기 위치를 결정하기 위해 부모 요소의 너비를 계산하기 위해 js를 결합하는 것 외에도 초기 위치가 사격 노드에 표시되는 것을 방지하기 위해 visible:hidden 속성을 추가했습니다. 초기 위치가 결정되기 전에 사격 노드가 상위 컨테이너에 표시되는 것을 방지합니다. 포격은 초기 위치에서 스크롤을 시작할 때만 표시됩니다.
그러나 이 CSS 구현 방법은 사격 일시 중지를 제어하는 방법 등 사격의 확장된 기능을 구현하는 데 더 까다롭습니다.
3. 캔버스는 공세를 구현합니다.CSS를 통해 탄막을 구현하는 방법 외에도 캔버스를 통해서도 탄막을 구현할 수 있습니다.
캔버스를 통해 탄막을 구현하는 원리는 수시로 텍스트를 다시 그리는 것입니다.
캔버스 가져오기
let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d');텍스트 그리기
ctx.font = '20px Microsoft YaHei'; ctx.fillStyle = '#000000'' ctx.fillText('캔버스가 텍스트를 그립니다.', x, y);위의 fillText는 사격 효과를 달성하기 위한 주요 API입니다. 여기서 x는 수평 좌표를 나타내고 y는 수직 좌표를 나타냅니다. x와 y를 수시로 변경하여 다시 그리면 동적 사격 효과를 얻을 수 있습니다. 코드 복사
그림 내용 지우기
ctx.clearRect(0, 0, 너비, 높이);특정 구현
타이머를 통해 x, y가 정기적으로 변경됩니다. 각 변경 전에 먼저 화면을 지우고 변경된 x, y를 기준으로 다시 그립니다. 여러 번의 사격이 있는 경우 다음을 정의하십시오.
let colorArr=_this.getColor(color); 사격 배열에 해당하는 색상 배열 let numArrL=_this.getLeft(); 사격 배열에 해당하는 x 좌표 위치 배열 let numArrT=_this.getTop(); 해당 y 좌표 위치 배열 let speedArr=_this.getSpeed(); 사격 배열에 해당하는 사격 이동 속도 배열;
예정된 다시 뽑기 사격 기능은 다음과 같습니다:
_this.timer=setInterval(function(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); for(let j=0;j<barrageList.length;j++){ numArrL [j]-=speedArr[j]; ctx.fillStyle = colorArr[j] ctx.fillText(barrageList[j],numArrL[j],numArrT[j]) ctx.restore() },16.7);달성된 효과는 다음과 같습니다.
탄막을 캔버스를 통해 구현하는 방법은 탄막 스크롤 일시 중지와 같은 확장 기능에 매우 편리합니다. 또한 탄막에 아바타를 추가하고 각 탄막에 테두리를 추가할 수 있으며 나중에 추가될 기타 기능도 가능합니다.
마지막으로 간단한 반응 사격 구성 요소를 제공합니다. https://github.com/forthealllight/react-barrage
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.