SVGアニメーション05、アニメーションしている部分をクリッピング(マスク)する。

〽️仕組み。〽️コードをHTMLに貼り付け。〽️アニメーションを仕込む。〽️アニメーションをクリップ。〽️全コードはこちら。





⬆︎SVGついてのまとめページはこちら。

こんにちは、「ふ」です。
タイトルに貼ってあるアニメーション、テキストの内側で白い長方形がアニメーションしていますよね ♪

今回は「アニメーション部分に好きな形でマスクを掛ける」方法を使って、作っていきましょう。

◼︎ コード全体を見たい方は画面右上のmenuボタンから、「全コードはこちら」をクリックしてページ最下部にジャンプしてくださいね。

仕組み。

このアニメーションを作るにあたり、4枚のオブジェクトを重ねています(背景は全て透過)。

上から、

・テキストの黒い部分
・クリップするためのパス
・白長方形 ←これをアニメーションさせる
・青い外枠

となっています。

それらを上のような順番で重ねます。
お好みのCGアプリで画像を作って書き出しましょう。

clip.svg

画像作成はイラレやVectornator、winユーザならinkscapeなどのベクターグラフィック用のものを使うと便利です。
VectornatorのSVG書き出し方法は⬇︎の記事で紹介しています。



コードをHTMLに貼り付け。

今回はSVG内のオブジェクトを個別に操作したいので、HTMLファイルには参照表記ではなく、<body>〜</body>内にインライン表記で貼り付けます。

<g 「「1id="baseblue"」」> <path class="st0" d="M172.7,406c-・・ 「「3〜略〜」」 /> </g> <g 「「1id="hikari"」」 class="st1"> <rect x="88.5" y="116.6" class="st2" width="76.4" height="409.4"/> <rect x="88.5" y="116.6" class="st3" width="76.4" height="409.4"/> </g> <g 「「1id="clip"」」> <path class="st4" d= ・・ 「「3〜略〜」」 /> </g> <g 「「1id="inside_black"」」> </g>

こちらがHTMLファイルにSVGコードを貼り付けたもの。
4つのオブジェクトが記述されていますね。それぞれにid属性を付けておきました。
どれがどれだかわからない時は、コメントアウトさせてプレビューしてみましょう。

「「4<!--」」 <g 「「1id="inside_black"」」> </g> 「「4-->」」

試しに1箇所コメントアウトしました。

◼︎ プレビュー

プレビューして表示されなくなったものが、「そいつ」です。



先ほどコメントアウトしたコードは「黒い部分」のオブジェクト、ということに成増ね。

「「4<!--内側の黒い部分-->」」 <g 「「1id="inside_black"」」> </g>

オブジェクトの正体が判明したら、コメントをつけておきましょう。コードの視認性が上がるので後々便利です。

アニメーションを仕込む。

今回アニメーションしたいのは、白い長方形のオブジェクト(id = "hikari")でした。
CSSでidを参照し、animationさせます。

◼︎ タイムライン

アニメーションの内容としては左から右へ動いていく、これの繰り返しなので、transform:translateX( )を使用します。

◼︎ CSS


#hikari { animation : hikari 4s infinite; } @keyframes hikari { 0% { transform:translateX(-17%); } 100% { transform:translateX(100%); } }

SVG画像内の白長方形の位置はテキトーに定めているので、「%」の値はプレビューしながら調整しました。

◼︎ プレビュー

その結果がこちら。
当ページ、背景が白っぽくてわかりづらいので背景色を付けてあります。 白長方形がテキスト枠からはみ出してしまっていますね。

これをマスクしていきましょう。






 

アニメーションをクリップ。

SVGコード内でオブジェクトをクリップする方法は以下の手順。

・クリッピングパスとして使用したいオブジェクトを<clipPath>〜</clipPath>でマークアップ、その際id名を付けておく。

・クリップしたい対象のオブジェクトを<g>〜</g>でマークアップ、id属性を追加し先程のオブジェクトを参照させる。

<g>の「g」は「グループ」という意味ですね。
実際にやってみます。クリッピングパスとして使うオブジェクトは(id = "clip")の部分でした。

<!--クリップ用のオブジェクト--> <g id="clip"> 「「1<clipPath id = "cut">」」 <path class="st4" d= ・・ 「「3〜略〜」」 /> 「「1</clipPath>」」 </g>

clipPathのid名は"cut"としました。<path>タグのすぐ外側でマークアップするようにしましょう。
アニメーションさせている白長方形の外側を<g>〜</g>で囲み、先ほどのclipPathを適用させます。

<!--白長方形--> 「「1<g clip-path="url(#cut)">」」 <g id="hikari" class="st1"> <rect x="88.5" y="116.6" class="st2" width="76.4" height="409.4"/> <rect x="88.5" y="116.6" class="st3" width="76.4" height="409.4"/> </g> 「「1</g>」」

白長方形のコード内に<rect>が2つあるのは、「ガウシアンぼかし」を施しているためです。

ここで注意。(id= "hikari")タグの中にclipPath属性を付けないようにしてください。この部分はCSSでアニメーションを仕込んでいるので、クリップパスもアニメーションしてしまうことに成増。
あくまで(id = "hikari")の外側で新たにマークアップし、そこにclipPath属性を付けるようにしましょう。

完成。

以上で完成です。おつかれさまでした!

全コードはこちら。


<!DOCTYPE html> <html lang = "ja"> <head> </head> <body> </body> </html>

今回のHTMLコードはこちらです。
DOCTYPE宣言から貼ってあるので、コピペでそのまま実行できます。色々といじってみてください。

SVGの良さが出てきた。

以前紹介した記事の内容は、CSSの操作だけでアニメーションしたものがほとんどでした。正直SVG画像をつかわなくとも実現できるものでしたね。
しかし今回はSVG画像ならではの、

・要素の1部のみアニメーションさせる
・アニメーションしている要素のみクリップする

といった、SVGファイルを使ったメリットが浮き彫りになりました。
これからもどんどんSVGアニメーションを作っていきたいと思います。ではまた〜 ♫



関連記事

SVGアニメーション02、画像を宙に浮かべる。

2020.05.22
〽️ 要素を変形させるtransformプロパティ。


要素が画面内に表示されたらアニメーション、Intersection Observer。

2020.06.22
〽️ コピペで試してみてね。












「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