SVGアニメーション 作り方。
⬆︎SVGついてのまとめページはこちら。
こんにちは、「ふ」です。
今回はSVG領域を使って、画像が見開きページのように切り替わるアニメーションを作っていきます。
２枚の画像を用意するだけで実現します。皆さんもチャレンジしてみてください。
「ふ」が準備した画像はこちら⬆︎。「晴れ」画像と「雨」画像です。
画像が写真の場合は問題ないのですが、
イラストの場合には背景を透過させるとうしろの画像が見えてしまいます。白などで塗りつぶしておくようにしてください。
今回はSVGの色々な機能を使って実装するので、初心者の方にはかなりの学習契機となるでしょう。是非試してみてください。
手っ取り早く試したい方は、ページの最後に全コードも貼っています。そちらをお使いください。
基本の仕組みを考える。
「見開き」の動きを表現するためには画像をY軸回転させるのですが、
今回のアニメーションはSVG領域の中で行います。
SVGは3Dに対応していないため、「見開き」の仕組みを作るには少しばかり工夫が必要です。
3D非対応、というのは、「重ね順が厳守されてしまう」ということです。
例えば雨画像を前面に置いて、Y軸回転させたとき。
思惑としては、雨画像の半分が晴れ画像の後ろに回り込むはず。
しかし実際には「重ね順の厳守」により晴れ画像の前面で回転してしまいます。
実際にアニメーションさせてみました。
雨画像の半分が晴れの後ろに回り込むことなく、「重ね順が厳守」されていますね💧
対策。
ここは画像をそれぞれ２分割して、半分だけをアニメーションさせることにしました。
キーフレームは以下⬇︎のようにいきたいと思います。
はじめは晴れの左右を表示。
実はこのとき、雨の左半分は90°に立ち上げているのですが、画面に対して垂直なので実質非表示になっています。
雨の右半分は、晴れ右半分の後ろに隠れています。
晴れの右半分を立ち上げていきます。
90°（実質非表示）になったところで固定。
それと同時に、垂直に立ち上げていた雨の左半分を倒していきます。
完全に倒れたところでアニメーション終了。
これでうまくいくはずです。
画像を配置して作っていきましょう！
半分の画像を作る。
扨（さて）左右半分の画像を用意することになりました。
‥手作業で作ってもいいのですが、せっかくSVGを使っているので、長方形でクリップしてしまいましょう。
HTML > body
先づHTMLの <body> 〜 </body> 内にSVG領域を確保しましょう。
<svg>タグを記述して、viewBox属性（基準となる座標）を指定してください。A4サイズで作りました。
svg
タグの中に画像を置きます。
CSS
SVG領域をてきとーにサイズ調整。
中に読み込ませるimageのサイズを統一するため、「width:100%」に指定しておきました（読み込ませる画像の縦横比によっては、「height:100%」のほうが良い場合があります）。
SVG領域の中に晴れ画像が配置されました。
クリップに使う長方形はコードで直接作ることにしましょう。
<svg>タグのviewBox属性に注目。
いま「0 0 297 210」となっていますが、これはSVG領域の座標を表しています。
X軸：0〜297
Y軸：0〜210
という意味です。
半分サイズの幅の長方形を左右それぞれ作成し、元画像をクリップしてしまいましょう。
svg
左半分の長方形（rect）を作成します。
始点の座標
x：0
y：0
幅と高さ
width：198.5（横領域の半分ですね）
height：219（高さはそのまま）
見やすいよう色を付けます。
fill（塗り）：yellow
領域内に幅半分の長方形が描画されました。SVGコードでは、後に記述された要素が前面に表示されます。
長方形をclipPathタグに定義します。
svg
<clipPath> タグで <rect> を囲みます。idを「leftclip」としました。
fill（塗り）属性は不要なので外します。
svg
晴れ画像にclass属性「left」を指定します。
CSS
CSSで呼び出し、先ほどの「leftclip」でクリップ。
晴れの左半分だけが表示される画像ができました。
このあとは、
・晴れ画像を２枚、雨画像を２枚
・左半分のクリップ用長方形、右半分のクリップ用長方形
を<svg>タグ内に配置してCSSでクリップ。最終的に晴れ/雨の左右半分の画像４枚を作成します。
svg
CSS
右側クリップ用の長方形。幅や高さは左側用と同じですが、始点のX座標が「148.5」、すなはちSVG領域の中央に指定しています。
４枚の画像が準備できました。
アニメーションさせる「晴れ右」と「雨左」を前面に、動かさない「雨右」「晴れ左」は背面に置くようにしましょう。
アニメイション。
ではいよいよ、アニメーションさせていきます。
svg
動かすのは「雨の左」と「晴れの右」なので、それぞれid名「ameL」「hareR」としました。
CSS
SVG要素の変形の基準点は、「左上」がデフォルトです。
なので、「中心」に指定し直しておきます。
CSS
アニメーションのタイミングに関する指定を行います。
・アニメーション名：ameL/hareR
・継続時間：2s
・進行具合：linear（直線的に）
・方向：alternate（交互に）
・繰り返し：infinite（永遠）
〜ポイントは「アニメーションの方向：alternate」です。
これを指定すると、順方向に再生/逆方向に再生が繰り返されます。結果的に「ページをめくったり戻したり」が繰り返されるため、往復のためのキーフレームを指定する手間が省けます。
CSS
先にお話しした「仕組み」を思い出してください。
アニメーション開始時、「雨左」は垂直に立ち上げられていて、実質非表示の状態です。
「晴れ右」は開始と同時に立ち上がり始め、25%の時点で垂直（非表示）に。それと入れ替わりで「雨左」を倒し始めます。
50%の時点で倒し完了。残りの１s間は雨画像を静止したままにしました。
結果はこの⬆︎ように。
うまくできましたでしょうか？
ロリポップ！の取次店になりました。
もう一工夫。
ひとまづはお疲れ様でした。
「これで完成！」でも良いのですが、もう少し立体感を出していくための小ワザをここでは紹介します。
◼︎ 傾きをつける〜skewY。
現在、真正面から「冊子」を見ている状態といえます。
リアル世界では、冊子は自分より少し前方にあるため、立ち上げ中のページは少し傾いて見えるはず。
transform:skewYをキーフレームに追加し、「傾き」を付けてみましょう。
CSS
20°ほど角度をつけることにしました。
左右対象に傾斜させるため、「雨左」は＋方向に、「晴れ右」はマイナス方向に指定しています。
傾きをつけることができました。
しかし何だか、それっぽくない・・
SVG領域の制限により、ページをめくるときの「←」の部分が見えなくなってしまっているんですね。
CSSでoverflowを「visible」にして、表示できるようにして差し上げましょう。
CSS
これで「それっぽく」なってきましたね♪
隣接する要素への配慮として、SVG領域の上部は余白を十分に取るか、z-indexを調整してください。
◼︎ 影も付けましょう。
さらに。ページをめくるときに影を落としてみます。
幅半分サイズの長方形をコードで描いていきます。
SVG
・id名：「kageL」「kageR」
・幅と高さ：SVG領域いっぱいでOK
・class指定でそれぞれ「left」「right」とすることでクリップパスが適用され、幅が半分サイズに成増。
・fill（塗り）：gray
・fill-opacity（塗りの不透明度）：0.4
影を落とすことができました。
影の「重ね順」に注意してください。
アニメーションさせる「晴れ右」「雨左」よりは背面に、動かない「雨右」「晴れ左」よりは前面に配置します。
要素の記述順を調整しましょう。
そして影もアニメーションさせます。ページの立ち上がりに応じて幅と不透明度を変化させましょう。
CSS
rect（長方形）には一括で、変形の基準点を中央に指定します。
左右の影はページの立ち上がりに合わせて水平方向に伸び縮みし、90°になったときには不透明度が0になるように指定しました。
影のアニメイションにも成功。〜今度こそ完成です。
お疲れ様でした！
挑戦は続きます。
今回の全コードはこちら⬇︎。htmlファイルをまるっと貼っています。
◼︎ mihiraki.html
〜今回はやることがかなり多く、長記事となりました。最後までお読みいただき、本当にありがとうございました。
「ふ」の挑戦はまだ続きます。次はユーザイベントに対応させたり、もっと多くの画像を使った「見開きアニメーション」を作ってみたいと思います。
完成次第また記事にさせていただきます。そのときまたお会いしましょう。ではまた〜 🎵
関連記事
SVG モーフィングが動かない！
2021.01.11
３つの確認ポイント。
SVGでWeb Animations API。
2020.11.12
〽️ ネイティブJavaScriptでのアニメーション。
SVG、use要素を使ったモーションパス。
2020.09.07
〽️ ポイントは‥「マイナスの遅れ」。
SVGアニメーション05、アニメーションしている部分をクリッピング(マスク)する。
2020.07.06
〽️ テキストの内部だけアニメーション。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。