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埋め込みタグの使用方法と属性の詳細な説明

推薦する

Vue 開発ガイドの重要な知識の要約

目次概要0. JavaScriptとWeb開発の基礎1. Vueの基本概念Vue コア機能コンポーネ...

Tomcat は親の委任メカニズムを破壊して Web アプリケーションの分離を実現します。

目次Tomcat クラスローダー階層WebAppクラスローダー共有クラスローダーカタリナクラスローダ...

私の CSS フレームワーク - base.css (ブラウザのデフォルト スタイルをリセット)

コードをコピーコードは次のとおりです。 @文字セット "utf-8"; /* @...

Vueはシンプルなタイマーコンポーネントを実装します

プロジェクトを実行すると、リアルタイム更新、広告アニメーションの連続表示などの要件に遭遇することは避...

Vueのトグルボタンをクリックしてボタンを有効にし、無効にします。

実装方法は3つのステップに分かれています。テンプレートに 2 つのボタンを設定し、v-if と v-...

Nginx ロケーション設定のチュートリアル (ゼロから)

基礎位置の一致順序は、「最初に正規表現に一致し、次に共通表現に一致」です。実際のロケーションの一致順...

React Native APPのアップデートに関する簡単な説明

目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...

表に斜めヘッダー効果を出す5つの方法

誰もがテーブルをよく知っているはずです。コード内でよく見かけます。テーブルにスラッシュ ヘッダーを追...

略語マークと頭字語マーク

<abbr>タグと<acronym>タグは、Web ページに表示される略語と...

MySQL パフォーマンス チューニングについて知っておくべき 15 個の重要な変数 (要約)

序文: MYSQL は最も人気のある WEB バックエンド データベースです。最近、NOSQL がま...

Nginxでネットワーク分離を解決した実践記録を詳しく解説

必要最近、Node オンライン サービスを移行する必要があったため、2 つの新しいオンライン サーバ...

Vue ソング プログレス バーのサンプル コード

なお、これはvue-cliで作成したプロジェクトではありません。vue.jsを参照して記述したHTM...

gorm で MySql データベースを操作する方法

1. テーブル内のフィールドの大文字と小文字の区別を設定するgorm クエリを使用する場合、MySQ...

Ubuntu 18.04 に mysql5.7.23 をインストールするチュートリアル

この記事では、Ubuntu18.04にmysql5.7.23をインストールする具体的な方法を参考まで...

入力タグの名前と値の違い

type はブラウザでの入力と出力に使用されるコントロールです (たとえば、type="t...