フーノページTOP

Vectorator使い方TOP

SVGアニメーションTOP

WEBサイト作り方TOP

「ふ」のtwitter。記事を更新するとつぶやきます。

コメント・お問い合わせはこちら。

• SVGアニメーション、作り方。
  

  2020.06.30
  静的コンテンツの枠を飛び出す。

• CSSアニメーション、作り方。
  

  2021.04.17
  webアニメーションを１から学ぼう♪

⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。

しくみ。

集中線を描くのは、ベクター画像の性質を使えば簡単にできます。

細長い三角形を１つ作っておき、少しずつ回転させながら複製していきます。

そしてアニメーションは、不透明度0→1をくり返しているだけなのですが、１つ１つの３角形に対してランダムにanimation-delay（遅れ）を発生させます。これで集中線が動いているように見せることができます。

素材作成。

素材として用意するのは、１つの細長い３角形だけです。ベクターソフトで作るもよし、コードで直接描画するのも対して苦になりません。

イラレやVectornatorで、直接描画した場合。
細長３角形を描き、逆さまにします。アートボードの中心から適度に距離をとりましょう。

細長三角形の幅などは自由ですが、このあとコードで回転させながら複製していきます。
viewBox（アートボード）の対角線に重なったときにアートボードから途切れない大きさにしましょう。

この形をイメージしてコードで直接書いても構いません。
記述例がこちら⬇︎。

<svg viewBox = "0 0 400 300"> <「「１polygon」」 points = "200 130, 210 -200, 190 -200"/> </svg>

コードでも簡単に描画することができます。SVGで３角形を含む「多角形」は<polygon>要素で表現されます。

コードだけでもちゃちゃっと作成できました。

複製、アニメーション。

では細長三角を複製・アニメーションさせていきましょう。
その前に少しだけSVGコードを編集します。

<svg 「「１id = "soto"」」 > 「「４<defs>」」 <polygon 「「１id = "sankaku" class = "sen"」」 points = "200 130, 210 -200, 190 -200"/> 「「４</defs>」」 </svg>

複製した細長三角の配置先として参照できるよう、svgにid名「soto」を付けておきます。
polygon（細長三角）にはJavaScriptで取得するためのid名「sankaku」と、CSSでアニメーションさせるためのclass名「sen」を指定しました。

<defs>はdefinte（定義）という意味です。この<defs>タグで囲まれた内容はあくまでどこかで参照するための「定義」として扱われ、実際に描画されることはありません。
複製した時にマスターのpolygonも表示されていると少しややこしくなるので、「非表示」にする目的で<defs>を使いました。

これを10°ずつ回転させながら複製していきます。
transformを使うので、変形の基準を中央にしておきましょう。

.sen { transform-origin:center; }

それではJavaScriptで複製します。

「「３//外側のSVGを取得」」 const soto = document.getElemntById("soto"); 「「３//細長３角形を取得」」 const sankaku = document.getElementById("sankaku"); 「「３//10°ずつ増やしていく角度を宣言しておく」」 let kakudo = 0; 「「３//10°ずつなので、36回複製する」」 for(i = 0;i<=35;i++) { 「「３//細長３角を複製」」 let clone = sankaku.cloneNode(true);「「１...①」」 「「３//transformで角度を付けていく」」 clone.style.transform = "rotate(" + String(kakudo) + "deg)"; 「「３//外側のSVG要素に追加」」 soto.appendChild(clone);「「１...②」」 「「３//角度を10°増やす」」 kakudo += 10;「「１...③」」 }

① cloneNodeメソッドで細長３角を複製しています。引数の(true)は、子孫要素も含めて複製する場合に、このように記述します。
最新のブラウザではtrueの場合は引数を省略できる、と仕様書にありましたが、現状は記述しておいたほうが無難です。

② ポイントは、<defs>の中身である<polygon>のみを取り出して複製・svgに追加しているところです。こうすることによって定義部分の要素は描画されることなく、複製→追加されたものだけが実際に描画されることに成増。

③ 角度を追加する変数「kakudo」を使って、for文を繰り返すごとに10°ずつその値を増やしていきます。

現在の状態がこちら⬆︎。回転/複製ができています。
ここに不透明度を変えるCSSアニメーションを指定します。

.sen { transform-origin:center; animation:sen 0.5s alternate infinite; } @keyframes sen { to { opacity:0; } }

複製した細長三角の１つ１つにアニメーションが施されました。
仕上げです。１本ごとのアニメーションにランダムなanimation-delayを掛けます。複製したcloneのstyle属性に、ランダムな遅れを指定しましょう。
さっきのfor文の中に追加します。

for(i =0;i<=35;i++) { let clone = indiv.cloneNode(true); clone.style.transform = "rotate(" + String(skakudo) + "deg)"; 「「１clone.style.animationDelay = String(Math.random()) + "s";」」 gaib.appendChild(clone); skakudo += 10; }

JavaScript内にCSSのプロパティを記述する際は、「animationDelay」とキャメルケースになる点に注意してください。

できました！
あとはタイミングや色、線の数など、お好みで調整してくださいね。２種類の集中線を重ねてみる、というのも面白いかもです。

CSS講座（笑）。

■ center.png 集中線のアニメーションが完成したので、実際に真ん中に要素をおいてみます。
⬆︎のちょっとダサい画像、「center.png」で試してみます。この画像のid名は「centerelm」としました。

「「１<div class = "mannaka">」」 bb<img 「「５id = "centerelm"」」 src = "center.png"> bb<svg id = "soto"> bbbb　〜 略 〜 bb</svg> 「「１</div>」」

集中線のSVGと真ん中におきたい要素を１つの<div>要素の中に配置します。

集中線の真ん中に要素を配置しましょう。CSSでよく使われるposition:relativeとabsのセットで行います。

.mannaka { position:relative; } #centerelm { position:absolute; }

absoluteを指定した要素の中央寄せは次の手順でおこないます。

top,leftを50%に指定。
この「50%」は親要素（黄色）の「mannaka」に対する比率で反映されます。すると子要素（青）の左上が親要素の中央に揃います。

次にtransform:translateでx,y方向ともに-50%ずつ移動。
ここでの「-50%」は、子要素自身の大きさに対する比率だと解釈されます。それにより、子要素と親要素の中心が一致します。
CSSを追加します。

#centerelm ｛ bbposition:absolute; bb「「１top:50%; bbleft:50%; bbtransform:translate(-50%,-50%);」」 ｝

要素によけいなmargin,paddingがついているとうまくいかないので注意してください。

集中線を前面に重ねたい場合は、svg要素にposition:relativeを指定してz-indexを調整します。

#soto { position:relative; z-index:3; }

集中線が前面に回り込みました。
パンパカパーンの対象がテキストの場合は可読性を考え、真ん中の空洞を調整したりしたほうが良さそうです。