フーノページTOP

Vectorator使い方TOP

SVGアニメーションTOP

WEBサイト作り方TOP

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

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

SVGアニメーション、
カメラのシャッターを再現。

〽️仕組み。 〽️「羽根」を作成。 〽️回転アニメーションごと複製。 〽️残り２枚の処理。 〽️お疲れ様でした。

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

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

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

仕組み。

このシャッターの動き、どのような仕組みになっているのでしょうか？

長方形が、１つの頂点を軸に回転。

これを複製 → 角度を付けて重ねていくと、シャッターが開閉するような動きに成増。
「長方形」を重ねるのではなく、「長方形が回転している状況」ごと、重ねていきます。

web上のviewport（可視領域）は、こんな感じです。
余計な隙間ができないように、可視領域に対して長方形は十分な大きさにしておきましょう。

そして。
「この部分はどうなっているのだろう・・」と思った方もいるでしょう。
最後の１枚の先端が、１枚目の根元を隠してしまっています。
ここの処理が今回のポイント。記事の後半で説明しています♫

「羽根」を作成。

回転する長方形を「羽根」と呼ぶことにします。
先づはhtml内にSVG領域を設けましょう。

大きさはご自由に。「ふ」はA4比率としました。
わかりやすいよう、CSSで枠線を付けておきます。

SVG領域⬆︎が確保できました。
コードで羽根を作ります。回転している時に可視領域に隙間ができないように、幅を100%、高さを200%としました。
羽根にはclass名「hane」と、お好みで塗りと線の色を付けておきましょう。

web上ではあくまで可視領域のみ表示されるので、こんな⬆︎感じ。

ですが実際のSVG空間では、可視領域に対して長方形がこのように配置されています。
タグ内で指定したxyの座標、幅や高さも反映されています。

SVG領域の作り方については、コチラ⬇︎の記事で詳しく紹介しています。

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

2021.01.20
positionやz-index指定なし。

ではこの長方形を、左上の頂点を中心に回転させましょう。

① transform-originで回転の中心を指定。<rect>要素のxとy属性は、長方形の左上の座標を示しています。回転軸と一致するため、そのまま使えますね。

② アニメーションは一括指定で記述していますが、animation-direction（アニメーションの方向）で「alternate」を指定しています。繰り返した時に、アニメーションの内容が往復するように成増。

③ transform : rotateで半時計まわりに回転。羽根が全開のときに可視領域から完全に消えるように、プレビューしながら角度を調整しました。

現在このような状態になっています。
これを複製していきましょう。

回転アニメーションごと複製。

今回は羽根6枚バージョンで作っていきます。
先ほど作ったものを複製。viewportの中心を基準に、角度を変えて重ねていきます。

角度を付けるためには、transform-originやtransform : rotateを使うのですが、これらのプロパティは長方形自体のアニメーションにおいて、すでに使用してしまっています。

例えば、

１つの要素に同じプロパティを２重に施す、ということはできません。後に指定した値が採用されるだけです。

ここは長方形をグループ化し、「アニメーションしている長方形」ごと複製・回転させましょう。

１枚目なのでidを「soto1」、classを「soto」としました。
class名を付けたのは、transform-originを一括で指定したかったからです。これを複製して前面に重ねていきます。

id名を順に「soto２〜６」として重ねました。

現在の状態。
まだ同じ位置に重なっているので、見た目の羽根は１枚です。
「#soto2」以降に60°ずつ角度を付けていきます。

これは４枚目までを複製→角度を付けたところです（５、６枚目は紛らわしいので非表示にしています）。

ここまでは、いい感じ。

問題は残りの２枚です。

残り２枚の処理。

その後、同じようにして５、６枚目を重ねた結果がコチラ⬇︎。

何かがおかしい。

〜ですよね。

「アニメーションしている羽根」を順に前面に重ねていくと、最後のほうの羽根の先端が１枚目の前面に被ってしまいます。
６枚目に隠れて見えませんが、５枚目も同じく最初の１枚に被ってしまっています。

羽根の付け根はそのままで良いのですが。
本来羽根の先端は１枚目の背後に回っていなければいけません。

どうする？

〜ここはclipPathで乗り切りましょう。

１枚目に被っている部分が非表示になれば、羽根先が１枚目の背後に回っているように見せることができます。

ということは、「見せてもいい」部分でクリップしてしまえば良いということですね！

クリップパスに使う長方形を描きましょう。

クリップパスのidは「clip」としました。
この長方形で#soto5と#soto6をクリップするのですが、それぞれのsotoグループは事前にtransform : rotateで回転させてしまっています。
直接クリップを施すと、「クリップしたものが回転」してしまいます。
これではうまくいきません。

#soto5と#soto6をさらにグループで囲み（ idを「oosoto」）、そのグループに対してclipPathを掛けます。

クリップできました。あとは、６枚目の羽根先が非表示になってしまっているので、複製して最背面に配置します。

これで完成です。お疲れ様でした！
羽根の向こう側には好きな画像を入れてください、ふふふ。

お疲れ様でした。

最後までお読みいただき、ありがとうございました。
今回の物理カメラのシャッターを作るにあたっては、「どういう動きをしているのか？」というところから入りました。実物のカメラの画像や動画などをあれこれ調べて、それからSVGアニメーションに落とし込んだ形です💧

時間は掛かったけど、やり甲斐がありました。工業技術のすごさにも感心した次第です。
みなさんもリアル世界にあるものをSVGアニメーションに変換してみては？ふふふ。
苦労しますが、すごく勉強になるかもですよ。ではまた〜 ♫