SVGアニメーション 作り方。
⬆︎SVGついてのまとめページはこちら。
こんにちは、「ふ」です。
SVGアニメーション、今回は3D回転に挑戦してみましょう。
ヘッダ部分の画像のように、サイコロが回転するようにオブジェクトが切り替わるのものを作っていきたいと思います。
画像は前回と同じくx軸に対して回転しているのですが、その回転軸はオブジェクトに対してz方向に少し後ろに配置されています。
そして。
当サイトではSVGアニメーションのチュートリアルを中心に紹介しているのですが、現時点（2020年10月）ではSVGは３Dに対応していません💧
というわけで、実装にはCSSを使って複数のSVG画像を重ね合わせ、アニメーションを施しています。
ということは、普通の.pngや.jpgでも実装可能なので、SVG画像に留まらず是非活用の場を広げていってください。ちょっぴりベクトル要素的なものも登場しますが、頑張っていきましょう。
rotate3d( )。
CSSで3D回転をするには、transformプロパティの値にrotate3d()を指定します。
「〇〇deg」は単なる回転角度ですから、いいでしょう。 では「x,y,z」はなんなのでしょうか。
3D空間での回転軸の角度は、原点から始まるベクトルの終点を指定することで決定します。
「ベクトル」と聞いて拒絶反応を示した方、ご心配なく。
ここでは「矢印」と考えていただいて差し支えありません。
ひとまづ2D平面上で考えてみます。
原点から出発した「矢印」の到達点を( x : 1 y : 1 )にしてみます。
これで2Dにおける回転軸の角度が決まりました。
さらにこれを3Dに展開。
z方向の到達点を( z : 1 )にします。
3D空間の回転軸の角度も決まりました。
このようにして、「矢印」の到達点の座標（x,y,z）を順にカンマで区切って記述します。
今回はx軸を中心に回転させるので、各成分の値は( 1, 0, 0 )ですね。
扨 （さて）回転軸の角度は決まりましたが、変形の基準はまだデフォルトのままです。
このままではその場で回転してしまうので、軸の位置（変形の基準）のz成分を後方に移動させます。
それには、transform-originで指定します。
これも x,y,z の3D仕様で。
x成分とy成分は画像の中心、z成分だけをマイナスの値に指定します。
これが現在のイメージです。
次は画像を準備・配置していきましょう。
３枚のSVGを重ね合わせる。
画像を３枚準備します。１枚目と３枚目は同じものです。
画像サイズは揃えておいてください。
◼︎ HTML
① ３つの画像をそれぞれ個別のSVGファイルとして書き出し、HTMLの <body> 〜 </body> 内に参照表記します。冒頭で述べたように１つのSVGファイルにまとめて書き出すと、3Dアニメーションを実装することができません。
〜それぞれのファイル名をそのまま画像のid名としました。
② そして３つの画像を重ねるための下準備。外側を <div> 〜 </div> で囲んでidを付けておきましょう。
〜「svgs」としました。
◼︎ CSS
CSSです。ここで３枚の画像を重ね合わせ、ブラウザ上で１枚の画像のように表示させます。
③ #svgsの子要素である３つのimgをまとめてセレクト。
それぞれをposition:absoluteで絶対配置にし、topの値を揃えます。
④ imgにabsoluteを指定したので、このままではルートである <body> 要素に対して絶対配置がはたらくため、隣接する要素を侵食してしまいます。
そこで親要素の#svgsのpositionをrelativeに。
⑤ そして前セクションの通り、変形の基準点をxy平面の中心、zは少し後方に指定しました。
zの値はレスポンシブを考慮して相対値（em）にしてあります。
◼︎ ブラウザ
現在のブラウザ表示はこのようになっています。
アニメーションを仕込んでいきましょう。
アニメイション。
ではアニメーションをコーディング。
サイコロが転がるような感じで画像が切り替わっていくようにしたい。そのタイムラインを考えてみます。
SVGアニメーション、裏表を見せながら回転。
2020.10.09
〽️ X軸を基準に回転。
⬆︎前回記事と同じく、画像が水平になったとき、見えなくなる性質を利用します。
◼︎ ０％。
「ja_1」が正面を向いた状態。「en」と「ja_2」はサイコロでいうところの天井面に位置し、水平なので「見えない状態」です。
◼︎ 50%。
「ja_1」はサイコロの底面へと回転して見えない状態に。「en」が回転してきて正面にきます。「ja_2」は天井のまま。
◼︎ 100%。
「ja_1」はそのまま。「en」は底面まで回転して見えなく成増。「ja_2」が回転してきて正面に。
〜このような作戦で、コードを書いていきましょう。
◼︎ CSS
３つのSVG画像それぞれに別のアニメーションを仕込みます。
アニメーション名：それぞれのid名
継続時間：6s（共通）
繰り返し：無限大（共通）
〜タイムラインも書いていきます。
計画したイメージ通り、回転角度を記述していきます。
〜コーディングは以上で完了です。結果をみてみましょう。
完成です。お疲れ様でした！
3D対応してほしい〜。
最後までお読みいただき、ありがとうございました。
ところで「回転の向き」について。
「ふ」が調査したところ、「 transform:rotateの回転方向は軸に対して時計回り 」とのことだったのですが、実際はその限りではありませんでした。それにより、回転角度を負の値にしてみたりの調整を施しています。
「ふ」のコーディングに問題があるのかそれとも・・
今回はCSSでSVG画像を重ね合わせての3Dアニメーション。やや強引な方法でした。
絶対配置なども使ったので、SVGよりもCSSで少し苦労しましたね。早くSVGも３Dアニメーションに対応してほしい〜と思った「ふ」でありました。
皆さんも挑戦してみてください。ではまた〜 ♪
関連記事
SVG、線を描くアニメーション。
2020.09.23
〽️ 破線のプロパティをつかいます。
SVGでモーションパス（基本編）。
2020.08.18
〽️ 好きな軌道で画像を動かす。
SVGとCSSで作る、吹き出しアニメーション。
2020.08.10
〽️ 吹き出しの形は自由自在。
SVGアニメーション05、アニメーションしている部分をクリッピング(マスク)する。
2020.07.06
〽️ テキストの内部だけアニメーション。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。