사격 효과를 얻는 방법 요약(CSS 및 캔버스)

이 글은 주로 공세 효과를 얻는 방법(CSS 및 캔버스)을 요약하여 소개합니다. 특정 참조 값이 있습니다. 이제는 필요한 친구들이 참조할 수 있습니다.

이전에 모바일 복권 페이지에서 , 복권 결과 표시 창을 사격 캐러셀에 표시해야 합니다. 이전에 몇 가지 함정을 겪었습니다. 이제 프런트 엔드 사격 효과를 달성하는 방법을 요약하겠습니다.

css3은 거지 버전의 사격을 구현합니다

css3 사격 성능 최적화

캔버스는 사격을 구현합니다

canva 사격의 확장 기능

1. css3은 거지 버전의 사격을 구현합니다

(1) 통과 방법 CSS로 사격 구현 3

먼저 CSS를 통해 가장 간단한 사격을 구현하는 방법을 살펴보겠습니다.

먼저 HTML로 사격의 돔 구조를 정의합니다:

<p>我是弹幕</p>

사격의 움직임은 이 블록을 이동하여 달성할 수 있습니다. 사격은 오른쪽에서 왼쪽으로 이동합니다. 예를 들어, 포격의 초기 위치는 컨테이너의 가장 왼쪽에 있고 가장자리를 따라 숨겨져 있습니다(포격의 가장 왼쪽은 컨테이너의 가장 오른쪽에 맞습니다). 이는 절대 위치 지정 및 변환 구현을 통해 달성할 수 있습니다.

.block{
   position:absolute;
}

초기 위치:

from{
    left:100%;
    transform:translateX(0)
}

가장 왼쪽으로 이동하는 끝 위치는 다음과 같습니다(탄막의 가장 오른쪽 부분이 컨테이너의 가장 왼쪽 위치에 맞습니다):

to{
   left:0;
   transform:translateX(-100%)
}

시작 위치와 끝 위치의 구체적인 그림은 다음과 같습니다. 다음은 다음과 같습니다.

완전한 2프레임 사격 애니메이션은 시작 위치와 종료 위치를 기준으로 정의할 수 있습니다.

@keyframes barrage{
   from{
     left:100%;
     transform:translateX(0);
   }
   to{
     left:0;
     transform:translateX(-100%);
   }
}

사격 요소에 이 애니메이션을 도입하세요.

.block{
  position:absolute;
  /* other decorate style */
  animation:barrage 5s linear 0s;
}

이런 방식으로 의 거지 버전은 포격 효과를 얻을 수 있습니다 :

(2) 절대 위치 지정 및 왼쪽을 통한 포격 구현의 결함

우선 CSS 렌더링 프로세스를 명확히합시다

• I) 다음에 따라 DOM 트리를 생성합니다. HTML의 구조(DOM 트리에는 display :none 노드가 포함됨)

• II) DOM 트리를 기반으로 노드의 기하학적 속성(여백/패딩/너비/높이/왼쪽 등)을 기반으로 렌더 트리를 생성합니다. .)

• III) 렌더 트리를 기반으로 색상, 글꼴 등의 속성을 계속 렌더링합니다

I) 및 II)의 속성이 변경되면 III)의 속성만 변경됩니다. , 다시 그리기만 발생합니다. 분명히 우리는 CSS 렌더링 프로세스에서도 볼 수 있습니다. 리플로우에는 다시 그리기가 수반되어야 합니다.

reflow(reflow): 크기, 여백 및 기타 문제로 인해 렌더 트리의 일부 또는 전부가 변경되어 다시 작성해야 하는 경우 프로세스를 reflow라고 합니다.
repaint(redraw): 요소의 일부 속성이 변경되는 경우 레이아웃을 변경하고 다시 렌더링해야 하는 프로세스를 다시 그리기라고 합니다. 리플로우(reflow)는 브라우저의 CSS 렌더링 속도에 영향을 미치므로 웹 페이지 성능을 최적화할 때 필요합니다. 리플로우 발생.

첫 번째 섹션에서는 사격 효과를 얻기 위해 왼쪽 속성을 사용했습니다. 왼쪽은 요소의 레이아웃을 변경하므로 리플로우가 발생하여 모바일 페이지에서 사격 애니메이션이 정지됩니다.

2. CSS3 사격 성능 최적화

첫 번째 섹션의 사격 애니메이션에 멈춤 문제가 있음을 발견했습니다. 멈춤 애니메이션을 해결하는 방법을 살펴보겠습니다.

(1) CSS가 하드웨어 가속을 켭니다

CSS를 사용하여 브라우저에서 하드웨어 가속을 켜고, GPU(그래픽 처리 장치)를 사용하여 웹 페이지 성능을 향상합니다. 이를 고려하여 GPU의 성능을 사용하여 웹 사이트나 응용 프로그램이 보다 원활하게 작동하도록 할 수 있습니다.

