Web Animations APIを使用して粒子で再生します

Web Animations APIを使用して、クールな粒子効果を作成します。ボタンをクリックして花火を開花させます！

アニメーションの魅力を粒子効果よりもよく示すことはできません！新しいテクノロジーを探索するたびに、できるだけ多くの粒子を使用してプレゼンテーションを行うことはできません。この記事では、Web Animations APIを使用して、ボタンをクリックしてより驚くべきパーティクルマジックを作成して花火エフェクトをトリガーします。

ブラウザのサポート

執筆時点で、SafariおよびInternet Explorerを除くすべての主要なブラウザは、少なくとも部分的にWebアニメーションAPIをサポートしています。 Safariサポートは、「Experience Feature」開発者メニューで有効にできます。

ブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番号は、ブラウザがこのバージョンからこの機能をサポートしていることを示しています。

デスクトップ

モバイル/タブレット

Twitter Love Animationを再現したい場合は、Ana Tudorのこの素晴らしい記事を参照することもできます。これは、ボタン爆発粒子の効果の素晴らしい例でもあります。

HTML構造

このデモは、HTMLコードをあまり必要としません。 1つを使用します<button></button>要素ですが、他のタイプのタグ要素にもなります。必要に応じて、ページ上のクリックイベントを聞いて、どこからでも粒子をポップアップできるようにすることもできます。

<button id="button">私をクリックしてください</button>

CSSスタイル

各粒子にはいくつかの一般的なCSSプロパティがあるため、ページのグローバルCSSにそれらを設定できます。 HTMLのようなカスタムタグ要素を作成できます。<particle></particle>セマンティックタグの使用を避けるためのタグ名。しかし、実際には、アニメーションができます<div>、<code><span></span>またはあなたが選んだラベル。

粒子 {
  ボーダーラジウス：50％;
  左：0;
  ポインターイベント：なし;
  位置：修正;
  上：0;
  不透明：0; /*初期の透明度は0です。アニメーションが始まる前に見える粒子を回避*/
}

注意すべきは、次のとおりです。

• 粒子はページのレイアウトと相互作用してはならないため、 fixed 、 top 、 left positionを0pxに設定します。
• また、 pointer-eventsを削除して、HTML粒子が画面に表示されたときにユーザーの相互作用を避けました。

ボタンとページのレイアウトのスタイルデザインはこの記事の焦点では​​ないため、このセクションをスキップします。

JavaScriptコード

JavaScriptで従う6つのステップを次に示します。

1. ボタンのクリックイベントを聞いてください
2. 30を作成します<particle></particle>要素をDOMに追加します
3. 各粒子にランダム幅、高さ、背景色を設定します
4. 各粒子をアニメーション化して、マウスの位置からランダムな位置に移動し、徐々にフェードアウトします
5. アニメーションが完了したら、domから削除します<particle></particle>要素

ステップ1：イベントをクリックします

//まず、ブラウザがWebアニメーションAPIをサポートしているかどうかを確認します
if（document.body.anime）{
  //サポートされている場合、クリックリスナーdocument.queryselector（ '＃button'）を追加します。AddEventListener（ 'Click'、pop）;
}

ステップ2：粒子の作成

// pop（）関数は関数pop（e）と呼ばれます{
  //（i = 0; i <h4 id="ステップ-粒子の幅-高さ-背景">ステップ3：粒子の幅、高さ、背景</h4><pre class="brush:php;toolbar:false">関数createparticle（x、y）{
  // ...（前のコード）
  // 5pxから25px const size = math.floor（math.random（） * 20 5）の間のランダムサイズを計算します。
  //各粒子にサイズを適用します。style.width= `$ {size} px`;
  partial.style.height = `$ {size} px`;
  //青/紫色のパレットPartial.style.background = `hsl（$ {math.random（） * 90 180}、70％、60％）`;
  // ...（次のステップ）
}

ステップ4：各粒子をアニメーション化します

関数createparticle（x、y）{
  // ...（前のコード）
  //マウス位置75px const destinationx（math.random（） -  0.5） * 2 * 75の範囲でランダムxおよびyターゲット位置を生成します。
  const destinationy = y（math.random（） -  0.5） * 2 * 75;

  //アニメーションを変数に保存してから後で必要になるため、const animation = particle.anime（[[
    {
      //粒子の初期位置を設定します//粒子のサイズの半分を使用して粒子をシフトしてマウスの中心にします： `翻訳（$ {x  - （size/ 2）} px、$ {y  - （size/ 2）} px）`、
      不透明：1
    }、
    {
      //最終座標を2番目のキーフレーム変換として定義します： `translate（$ {destinationx} px、$ {destionny} px）`、
      不透明：0
    }
  ]、{
    // 500msから1500msの間のランダムな期間を設定します：500 Math.random（） * 1000、
    緩和： 'Cubic-Bezier（0、.9、.57、1）'、
    // 0msから200msの間のランダム値を使用して各粒子を遅らせる：math.random（） * 200
  }）;
  // ...（次のステップ）
}

ステップ5：アニメーションが完了したら粒子を取り外します

関数createparticle（x、y）{
  // ...（前のコード）
  //アニメーションが完了したら、dom =（）=> {から要素アニメーションを削除します。
    particle.remove（）;
  };
}

最終効果

すべてのコードを一緒に統合することにより、必要な効果を得ることができます：カラフルな粒子爆発効果。

デモにアニメーションが表示されない場合は、ブラウザがWebアニメーションAPIをサポートしているかどうかを確認してください。詳細については、記事の冒頭のブラウザサポートフォームを参照してください。

無制限の創造性

これらすべてがCSSを使用しているため、粒子スタイルの変更は非常に簡単です。さまざまな形（文字！）を使用した例をいくつか紹介します。

または、この投稿でZach Saucierが行ったように、ボタン自体を爆発させることもできます。

（他の形状と文字の2番目の追加サンプルコード、およびZach Saucierの記事へのリンク）