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 をよろしくお願いいたします。