clip-pathをアニメーションさせる。

〽️配置とクリップ。 〽️アニメーション。 〽️合成させる。 〽️もっとやれそうだ。





image { clip-path:url("〇〇"); } - - - - - - - - - - - - - - <clipPath id = "〇〇"> <内容/> </clipPath>

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

こんにちは、「ふ」です。
以前SVGで、「アニメーション部分をクリップする」というのをやりました⬇︎。

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

2020.07.06
〽️ テキストの内部だけアニメーション。


今回はその逆です。「クリップに使っている図形自体」をアニメーションさせてみたところ、とても楽しくなったので紹介したいと思います。

単にclip-pathを掛けるだけならCSS単体でも可能ですが、<body>内にSVG領域を設けて、そこに画像もclip-path用の図形も配置したほうが断然扱いが良くなります。

自由度の高い環境で楽しくやりましょう♪

配置とクリップ。


■ fu.png

画像を用意しました（背景は透過しています）。
HTMLの<body>〜</body>内にSVG領域を作り、画像を配置します。今回もA4比率にしました。

■ HTML

<body> <svg viewBox = "0 0 297 210"> 「「１<image id = "fu" xlink:href = "fu.png"/>」」 </svg> </body>

画像にはid名「fu」を付けています。

■ CSS

svg { display:block; width:60%; margin:0 auto; } image { 「「１width:100%;」」 height:auto; }

SVGのスタイルはお好みで。
imageの幅は、SVG領域に合わせています。

領域内に、clip用の長方形を追加してみましょう。

■ SVGタグ内

<svg viewBox = "0 0 297 210"> <image id = "fu" xlink:href = "fu.png"/> 「「１<rect width = "100%" height = "50%"/>」」 </svg>

長方形が追加されました。今はまだclipPathとして定義されていないので、実際に描画されてしまっています。
CSSで呼び出せるようにidも付けて、clipPathを定義しましょう。
やり方はタグで囲むだけなのですが、<svg>タグ内には「clipPath」とキャメルケースで表記する点に注意してください。

■ SVGタグ内

<svg viewBox = "0 0 297 210"> <image id = "fu" xlink:href = "fu.png"/> 「「１<clipPath id = "clip">」」 <rect width = "100%" height = "50%"/> 「「１</clipPath>」」 </svg>

CSSで画像をセレクトし、クリップします。

■ CSS

#fu { 「「１clip-path:url(#clip);」」 }

これで画像がクリップされました。パスの内側だけが表示され、外側は透過されています。






HTMLで画像を重ねる、便利な方法。

2021.01.20
positionやz-index指定なし。


SVG領域に画像を読み込ませる方法は、コチラ⬆︎の記事で紹介しています。参考にしてください。

アニメーション。


ではクリップした長方形自体をアニメイションさせます。
今回は単純な動きなので、CSSを使いました。

クリップパスが、画面の外から外へ上下していくアニメーションにしました。
長方形の高さはSVG領域の50%なので、「-50%」からスタートして「100%」まで縦に移動させます。

CSSでクリップパスをセレクトし、アニメーションのタイミングを定義します。

■ CSS

#clip { 「「１animation:clip 3s linear infinite;」」 }

・アニメーション名：clip
・継続時間：3s
・変化の度合い：直線的に
・繰り返し：無限

キーフレームを設定します。

■ CSS

@keyframes clip ｛ bb0% ｛ bbtransform:translateY(-50%); bb｝ bb100% ｛ bbtransform:translateY(100%); bb｝ ｝

結果はこのように。
「のぞき窓」が動いているみたいで楽しいですね！

合成させる。


とりあへずは動かすことができました。ただ、これだけではちょっとシンプルですね。
「動くクリップパス」をもう１つ合わせてみます。

ただし１つの画像に２重にクリップを掛けると、打ち消しあって元画像がほとんど見えなくなってしまいます。なので、「画像とクリップ」をもう１セット用意します。

■ gray.png

せっかくなので（←？）グレースケールの画像「gray.png」にしました。
左上にある、1/4サイズの長方形でクリップし、Z軸を中心に回転させます。

■ SVGタグ内

<svg viewBox = "0 0 297 210"> 「「１<image id = "gray" xlink:href = "gray.png"/>」」 <image id = "fu" xlink:href = "fu.png"/> <clipPath id = "clip"> <rect width = "100%" height = "50%"/> </clipPath> 「「１<clipPath id = "clip2"> <rect width = "50%" height = "50%"/> </clipPath>」」 </svg>

■ CSS

#gray { 「「１clip-path:url(#clip2);」」 }

「gray.png」は、最初の画像の背面（コード的に上の位置）におきました。clipPath要素は描画されない要素なので、特に記述順に制限はありません。

ここからアニメイションさせます。

■ CSS

#clip2 { 「「１animation:clip2 15s linear infinite;」」 「「４transform-origin:center;」」 }

・アニメーション名：clip
・継続時間：15s
・変化の度合い：直線的に
・繰り返し：無限


そして注意したいのが、SVG座標の原点は領域の左上に位置しています。
領域の中央で回転させたいので、transform-origin（変形の基準）を「center」に指定しましょう。

あとはキーフレームです。

■ CSS

@keyframes clip2 ｛ bb0% ｛ bbtransform:rotateZ(0deg); bb｝ bb100% ｛ bbtransform:rotateZ(1turn); bb｝ ｝

合成されたアニメイションができました！
画像の重ね順やスピードを変えたりして、いろいろ試してみてください。

もっとやれそうだ。


最後までお読みいただき、ありがとうございました。
２つのアニメーションを合成。作ってみた感触では、それぞれのdurartion（継続時間）を極端にずらしたほうがしっくりとしたものができました（１つは3s、もう１つは15s）。

今回はclipPathの図形をコードで描画しましたが、Vectornatorやイラレなどのベクターソフトを使えば、テキストやイラストの形状でクリップすることももちろん可能です。
‥となると、もっともっと色んなことができそうですね！是非やってみてください。ではまた〜 ♪



SVGアニメーション、mask要素で手書き風テキスト。

2020.10.01
〽️ <mask>要素について理解しましょう。


SVGアニメーション01、画面内にフェードインさせる方法。

2020.05.10
〽️ 新シリーズはじめました。



ページめくりアニメーション 作り方。

2021.02.02
画像を読み込むだけで実装。










「ふ」です。

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