CSS3を使用してオンラインライブ放送に似たキューアニメーションを実装する方法

CSS3を使用してオンラインライブ放送に似たキューアニメーションを実装する方法

以前、グループの友人が質問しました。つまり、ミニプログラムでユーザーがオンラインになったときに、ライブブロードキャストプラットフォームに似たキューアニメーションを実装するにはどうすればいいですか?フロントエンドエンジニアとして、解決策は2つしかありません。

  • キューアニメーションを実現するために、条件に応じて要素のスタイルを制御するためにJavaScriptを使用します。
  • これを実現するには、データ駆動型モデルで純粋なCSS3を使用します。

ご存知のとおり、現代のWeb開発では、 CSSで実現できる効果にはJsを使用しないようにし、 CSS3 の使用を優先する必要があります。ただし、真のキューアニメーションを実現するにはデータフローを組み合わせる必要があるため、 MVVM フレームワークの便利なデータ駆動型モデルを使用してアニメーションの方向を制御できます。

アニメーションの核はCSS3なので、ミニプログラムVue/Reactでの実装の原則は似ており、技術スタックを気にする必要はありません。以下は実装後の効果図です。

実際、この効果は、ビリビリの弾幕画面、ある音楽プラットフォームの生放送のファンオンラインアニメーション、ある音楽の生放送など、多くの場所で使用されていますが、 Web側では、どのように実現できるのでしょうか。次に、著者は、このようなアニメーション効果を実現するための手順を順を追って説明します。

文章

上記のアニメーション効果を実現するには、まずアニメーションを分析する必要があります。上図のアニメーション構造は次のとおりです。

アニメーションは次の 2 つのプロセスに分かれています。

  • ユーザー入力アニメーション
  • ユーザーフェードアウトアニメーション

もう 1 つの詳細は、次の図に示すように、何人のユーザーが入力しても、全員が同じ位置から入力し、前のユーザーの位置が上に移動するということです。

したがって、この効果を実現する最良の方法は、絶対位置( absolute )や固定位置(fixed)などの位置決めを使用することです。そして、その下部を設定します

次のコードに示すように、値は次のとおりです。

.animateWrap {
    位置: 絶対;
    下部: 40%;
    左: 12px;
}

上記の位置情報は参考用です。具体的な値は必要に応じて変更できます。bottom を設定する利点は、コンテナーの子要素が追加されると、前の要素が自動的に押し上げられるため、オフセット値を手動で設定する必要がないことです。

エントリーアニメーションの実装

上の図のユーザー エントリ アニメーションを実現したい場合は、 CSS3トランジションアニメーションまたはアニメーションアニメーションを使用できます。使用シナリオの利便性のため、ここではアニメーションアニメーションを使用します。まず、DOM 構造を記述しましょう。

 <div className={styles.animateWrap}>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>李先生はオンラインです</span></div>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>李先生はオンラインです</span></div>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>李先生はオンラインです</span></div>
  </div>

上記のコードは、アニメーション コンテナーが作成され、2 人のユーザーが追加されることを示しています。ここでは、キー アニメーションを次のように定義します。

.アニメーション {
      下マージン: 10px;
      境界線の半径: 20px;
      背景色: rgba(0,0,0, .3);
      アニメーション: 移動 1.2 秒;
    }
@keyframes 移動 {
  0% {
    変換: translateX(calc(-100% - 12px));
  }
  100% {
    変換: translateX(0);
  }
}

上記のアニメーションは、要素が右に移動するアニメーションを実現していますが、このとき表示されるアニメーションは同時に表示されます。実際のシーンに適用する場合は、ソケットまたはラウンドロビンを介して取得された非同期データである必要があるため、 setIntervalを使用してこのプロセスをシミュレートできます。もう1つの詳細は、アニメーションが完全に表示するユーザーデータは最大2つだけであり、余分なデータはフェードアウトして非表示になるため、データをインターセプトする必要があります。コードは次のとおりです。

 const [user, setUser] = useState<Array<string>>([])
  使用効果(() => {
    MAX_USER_COUNT = 2 とします。
    タイマーをsetInterval(() => {
      setUser(前 => {
        prev.push(Date.now() + '')
        (前の長さ > MAX_USER_COUNT + 1) の場合 {
          前へシフト()
          戻る [...前へ]
        }それ以外 {
          戻る [...前へ]
        }
      })
    }, 2000)
  }, [])

変数MAX_USER_COUNTは、表示されるユーザーの最大数を制御するため使用されます。実際のニーズに応じて変更できます。setUser のロジックはインターセプション ロジックです。ユーザー数が指定された最大値を超えると、ヘッダー要素は削除されます。

以上でデータフローのプロセスは完了です。まだ処理する必要があるのは、ユーザーのフェードアウト ロジックとアニメーションです。まずはフェードアウトアニメーションを見てみましょう。

