SVGアニメーション、エンドレスに流れる画像。

〽️仕組みとタイムライン。〽️コードを使って複製。〽️初期値はease。〽️全コードはこちら。





⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。

こんにちは、「ふ」です。
SVGアニメーション、今回はヘッダにあるような画像がエンドレスに流れる仕組みを作っていきたいと思います。

タイトルや中見出しのちょっとした装飾に使えそうですね .. かな？
気をとりなおして作っていきましょう。

◼︎ コード全体を見たい方は画面右上のmenuボタンから、「全コードはこちら」をクリックしてページ最下部にジャンプしてくださいね。

仕組みとタイムライン。


kumo.svg

今回使ったSVG画像はこちら。この中にある、雲と山だけをエンドレスで左から右へ動かしていくことにします。

オブジェクトごとにアニメーションを仕込めるのがSVG画像のメリットですね。



◼︎ タイムライン。

タイムラインのイメージです。

・動かしたい画像を複製し、アニメーション開始時点でviewbox（SVGの可視範囲）１つ分、左側に配置。

・アニメーションが進行するにつれて、元の画像と複製した画像が右へと移動。

・アニメーション終了時点で、複製した画像が元の画像があった位置に来るようにする。

・これをループさせる。

そうするとアニメーション開始時と終了時におけるviewbox内の見た目は同じものと成増。
〜これを繰り返すことで、画像が途切れたりせずに「連続して動いている」ように見せる、という仕組みです。

コードを使って複製。


扨（さて）HTMLファイルに画像を配置しましょう。
上のように、画像作成時点でアートボードの外側に複製した雲と月を配置しても構いませんが・・



もう１つの方法。

別の方法があります。CGソフト上でオブジェクトをずらして配置するのではなく、SVGコードを操作して雲と山を複製→可視範囲の外側に追いやりたいと思います。
今回のケースにおいてはこのやり方のほうがお手軽です。

ということでCGソフト上ではこの状態のまま、SVGで書き出します。 書き出したコードをHTMLファイルの<body>〜</body>内に貼り付けましょう。

<svg version= ・・・ 〜〜〜略〜〜〜 「「３<!--背景-->」」 <rect 「「１id="back"」」 class="st0" width="841.9" height="595.3"/> 「「３<!--月-->」」 <circle 「「１id="moon"」」 class="st1" cx="693.6" cy="132.7" r="78.7"/> 「「３<!--雲-->」」 <g 「「１id="cloud"」」> <path class="st2" d="M744,186.9h-61.7v-16.7・・ 〜〜〜略〜〜〜 /> </g> 「「３<!--山-->」」 <g 「「１id="mt"」」> <path class="st5" d="M231.9,468.3c・・ 〜〜〜略〜〜〜 /> </g> </svg>

こちらが貼り付けたコードです。それぞれのオブジェクトにid属性を付けておきました。
ここからアニメーションさせる雲と山だけを複製しましょう。



「「１」」 <g id="cloud"> <path class="st2" d="M744,186.9h-61.7v-16.7・・ 〜〜〜略〜〜〜 /> </g> 「「３<!--山-->」」 <g １id="mt"> <path class="st5" d="M231.9,468.3c・・ 〜〜〜略〜〜〜 /> </g> 「「１」」

まづは雲と山の部分をさらに<g>〜</g>で囲んでグループ化。id名を「mae」としました。

「「１」」 「「３<!--雲-->」」 〜〜〜略〜〜〜 「「３<!--山-->」」 〜〜〜略〜〜〜 「「１」」

グループ化したものをコピー→SVGタグ内に追加で貼り付けて、今度はid名を「usiro」としました。

イメージとしてはこんな感じです。１度ブラウザで実行してみましょう。

◼︎ preview


現在の状態はこのように成増。
複製した雲と山が見当たりませんが、コピー元の雲＆山に重なっている状態です。

初期値はease。


ではCSSをつかってアニメーションを仕込んでいきましょう。コピー元の雲＆山（id = "mae"）と複製した（id = "usiro"）、それぞれ別のアニメーションを指定します。

◼︎ CSS

#mae { animation:mae 8s infinite; }

まづは「mae」から。

アニメーション名：mae
持続時間：8秒
繰り返し：無限

とします。次にキーフレームを書きましょう。

@keyframes mae { 0% { transform:translateX(0%); } 100% { transform:translateX(100%); } }

水平移動させたいので、transform:translateXプロパティを使用しています。

アニメーション開始時は定位置（0%）、終了時に完全に可視範囲の右外部（100%）に移動するよう、値を指定しましょう。

一方複製した「usiro」。
開始時は完全に可視範囲の左外部（-100%）、終了時に定位置（0%）にアニメーションを指定します。

これで「mae」と「usiro」がうまく入れ替わるはずです。CSSを書いていきましょう。

#usiro { animation:usiro 8s infinite; } @keyframes usiro { 0% { transform:translateX(-100%); } 100% { transform:translateX(0%); } }

アニメーション名は「usiro」とし、持続時間と繰り返し指定は「mae」と同じです。
扨（さて）、うまくいきますかな？プレビューしてみます。

あれ？よく見ると・・

うまく行っているようだがしかし・・
動きをしばらく見ているとわかるのですが、流れが一定の速度になっていません。早くなったり遅くなったりしていますね・・



〜CSSのanimationプロパティには、先ほど書いた持続時間や繰り返しなど、いくつかの値を指定することができるのですが、そのうち

animation-timing-function:

というものがあります。
これはアニメーションの進行具合を指定する値で、実はこの初期値（何も指定していない状態）だと「ease（始めと終わりをゆっくり）」になっているんですね。

平均的に進行させたい場合には、「linear（一定）」を指定してやる必要があるのでした。CSSコードに追記します。

#mae { animation:mae 8s 「「１linear」」 infinite; } #usiro { animation:usiro 8s 「「１linear」」 infinite; }

プレビューしてみましょう。

一定の速度で、山と雲が流れるようになりました。
これで完成です。お疲れ様でした！

全コードはこちら。


<!DOCTYPE html> <html lang = "ja"> <head> </head> <body> <!--背景--> <!--月--> <!--雲--> <!--山--> <!--雲--> <!--山--> </body> </html>

今回のHTMLコードはこちらです。
DOCTYPE宣言から貼ってあるので、コピペでそのまま実行できます。色々といじってみてください。


〜SVGアニメーションのチュートリアル記事も数を重ねるごとに、コードを直接操作する機会が増えてきました。

コード操作に慣れない方もいらっしゃるかも..ということで、「SVGコードの構成」についての記事もいずれアップしたいと考えています。
最後までお読みくださりありがとうございました。ではまた〜 ♪



関連記事

SVGアニメーション02、画像を宙に浮かべる。

2020.05.22
〽️ 要素を変形させるtransformプロパティ。


SVGアニメーション06、アニメーションに合わせてテキストの色を反転。

2020.07.15
〽️ ３つの長方形を動かします。


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

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










「ふ」です。

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