SVGアニメーション04、軸を基準に拡大/縮小 〜transform:scale(x,y)。

〽️ タイムラインと配置。 〽️ scale(x,y)。 〽️ うごかしてみる。 〽️ Y軸でもやってみる。





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

こんにちは、「ふ」です。
前回は画像の中心点を基準に拡大/縮小するアニメーションを紹介しました。





扨(さて)今度は、ヘッダ部分に表示されているような「軸」を基準にして大きさの変わるアニメーションを実装してみたいと思います。一緒に作っていきましょう。



タイムラインと配置。


ヘッダ部分に表示したアニメーションはx軸を基準として、画像が徐々に拡大していくものです。
まずはこれを目指そうと思います。タイムラインを考えましょう。

0% : 何も見えない状態
⬇︎
少しずつ不透明度を上げながら、x軸を基準に画像が拡大されていく。
⬇︎
100% : 最終的に表示したい画像サイズ、不透明度100%
(⬇︎)
ループ(お好みで)。

前回のタイムラインとほぼ同じ流れです。画像の拡大とともに、不透明度を徐々に100%に近づけていくことにしました。

◼︎ 画像を配置。



◼︎ fuuno.svg

前回使ったSVG画像をそのまま使うことにしました。配置の指定もそのまんまです。
コードを貼っておきます。

◼︎ HTML(参照表記)

<img 「「1id = "fuuno"」」 src = "fuuno.svg">

◼︎ HTML(インライン表記)

<svg version="1.1" 「「1id="fuuno"」」 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.7 389.4" style="enable-background:new 0 0 595.7 389.4;" xml:space="preserve"> 「「3〜 略 〜」」 </svg>


◼︎ CSS


#fuuno { width:80%; margin-left:10%; }


◼︎ ブラウザ


ここまでOKですね?

 

scale(x,y)。


軸を基準に拡大させる表現は、xまたはy成分のうち、一方の大きさを固定することで実現します。

transform : scale(値)

前回はscaleの数値を1つだけ指定しました。 この表記だと、x/y成分が同時に変形します。

やり方を変えましょう。

transform : scale(x,y)

このように2つの値をカンマで区切って指定してやると、x/y成分をそれぞれ独立した状態で変形させることができます。

ということは、どちらかの成分を常に「1」にしたままもう片方を変化させてやると… うまくいきそうですな!





 

うごかしてみる。


◼︎ CSS

#fuuno { width:80%; margin-left:10%; 「「1animation:axis 4s infinite;」」 }
・アニメーション名 「axis」
・継続時間 4s
・繰り返し回数 infinite(無限)

CSSでSVG画像を参照し、animationプロパティを仕込みます。これも内容は前回と同じです。

◼︎ CSS

@keyframes axis { 0% { 「「1transform:scale(1,0);」」 opacity:0; } 100% { 「「1transform:scale(1,1);」」 opacity:1; } }

ここが今回の肝。transform.scale( )の値をx,yごとに指定しました。xは「1」のまんま固定させ、yの値のみを徐々に拡大していきます。

そしておなじみの、不透明度を徐々に上げていく仕組み。

完成。

このようになりました。

web上で、
切実な一言を伝えたいとき、

使えそうです。





 

Y軸でもやってみる。


うまくいきましたか?
今度は調子に乗ってY軸を基準にしてみます。書き換えるのは@keyframesの値指定を変更するだけです。

◼︎ CSS

@keyframes axis { 0% { 「「1transform:scale(0,1);」」 opacity:0; } 100% { 「「1transform:scale(1,1);」」 opacity:1; } }

Y軸を基準にすると、こんな感じになりました。

◼︎ ちなみにY軸を左端に・・

ちなみに近々紹介しようと思っている、transform-originというプロパティを使えば、基準となる軸の位置を変化させることもできます。
上の画像はY軸を左側に指定したもの。これでまた表現範囲が広がってきそうですね。

◼︎ CSS

#fuuno { width:80%; margin-left:10%; 「「1transform-origin:left;」」 animation:axis 4s infinite; }

いちおーCSSを書き換えたものも貼っておきます⬆︎(1行加えるだけ‼︎)。 またそのうち、詳しく紹介させていただきますね ♬











関連記事













「ふ」です。

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