ホーム>Web デザインのチュートリアル>HTMLチュートリアル

フロントエンドで弾幕エフェクトを実装する方法まとめ（css3やcanvasの実装方法も含む）

著者：Eve Cole 更新時間：2025-02-05 14:48:01

以前、モバイル宝くじページで宝くじ結果の表示ウィンドウに弾幕カルーセルを表示する必要がありましたが、ここでフロントエンドの弾幕効果を実現する方法をまとめます。

  • CSS3 は Barrage の乞食バージョンを実装します
  • css3 弾幕パフォーマンスの最適化
  • キャンバスは弾幕を実装します
  • キャンバス弾幕の拡張機能
1. CSS3 は、乞食バージョンの弾幕を実装します

(1) css3による弾幕の実装方法

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

まず、HTML で弾幕の dom 構造を定義します。 

 <div class=block>私は弾幕です</div>

弾幕の移動は、このブロックを移動することで実現できます。弾幕の右から左への移動を例にとると、弾幕の初期位置はコンテナの一番左端で、端（コンテナの一番左端）に沿って隠れています。弾幕はコンテナの右端と同じです))、これは絶対位置決めと変換によって実現できます。 

 .block{位置:絶対;}

初期位置: 

から{左:100%;translateX(0)}

左端への移動の終了位置は次のとおりです (弾幕の右端がコンテナの左端と揃います)。 

へ{左:0;変換:translateX(-100%)}

開始位置と終了位置の具体的な図は次のとおりです。

完全な 2 フレームの弾幕アニメーションは、開始位置と終了位置に基づいて定義できます。 

 @keyframes 弾幕{ 左:100%; 変換:translateX(0) } から { 左:translateX(-100%);

このアニメーションを弾幕要素に導入します。 

 .block{position:absolute; /* その他の装飾スタイル */ アニメーション:弾幕 5 秒線形 0 秒;}

このようにして、物乞いのバージョンの弾幕効果を実現できます。

(2)絶対位置決めと左による弾幕実現の欠陥

まずはCSSのレンダリング処理を明確にしましょう

I) HTML の構造に基づいて DOM ツリーを生成します (DOM ツリーには display:none ノードが含まれます) II) DOM ツリーに基づいて、ノードの幾何学的属性 (マージン/パディング/幅/高さ) に基づいてレンダー ツリーを生成します/left など) III) レンダー ツリーに基づいて色やフォントなどの属性をレンダリングし続けます。

I)、II)の性質が変化するとリフローが発生します。III)の性質のみが変化すると再塗装のみとなります。明らかに、CSS レンダリング プロセスからもわかります。リフローには再描画が伴う必要があります。

リフロー: サイズやマージンなどによりレンダー ツリーの一部または全体が変更された場合、プロセスを再構築する必要があります。 再ペイント: 要素の外観や背景色などの一部の属性が変更された場合、レイアウトは変更されません。変更による再レンダリングのプロセスは再描画と呼ばれます。

リフローはブラウザ CSS の表示速度に影響を与えるため、Web ページのパフォーマンスを最適化する場合はリフローの発生を減らす必要があります。

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

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

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

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

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

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

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

 @keyframes 弾幕{ 左:100%; 変換:translate3d(0,0,0) }; から{ 左:translate3d(-100%,0,0);

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

(2)left属性は変更しないでください

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

弾幕ノードの初期位置をtranslateXのみで決定したいのですが、translateX(-100%)は親要素ではなく弾幕ノード自体を基準としているため、jsとcssを組み合わせてjsで弾幕を取得します。ノードが配置されている親要素の幅に基づいて弾幕ノードの初期位置が定義されます。

親要素が body の場合を例に挙げます。 

 //css .block{position:absolute; left:0; Visibility:hidden; /* その他の装飾スタイル */ アニメーション:弾幕 5s リニア 0s;}//jslet style = document.createElement('style'); .appendChild(style);let width = window.innerWidth;let from = `from { 可視性: 可視; -webkit-transform: translationX(${width}px); }`;let to = `to { 可視性:visible; -webkit-transform:translateX(-100%); }`;style.sheet.insertRule(`@-webkit-keyframes) { ${from} ${to} }`, 0);

jsを連携させて親要素の幅を計算して弾幕ノードの初期位置を決定するほか、初期位置が弾幕ノードに表示されないようにするためにvisibility:hidden属性を追加しました。初期位置が決定される前に、弾幕ノードが親コンテナに表示されないようにします。弾幕は、初期位置からスクロールを開始した場合にのみ表示されます。

ただし、この CSS 実装方法は、弾幕の一時停止をどのように制御するかなど、弾幕の拡張機能を実現する上でさらに面倒です。

3.キャンバスは弾幕を実装します

弾幕はCSSで実現する方法以外に、Canvasで実現することもできます。

キャンバスで弾幕を実現する原理は、テキストを時々再描画することです。それを段階的に実装してみましょう。

キャンバスを取得

 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座標位置配列 letspeedArr=_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]);

達成される効果は次のとおりです。

4. キャンバス弾幕の拡張機能

キャンバスを介して弾幕を実装する方法は、弾幕スクロールの一時停止などの拡張機能に非常に便利です。また、弾幕にアバターを追加したり、各弾幕に境界線を追加したりすることもできます。これらの機能は、後で追加されます。

最後に、単純な React Barrage コンポーネントを指定します。 https://github.com/forthealllight/react-barrage

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。

関連記事