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

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

ブラウザのサポート

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

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

デスクトップ

モバイル/タブレット

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

HTML構(gòu)造

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

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

CSSスタイル

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

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

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

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

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

JavaScriptコード

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

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

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

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

ステップ2：粒子の作成

// pop（）関數(shù)は関數(shù)pop（e）と呼ばれます{
  //（i = 0; i <h4>ステップ3：粒子の幅、高さ、背景</h4><pre class="brush:php;toolbar:false">関數(shù)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：各粒子をアニメーション化します

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

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

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

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

最終効果

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

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

無制限の創(chuàng)造性

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

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

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