SVGポリゴンを作成してアニメートする

Sep 11, 2025

操作方法

このチュートリアルでは、SVG三角形からの範囲の画像を作成し、クリックすると、ある画像から別の画像へのアニメーション化された遷移を設定します。それはこんな感じになるでしょう電力の面ウェブサイト。これらのアニメーションは本当にサイト、特に興味を与えることができます ランディングページ 、さらに高めます ユーザー体験 。あなたが維持する複雑なサイトを持っているならば、あなたはスーパーを必要とするでしょう ウェブホスティング サービス。複雑ではないものを建てる？ A. ウェブサイトビルダー 仕事をするかもしれません。

キックオフするには、2つのアレイから始めます。リンクがクリックされるたびに、私たちは一致するSVGを見つけることになります。 h そのリンクのうちに ポイント その特定のSVGの各ポリゴンの属性。

私たちはすべての座標を抽出するつもりです ポイント 属性、ポリゴンの塗りつぶし色を取得してから、オブジェクトのプロパティとしてこれらを追加します。次に、これらすべてのオブジェクトを2つの配列のいずれかに追加します。にアレイ。

TweenMaxを使用しての値をアニメートしますからの値への配列にアレイ。アニメーションが完了したら、を設定しますに新しいものになるための配列からアレイ。

最初の実行で、から配列には、現在表示されているポリゴンのすべての点の値とすべての塗りつぶし色が含まれます。

01.画像を多角形に変換します

two images before and after Primitive — プリミティブを介して実行された前後の画像がどのように見えるか

最初のステップは実際に画像を作ることです。このために私は呼び出されたツールを使用しました原始的な（確認してください Github Repo. ）。チュートリアルで使用されている画像は、いくつかの友達の個人的なイメージです。

コマンドラインを使用して、プリミティブユーティリティを使用して選択した画像を実行します。

プリミティブ-I INPUT.JPG -O OUTPUT.SVG -N 250 -M 1

-n 250 250の多角形を指定します。 -M 1 三角形の形状を指定します -i input.jpg -o output.svg 入出力です。すべてのSVGが同じ多数の多角形を持ち、同じ形状であることが重要です。 OUTPUT.SVG 多角形のコレクションになります。

02. SVGをHTMLに貼り付けます

SVGSを作成した後、それらをHTMLの本文に貼り付けます。最初のSVGを複製し、クラスの重複の1つを与える .svg-holder 。

the .svg-holder 技術的に見える唯一のものになるだろう。それはそれからアニメートされているすべての多角形の保有者になるでしょう。クラスの保有者以外のすべてのSVGを与える 隠された と ID. ユニークな名前で。これは一致するはずです h リンク内に。隠されたSVGは隠されます 表示：なし 。確認することが重要です h 各リンクの一致 ID. それぞれのSVGの。

その後、変数を宣言します。

 topolygonArray = []にしましょう。
polygonArray = []からlet;

03.ポリゴン座標を抽出する

