弾幕効果を実現する方法まとめ（CSSとCanvas）

この記事では主に弾幕効果を実現する方法(CSSとキャンバス)をまとめて紹介していますので、必要な方は参考にしてください

, 抽選結果の表示ウィンドウを弾幕カルーセルに表示する必要があります。ここで、フロントエンドの弾幕エフェクトを実現する方法をまとめます。

css3にbeggar版の弾幕を実装

css3の弾幕パフォーマンスの最適化

canvasに弾幕を実装

canvaの弾幕の拡張機能

1.css3にbeggar版の弾幕を実装

(1) 実装方法css3で連打

まず、CSS を介して最も単純な弾幕を実装する方法を見てみましょう:

最初に HTML で弾幕の dom 構造を定義します:

<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 レンダリング プロセスからもわかります。リフローには再描画が伴う必要があります。

リフロー (リフロー): サイズやマージンなどによりレンダー ツリーの一部または全体が変更される場合、再構築する必要があるプロセスはリフローと呼ばれます。
リペイント (再描画): 要素の一部の属性が変更される場合。レイアウトの変更が発生し、再描画が必要になる処理をリフロー（リフロー）と呼びますが、Web ページのパフォーマンスを最適化する場合は、この処理を減らす必要があります。リフローの。

最初のセクションでは、弾幕の効果を実現するために left 属性を使用しました。Left により要素のレイアウトが変更されるため、リフローが発生し、モバイル ページで弾幕アニメーションがフリーズします。

2. CSS3 弾幕パフォーマンスの最適化

最初のセクションの弾幕アニメーションにスタックの問題があることがわかりました。スタックしたアニメーションを解決する方法を見てみましょう。

(1) CSS でハードウェア アクセラレーションをオンにします

CSS を使用してブラウザでハードウェア アクセラレーションをオンにし、GPU (グラフィックス プロセッシング ユニット) を使用して Web ページのパフォーマンスを向上させます。これを考慮すると、GPU のパワーを利用して、Web サイトやアプリケーションをよりスムーズに実行できます。

CSS アニメーション、変換、トランジションは、GPU アクセラレーションを自動的にオンにしませんが、ブラウザーの遅いソフトウェア レンダリング エンジンによって実行されます。では、どうすれば GPU モードに切り替えることができるのでしょうか? 多くのブラウザは、特定のトリガーによる CSS ルールを提供しています。

より一般的な方法は、3D 変更 (translate3d 属性) を通じてハードウェア アクセラレーションをオンにすることです。これを考慮して、アニメーションを次のように変更します。

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

このようにして、ハードウェアをオンにすることで Web ページのパフォーマンスを最適化できます。加速度。ただし、この方法では問題が根本的に解決されるわけではありません。同時に、GPU を使用するとメモリ使用量が増加し、モバイル デバイスなどのバッテリー寿命が短くなります。

(2) left 属性を変更しない

2 つ目の方法は、リフローが発生しないように、弾幕アニメーションの前後で left 属性の値を変更しない方法を見つけることです。

translateX のみを通じて弾幕ノードの初期位置を決定したいのですが、translateX(-100%) は親要素ではなく弾幕ノード自体に対して相対的であるため、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を結合して親要素の幅を計算し、弾幕ノードの初期位置を決定することに加えて、ここで弾幕ノードでは初期位置がずれないようにする必要があります。表示されないようにする: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="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/655/667/209/1532493329346452.gif?x-oss-process=image/resize,p_40" class="lazy" title="1532493329346452.gif" alt="弾幕効果を実現する方法まとめ（CSSとCanvas）"></span></p>
<h2 id="canva弹幕的扩展功能">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とCanvas）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。