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

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







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

こんにちは、「ふ」です。
SVGアニメーションチュートリアル2回目は、「宙に浮かんだような画像」の表現に挑戦したいと思います。ではやっていきましょう。

キーフレームと作戦。


「画像を宙に浮かべる」ためのキーフレームを考えていきます。

0% : 定位置
⬇︎
50% : 少し下に沈める
⬇︎
100% : 定位置に戻す
⬇︎
ループ。

画像を少し上下に動かし続けることにより、空中で浮いているような表現を目指します。

次に、このキーフレームを実現させるための作戦をたてます。

 作戦 

1.SVGをHTML内にインライン表記または参照表記。

2.CSSでSVGを参照し、transformプロパティを使って上下させる。

3.自然な動きになるよう、タイミングなどを調整。

今回においてもSVG画像全体にアニメーションを仕込むので、HTML内には参照形式で貼っても問題ありません。
画像を上下させるアニメーションはCSSのtransformプロパティを使いましょう。





 

SVGを配置。


◼︎ fu.svg

HTMLの<body>〜</body>内にSVG画像を貼り付けます。CSSで参照する時のために「ani_02」とクラス名を付けました。

HTML(参照表記)

<img class = 「「1"ani_02"」」 src = "fu.svg">

HTML(インライン表記)

<svg class = 「「1"ani_02"」」 version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="588.5px"> 「「3〜略〜」」 </svg>

外部ファイルを参照させる場合はimgの属性に、インライン表記の場合はsvgの属性にclass名を付けます。
参照表記を使えば、SVG以外の.png画像などにも応用できますね。




そのあと、CSSで参照してサイズなどを整えます。目的に合った配置を仕込んでください。

CSS

.ani_02 { width:50%; margin-left:25%; }

ブラウザで表示します。

ブラウザ

表示できました。CSSアニメーションを仕込んでいきましょう。





 

transformプロパティ。


「ani_01」のCSS内にアニメーションプロパティを追加しましょう。

animation-name : ani_02 animation-duration : 2s animation-itertion-count : infinite

今回指定するのは

・アニメーション名 「ani_02」
・継続時間 2s
・繰り返し回数 infinite(無限)

これらをショートハンドで記述します(そのほうが楽なので)。

CSS

.ani_02 { width:50%; margin-left:25%; 「「1animation: ani02 2s infinite;」」 }

ani_02セレクタにプロパティを記述しました。 次にこの「ani_02」にキーフレームを追加します。ここで使うプロパティと値がこれ⬇︎。

transform : translateY( )

CSSに用意されているtransformプロパティを使えば、移動などを含めた「変形」を指定することができます。
これから皆さんがwebアニメーションを展開していく上で頻繁に利用することになりそうですね。

値として記述するtranslateY( )は、要素のY方向の位置を指定します。アニメーション進捗のタイミングに合わせてこのプロパティを変化させれば、画像が上下している表現ができるはずです。

キーフレームは、「.ani_02」セレクタの外部に別途記述することにも注意してください。

CSS

.ani_02 { width:50%; margin-left:25%; animation: ani02 2s infinite; } 「「1@keyframes ani02 { 0% { transform: translateY(0); } 50% { transform: translateY(-4%); } 100% { transform: translateY(0); } }」」

はじめに考えたキーフレームに従い、アニメーションの中間地点(50%)で画像を少し下にしずめ、最終的に(100%)元の位置に戻しています。
結果をみてみましょう。

result

このようになりました。
いちおーアニメーションとしては成功しています。

違うな・・風に揺れているというよりは、「自力で上下している」といった感じですね。





 

timing-function。


自然に風に揺れている表現‥ ここは前回と同じくanimation-timing-functionに頼りましょう。

animation-timing-function : ease-in-out;

値を「ease-in-out」とすると、「開始時はゆっくりと始まって、 次第に本来のスピードに、そして終了時はまたゆっくりと終わる」という動きになります。
これを先程のanimationプロパティのショートハンドに追加してみましょう。

CSS

.ani_02 { width:50%; margin-left:25%; animation: ani02 2s 「「1ease-in-out」」 infinite; }

扨(さて)結果はどのようになったか、見てみます。

result

「ふわふわ」感が出ましたね!





 

広がってきます。


今回は画像が宙に浮いているような表現に挑戦しました。うまくできましたでしょうか?
こうなってくるともっと表現を増やしてみたく成増ね。静止した背景を置いたり、影をつけてそれもアニメーションさせてみるとか・・

しっくりしたものが出来たらまたその方法を紹介しますね ♩ ではまた〜











関連記事

SVGアニメーション04、軸を基準に拡大/縮小 〜

2020.06.13
〽️ 「切実な一言」に使おう。


SVGアニメーション03、中心を基準に拡大/縮小 〜transform:scale( )。

2020.06.06
〽️ 映画のタイトルのような‥












「ふ」です。

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

🐧 twitter 🐧