今度は私達のポリゴンのそれぞれを通して実行し、座標をpoints属性に入れる必要があります。 Regexを使ってこれを行うことができます。

 Const getCoordinates =（ポリゴン）= gt; {
  Polygon.GetAttribute（ "Points"）を返します。一致（/（ - ？[0-9] [0-9 \。] *）、（ - ？[0-9] [0-9 \。] *）\）\）\（ - ？[0-9 \] *）、（ - ？[0-9 \] *）\）\（ - ？[0-9] [0-9 \] *）、（ - ？[0-9] [0-9 \] *）/）。
;

04.ポリゴンアレイを更新します

image saved as an SVG with text — SVGとして保存され、すべての三角形が要素になります

リンクがクリックされるたびに、クリックされたリンクのHREFを引数として持ち、一致するSVGを見つけ、ポイント値を取得し、それをアニメートし、From Arrayを更新する関数を実行します。

 const updatepolygonArrays =（idtoAnimateto）= gt; {
  TopOlyGonArray = CreatePolyGonPointSobject（Document.GetElementByID（iDToAnimateto）.QuerySelectorALL（ "Polygon"））。

  animatepolygons（）;

  fromPolygonArray = TopolygonArray;

この関数は他の2つの関数を呼び出します - CreatePolyGonPointSObject そして animatepolygons 。

CreatePolyGonPointSObject すべてのポリゴン要素をすべての値をアニメートできるオブジェクトに変換します。 animatepolygons ポリゴンを内部にアニメイトします .svg-holder 。

 concepolygonPointSobject =（ポリゴン）= gt; {
  const polygonsarray = []。

  Polygons.Foreach（（ポリゴン、i）= gt; {
    const座標= GetCoordinates（ポリゴン）;

    PolygonSarray.push（{
      polygon.getAttribute（ "fill"）、
      1：座標、
      2：座標、
      3：座標、
      4：座標、
      5：座標、
      6：座標
    }）;）
  }）;）

  return polygonsarray;

これは私たちのものを使います getcoordinates 関数opses属性にすべての座標を取得し、各座標と塗りつぶしのオブジェクトを作成します。オブジェクトの配列を返します。私は、データ型が多数の値を一度にアニメートしているときにデータ型が簡単なように思われるので、それらをオブジェクトにすることにしました。

05.ポリゴンをアニメートします

Two images made up of SVG polygons — 最後のバージョンでは、SVGポリゴンはアニメーションを介して移行します

TweenMaxを使ってポリゴンをアニメートしましょう。

 const animatepolygons =（）= gt; {
  const polygons = document.querySelector（ "。svg-holder"）。QuerySelectorすべて（ "Polygon"）;
  FromPolyGonArray = CreatePolyGonPointSobject（ポリゴン）;

  FromPolygonArray.Foreach（（obj、i）=＆gt; {
    TweenMax.to（obj、1、{
      1つ：TopolygonArray [i]。
      2：TopolygonArray [i] .two、
      3：TopolygonArray [i] .Three、
      4：TopolygonArray [i] .four、
      5：TopolygonArray [i] .five、
      6：TopolygonArray [i] .six、
      簡単：Power3.easeout、
      ONUPDATE :(）=＆gt;
      {
        ポリゴン[i] .SetAttribute（ "Points"、 `$ {obj.one}、$ {obj.two} $ {obj.three}、$ {obj.four} $ {obj.five}、$ {obj.six } `）;）;
      }
    }）;）
  }）;）

アニメーションのすべてのフレームで、このループは現在表示されているポリゴンのPONSENT属性をアニメートします。 .svg-holder 上記の新しい値に設定します。 the onup メソッドIN TweenMax.to. アニメーションが更新されるたびに呼び出されますので、ここではその値のすべての変更で実行されます。 obj.one. 、 obj.two. 、 obj.threa 、等々。このようにして、ポイント値はアニメートと形状モーフが異なる座標を持つようにします。

次に塗りつぶしをアニメートすることができます。各ポリゴンのごとに .svg-holder 、塗りつぶしに塗りつぶしを設定します TopolygonArray それは同じインデックスにあります。

ポリゴン。：（ポリゴン、i）= gt; {
    const toColor = TopolygonArray [i] .fill;

    TweenLite.to（ポリゴン、1、{
      塗りつぶし：toColor、
      簡単に：Power3.eashout.
    }）;）
;）;

今すぐポリゴンは予想どおりの座標とその塗りつぶし色をアニメートします。そして終わった！あなたのページを保存したいですか？それらをPDFとしてエクスポートしてそれらをドロップします クラウドストレージ 。

あなたのウェブデザインスキルをさらに向上させるために、私たちの会議に向かう業界をリードするスピーカー、ワークショップ、そして貴重なネットワーキングの機会の梱包されたスケジュールを生成し、経験します。お見逃しなく！ 今あなたの生み出しチケットを入手してください 。

続きを読む：

SVGの完全なガイド
JavaScriptでSVGをアニメートしてください
ワークフローをスピードアップするための30の最高のWebデザインツール

SVGポリゴンを作成してアニメートする

01.画像を多角形に変換します

02. SVGをHTMLに貼り付けます

03.ポリゴン座標を抽出する

04.ポリゴンアレイを更新します

05.ポリゴンをアニメートします

操作方法 - 最も人気のある記事

視点を描く方法

Artrage 6からの詳細：ワークフローを後押しするための上のヒント

Mac上でスクリーンショットを取る方法

NEXTJS / REATS用のSEOフレンドリーなヘッドコンポーネントを構築する

Photoshopで昼夜を変える方法

輝くネオンテキスト効果を作成する

あなたのスケッチスキルを磨く

油絵の入門方法

カテゴリ