CSS 애니메이션, 변환 및 전환은 GPU 가속을 자동으로 활성화하지 않지만 브라우저의 느린 소프트웨어 렌더링 엔진에 의해 수행됩니다. 그렇다면 GPU 모드로 어떻게 전환할 수 있습니까? 많은 브라우저가 특정 트리거 CSS 규칙을 제공합니다.

더 일반적인 방법은 3D 변경(translate3d 속성)을 통해 하드웨어 가속을 켤 수 있다는 것입니다. 이를 고려하여 애니메이션을 다음과 같이 수정합니다.

@keyframes barrage{
   from{
     left:100%;
     transform:translate3d(0,0,0);
   }
   to{
     left:0;
     transform:translate3d(-100%,0,0);
   }
}

이런 방식으로 하드웨어를 켜서 웹 페이지 성능을 최적화할 수 있습니다. 가속. 하지만 이 방법은 근본적으로 문제를 해결하지 못합니다. 동시에 GPU를 사용하면 메모리 사용량이 늘어나 모바일 장치의 배터리 수명이 단축되는 등의 문제가 있습니다.

(2) 왼쪽 속성을 변경하지 마세요

두 번째 방법은 연막 애니메이션 전후에 왼쪽 속성의 값이 변경되지 않도록 하여 리플로우가 발생하지 않도록 하는 방법을 찾는 것입니다.

translateX를 통해서만 barrage 노드의 초기 위치를 결정하고 싶지만,translateX(-100%)는 부모 요소가 아닌 barrage 노드 자체에 상대적이므로 js와 css를 결합하여 js에서 얻습니다. 사격 노드가 위치한 상위 요소의 폭을 입력하고, 이 폭을 기준으로 사격 노드의 초기 위치를 정의합니다.

예를 들어 상위 요소를 본문으로 가져옵니다.

//css
 .block{
  position:absolute;
  left:0;
  visibility:hidden;
  /* other decorate style */
  animation:barrage 5s linear 0s;
}
//js
let style = document.createElement('style');
document.head.appendChild(style);
let width = window.innerWidth;
let from = `from { visibility: visible; -webkit-transform: translateX(${width}px); }`;
let to = `to { visibility: visible; -webkit-transform: translateX(-100%); }`;
style.sheet.insertRule(`@-webkit-keyframes barrage { ${from} ${to} }`, 0);

js를 결합하여 부모 요소의 너비를 계산하여 사격 노드의 초기 위치를 결정하는 것 외에도 여기 사격 노드에서 초기 위치를 방지해야 합니다. visible:hidden 속성이 추가되었습니다. 초기 위치가 결정되기 전에 사격 노드가 상위 컨테이너에 표시되는 것을 방지합니다. 포격은 초기 위치에서 스크롤을 시작할 때만 표시됩니다.

但是这种css的实现方式，在实现弹幕的扩展功能方面比较麻烦，比如如何控制弹幕暂停等等。

3. canvas实现弹幕

除了通过css实现弹幕的方法之外，通过canvas也可以实现弹幕。

通过canvas实现弹幕的原理就是时时的重绘文字，下面来一步步的实现。

• 获取画布

  let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');

• 绘制文字

ctx.font = '20px Microsoft YaHei';          
ctx.fillStyle = '#000000';                
ctx.fillText('canvas 绘制文字', x, y);

上面的fillText就是实现弹幕效果的主要api，其中x表示横方向的坐标，y表示纵方向的坐标，只要时时的改变x，y进行重绘，就可以实现动态的弹幕效果。

• 清除绘制内容

  ctx.clearRect(0, 0, width, height);

• 具体实现

通过定时器，定时改变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><p>实现的效果为：</p>
<p><span class="img-wrap"><img src="https://img.php.cn//upload/image/655/667/209/1532493329346452.gif" title="1532493329346452.gif" alt="사격 효과를 얻는 방법 요약(CSS 및 캔버스)"></span></p>
<h2>4. canva弹幕的扩展功能</h2>
<p>通过canvas实现弹幕的方式，很方便做比如暂停弹幕滚动等扩展功能，此外，也可以给弹幕增加头像，给每条弹幕增加边框等等功能，以后再补充。</p>
<p>相关推荐：</p>
<p><a href="http://www.php.cn/html5-tutorial-406922.html" target="_blank" title="H5微信支付之引入微信的js-sdk包失败的解决方法">H5微信支付之引入微信的js-sdk包失败的解决方法</a></p>
<p><a href="http://www.php.cn/html5-tutorial-406614.html" target="_blank" title="使用h5 canvas实现时钟的动态效果">使用h5 canvas实现时钟的动态效果</a></p>
<div></div></barragelist.length>

위 내용은 사격 효과를 얻는 방법 요약(CSS 및 캔버스)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!