@keyframes 移動先 {
  0% {
    不透明度: 1;
  }
  100% {
    不透明度: 0;
  }
}

実際、アニメーションは難しくありません。制御する必要があるのは、このアニメーションをヘッダー要素に動的に追加する方法です。現時点での最善の解決策は、クラス名を使用することです。つまり、フェードアウト条件が満たされたときに、フェードアウト要素のフェードアウトクラス名を動的に設定する必要があります。条件は次のとおりです。

user.length > MAX_USER_COUNT && i === 0上記の条件は、ユーザー数が表示されるユーザーの最大数を超え、要素がヘッダー要素である場合、この条件に従ってクラス名を動的に設定するだけでよいことを意味します。

{
  ユーザー.map((アイテム, i) => {
     return <div className={classnames(styles.animate, user.length > 2 && i === 0 ? styles.hidden : '')} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>Li {item} さんはオンラインです</span></div>
  })
}

CSS コードは次のとおりです。

。隠れた {
  不透明度: 0;
  アニメーション: moveOut 1.2s;
}

上記の手順により、完全なオンラインライブストリーミングキューアニメーションが実現しました。アニメーションの完全なCSSコードは次のとおりです。興味のある方は、学習して参照してください。

.animateWrap {
    位置: 絶対;
    下部: 40%;
    左: 12px;
    .アニメーション {
      下マージン: 10px;
      境界線の半径: 20px;
      背景色: rgba(0,0,0, .3);
      アニメーション: 移動 1.2 秒;
      .tx {
        表示: インラインブロック;
        幅: 36ピクセル;
        高さ: 36px;
        境界線の半径: 50%;
        オーバーフロー: 非表示;
        垂直位置合わせ: 中央;
        右マージン: 10px;
        画像 {
          幅: 100%;
          高さ: 100%;
          オブジェクトフィット: カバー;
        }
      }
      スパン {
        右マージン: 12px;
        行の高さ: 36px;
        フォントサイズ: 14px;
        色: #fff;
      }
    }
    。隠れた {
      不透明度: 0;
      アニメーション: moveOut 1.2s;
    }
    @keyframes 移動 {
      0% {
        変換: translateX(calc(-100% - 12px));
      }
      100% {
        変換: translateX(0);
      }
    }
    @keyframes 移動先 {
      0% {
        不透明度: 1;
      }
      100% {
        不透明度: 0;
      }
    }
  }

やっと

これで、CSS3 を使用してオンライン ライブ ストリーミング用のキュー アニメーション サンプル コードを実装する方法についての記事は終了です。CSS3 オンライン ライブ ストリーミング キュー アニメーションに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL マルチテーブル結合クエリの詳細な説明

>>:  HTML埋め込みタグの使用方法と属性の詳細な説明

推薦する

Tencent Cloud 上で Hadoop 3.x 疑似クラスターを構築する方法を説明します

1. 環境整備CentOS Linux リリース 7.5.1804 (コア)インストールフォルダを作...

CSS でデジタル ページング効果のコードと手順を実装する方法

かなりの数のウェブサイトがデジタルページング効果を使用しています。たとえば、このサイトのページングも...

Vue の computed と watch の違いを理解する方法

目次概要計算された監視プロパティを監視する要約する概要Vue プロジェクトでは、computed と...

MySQL の選択、挿入、更新バッチ操作ステートメントのコード例

プロジェクトでは、データを操作するためにバッチ操作ステートメントが必要になることがよくあります。バッ...

Linux 環境に nginx をインストールするチュートリアル

目次1. 必要な環境をインストールする //gccをインストールする yum で gcc-c++ を...

星のフラッシュ効果を実現するjs

この記事の例では、スターフラッシュ効果を実現するためのjsの具体的なコードを参考までに共有しています...

CentOS7 での mysql 5.7.23 のバイナリ インストール

インターネット上のインストール情報は不均一で、落とし穴だらけです。インストールにはかなりの労力がかか...

nofollowタグの使用と分析に関する簡単な説明

nofollowをめぐる論争Zac と Guoping の間では、nofollow が PR を無駄...

CSS トップに戻る コード例

最近のウェブサイトのほとんどはページが長く、4 画面または 5 画面の長さのものもあれば、2 画面ま...

MySQLインデックスを正しく作成する方法

インデックス作成は大学図書館の書誌インデックスの構築に似ており、データ検索の効率を向上させ、データベ...

Dockerコンテナとホスト間のデータ相互作用の概要

序文実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共...

CSS は Google マテリアル デザインのテキスト入力ボックス スタイルを実装します (推奨)

みなさんこんにちは。今日は、純粋な CSS を使用して Google マテリアル デザインのテキスト...

HTML の空リンク href="#" と href="javascript:void(0)" の違い

# には位置情報が含まれます。デフォルトのアンカーは #top で、これは Web ページの上部です...

MySQL 8.0.15 のインストールと設定のグラフィックチュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...