SVGで扇子のアニメーション。

〽️ ただの扇型」ではない。〽️原型を準備。〽️折りたたみアニメーション。〽️開いた状態を作る。〽️全体をアニメーション。〽️次は柄をつけたい。

ただの「扇型」ではない。

こんにちは、「ふ」です。
今回はSVGで「扇子」を作ってアニメーションさせたいと思います。

単にオブジェクトを円弧上に広げていくだけなら、簡単なのですが........　広がっていく中で「折りたたみ」感を表現するのに、工夫が必要でした。

おめでたいときや、冬休み（←執筆当時）の工作にどうぞ。

原型を準備。

Vectornatorやイラレを使って、原型となるイラストを作成しましょう。
「扇型」の描き方についてはいろんな方法が考えられるのですが、どのベクターソフトでも共通で操作できるものを紹介します。

円を描き、垂直な中心線を引きましょう。
中心線は円の端から端まで。はみ出さないようにしてください。
はみ出したり長さが足りなかったりすると、このあと中心から回転させたときにズレてしまいます。

中心線を２つ複製し、それぞれ＋ー方向に15°ずつ回転させます。

同心円を追加します。
この円は扇子の「骨」と「紙？」の部分の境界線になるので、完成品をイメージして大きさを調整してください。

紙？の部分は「扇面」と呼ぶらしいです（←調べた）。

扇面の「山」と「谷」の１セットを、ペンツールなどを使って⬆︎のように描きます。長方形を描いて変形させても良いかと思います。

円弧の部分は直線で結びました。そのほうが「折りたたみ感」が出ます。

骨を１つと、回転軸（←「要『かなめ』」と言うらしいです）を描きました。
要の円は、始めに描いた円と中心を一致させてください。アニメーションさせるときの基準点として使用します。

全体の大きさを調整します。
扇子は150°まで開くので、１番外側の円の直径がアートボード（のちの可視範囲）に収まるくらいがいいでしょう。

「扇子面の１セット」「骨」「要」の３つを残し、他のオブジェクトは作画時の補助として使用したものなので、削除します。

色をつけました。
「扇子面の１セット」には明暗をつけておくと、それらしくなります。また「骨」のオブジェクトは最背面にしておきましょう。

これで原型は完成です。
SVG形式で書き出し、あとはコーディングで編集していきましょう。

折りたたみアニメーション。

作成した「骨と扇面の１セット」を使って、折りたたみアニメーションを作ってみましょう。
原型のSVGデータを、HTMLに流し込みます。

「要」の円の中心は、全てのオブジェクトのtransform-origin（変形の基準）となります。
各要素にいちいちtransform-originプロパティを指定するのも面倒なので、class名をつけて一括でできるようにしましょう。class名は「kaname」としました。

originをpxで（裏技）。

⬆︎要の円オブジェクトのコードです。このcxとcyの座標が回転軸と成増。
本来であれば、viewBoxの " 0 0 841.9 595.3 " をもとに割合を計算→%値にしてtransform-originに指定するのですが、ちょっとした発見がありました。

.kaname { transform-origin:「「５"419.5"」」px 「「５"521"」」px; }

というように単位「px」を付けて指定すると、そのままSVGにおける座標値として扱われます。
扇子の各部品の基準指定はこれでOKです。

これは正規の方法とは言えないので、後の仕様変更により使えなくなる可能性もあります。
そのときは素直にviewBox値から算出するようにしましょう。

折りたたみを表現。

現在の状態⬆︎です。
扇面のオブジェクト２つには、さらにclass名を追加します。「ougi」としました。

「「３」」 <polygon class="st0 kaname 「「１ougi」」" points="419.5,46.8 542.3,63 464,355 419.5,349.7 "/> 「「３」」 <polygon class="st1 kaname 「「１ougi」」" points="296.8,63 419.5,46.8 419.5,349.7 375.1,355 "/>

扨（さて）、折りたたみ表現。
rotateY（y軸に対しての回転)やskewY（傾斜）など色々試したのですが、最終的にはscaleX（水平方向の拡大/縮小）を採用しました。

