〽️仕組み。〽️コードをHTMLに貼り付け。〽️アニメーションを仕込む。〽️アニメーションをクリップ。〽️全コードはこちら。
⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。
こんにちは、「ふ」です。
タイトルに貼ってあるアニメーション、テキストの内側で白い長方形がアニメーションしていますよね ♪
今回は「アニメーション部分に好きな形でマスクを掛ける」方法を使って、作っていきましょう。
◼︎ コード全体を見たい方は画面右上のmenuボタンから、「全コードはこちら」をクリックしてページ最下部にジャンプしてくださいね。
このアニメーションを作るにあたり、4枚のオブジェクトを重ねています(背景は全て透過)。
上から、
・テキストの黒い部分
・クリップするためのパス
・白長方形 ←これをアニメーションさせる
・青い外枠
となっています。
それらを上のような順番で重ねます。
お好みのCGアプリで画像を作って書き出しましょう。
clip.svg
画像作成はイラレやVectornator、winユーザならinkscapeなどのベクターグラフィック用のものを使うと便利です。
VectornatorのSVG書き出し方法は⬇︎の記事で紹介しています。
今回はSVG内のオブジェクトを個別に操作したいので、HTMLファイルには参照表記ではなく、<body>〜</body>内にインライン表記で貼り付けます。
こちらがHTMLファイルにSVGコードを貼り付けたもの。
4つのオブジェクトが記述されていますね。それぞれにid属性を付けておきました。
どれがどれだかわからない時は、コメントアウトさせてプレビューしてみましょう。
試しに1箇所コメントアウトしました。
◼︎ プレビュー
プレビューして表示されなくなったものが、「そいつ」です。
先ほどコメントアウトしたコードは「黒い部分」のオブジェクト、ということに成増ね。
オブジェクトの正体が判明したら、コメントをつけておきましょう。コードの視認性が上がるので後々便利です。
今回アニメーションしたいのは、白い長方形のオブジェクト(id = "hikari")でした。
CSSでidを参照し、animationさせます。
◼︎ タイムライン
アニメーションの内容としては左から右へ動いていく、これの繰り返しなので、transform:translateX( )を使用します。
◼︎ CSS
SVG画像内の白長方形の位置はテキトーに定めているので、「%」の値はプレビューしながら調整しました。
◼︎ プレビュー
その結果がこちら。
当ページ、背景が白っぽくてわかりづらいので背景色を付けてあります。
白長方形がテキスト枠からはみ出してしまっていますね。
これをマスクしていきましょう。
SVGコード内でオブジェクトをクリップする方法は以下の手順。
・クリッピングパスとして使用したいオブジェクトを<clipPath>〜</clipPath>でマークアップ、その際id名を付けておく。
・クリップしたい対象のオブジェクトを<g>〜</g>でマークアップ、id属性を追加し先程のオブジェクトを参照させる。
<g>の「g」は「グループ」という意味ですね。
実際にやってみます。クリッピングパスとして使うオブジェクトは(id = "clip")の部分でした。
clipPathのid名は"cut"としました。<path>タグのすぐ外側でマークアップするようにしましょう。
アニメーションさせている白長方形の外側を<g>〜</g>で囲み、先ほどのclipPathを適用させます。
白長方形のコード内に<rect>が2つあるのは、「ガウシアンぼかし」を施しているためです。
ここで注意。(id= "hikari")タグの中にclipPath属性を付けないようにしてください。この部分はCSSでアニメーションを仕込んでいるので、クリップパスもアニメーションしてしまうことに成増。
あくまで(id = "hikari")の外側で新たにマークアップし、そこにclipPath属性を付けるようにしましょう。
以上で完成です。おつかれさまでした!
今回のHTMLコードはこちらです。
DOCTYPE宣言から貼ってあるので、コピペでそのまま実行できます。色々といじってみてください。
以前紹介した記事の内容は、CSSの操作だけでアニメーションしたものがほとんどでした。正直SVG画像をつかわなくとも実現できるものでしたね。
しかし今回はSVG画像ならではの、
・要素の1部のみアニメーションさせる
・アニメーションしている要素のみクリップする
といった、SVGファイルを使ったメリットが浮き彫りになりました。
これからもどんどんSVGアニメーションを作っていきたいと思います。ではまた〜 ♫
関連記事
SVGアニメーション02、画像を宙に浮かべる。
2020.05.22
〽️ 要素を変形させるtransformプロパティ。
要素が画面内に表示されたらアニメーション、Intersection Observer。
2020.06.22
〽️ コピペで試してみてね。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。