.ougi { animation:ougi 4s linear alternate infinite; } @keyframes ougi { from { transform:「「１scaleX(0)」」; } }

キーフレームは「from」の状態だけ指定すればOKです。

２つのオブジェクトはy軸対称になっているので、折りたたみ感が表現できます。

開いた状態を作る。

扇面の１セットができたところで、これを左右に２つずつ、複製して追加しましょう。

SVGの要素は先に記述したものが背面に重なります。扇子が順番どおりに開閉するよう、「マスターの１セット」の前面に２つ、背面に２つ記述します。

コピペしたセットは<g> 〜 </g>で囲んでそれぞれid名「copy1〜4」を付けています。
そしてこれらも「要」を基準に動かすので、class名「kaname」を指定しました。さらに、アニメーションのキーフレームを一括で指定できるよう、もひとつclass名「set」も付けておきます。

現在の状態（アニメーションは一旦OFFにしています）。まだ同じところに重ねられているので、見た目は変化ありません。

１セットあたり30°ずつ回転させましょう。

#copy2 { transform:rotate(「「１-60deg」」); } #copy1 { transform:rotate(「「１-30deg」」); } #copy3 { transform:rotate(「「１30deg」」); } #copy4 { transform:rotate(「「１60deg」」); }

大分それらしくなってきましたね ♫

あとは扇子の外側には、「親骨」というものが付いています。
骨のオブジェクトを２つ複製。１つは全ての最背面に、もう１つは最前面の「要」オブジェクトの１つ後ろに配置しましょう。

<path id = 「「１"oya_usiro"」」 class="st2 kaname 「「５set」」" d="M426.9,553.5h-14.7c-4.1,0-7.5-3.4-7.5-7.5V52.9c0-4.1,3.4-7.5,7.5-7.5h14.7c4.1,0,7.5,3.4,7.5,7.5V546 C434.4,550.2,431,553.5,426.9,553.5z"/> 　「「３〜 masterとcopy1〜4のコード〜」」 <path id = 「「１"oya_mae"」」 class="st2 kaname 「「５set」」" d="M426.9,553.5h-14.7c-4.1,0-7.5-3.4-7.5-7.5V52.9c0-4.1,3.4-7.5,7.5-7.5h14.7c4.1,0,7.5,3.4,7.5,7.5V546 C434.4,550.2,431,553.5,426.9,553.5z"/> 「「３」」 <circle cx="419.5" cy="521" r="11.2"/>

idを「oya_mae」「oya_usiro」とし、さらに先ほどアニメーション用に用意したclass名「set」も付与しておきます。

#oya_usiro { transform:rotate(-75deg); } #oya_mae { transform:rotate(75deg); }

親骨に角度を付けます。
扇面の１ピースの角度は15°なので、左右に.....75°ずつですね？

開いた状態が完成しました。

全体をアニメーション。

それでは全体をアニメーションさせましょう。

一時的にキャンセルさせていた「１セットのアニメーション」を復活させた状態です。

扇子全体を開閉させるアニメーションを実装します。

扇子の部品はすべて、「rotateさせて開いた状態」で作成してきました。したがって色んな角度に開いてはいるものの、「rotateの角度を0°に戻す」という１つのキーフレームにまとめることができます。
開閉させる部品にはclass名「set」を付与していたので、一括で指定します。

.set { animation:set 4s linear alternate infinite; } @keyframes set { from { transform:rotate(0deg); } }

これで完成です。お疲れ様でした！
好みの色などを付けて、楽しんでください。

ロリポップ！の取次店になりました。

〽️ 「ふ」が使ってるレンタルサーバーを紹介します。

次は柄をつけたい。

最後までお読みくださり、ありがとうございました。
今回の扇子のアニメーション。実物の動画を参考にしながら、2Dに落とし込めるようにアレンジしてみました。上手くできましたでしょうか？

今回は仕組みを紹介したかったので無地のオブジェクトを使って進めてきましたが、次回はここに、自由な画像を貼り付けられるようにしたいと思います。

ではまた〜 ♪