SVGアニメーション01、画像をフェードインさせる方法。

〽️ タイムラインと作戦。 〽️ SVG画像の配置。 〽️ アニメーションを仕込む。 〽️ timing-function。 〽️ 設計が重要。







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

こんにちは、「ふ」です。
この度「フーノページ」では新シリーズとして、SVGアニメーションのチュートリアル記事を始めていきます。その第1回目として、「画像をフェードインさせる」方法について紹介しようと思います。
挫折しないよう(笑)頑張りますので、今後ともよろしくお願いします。

タイムラインと作戦。


「画像をフェードインさせる」ためのアルゴリズムを整理しておきましょう。

0s : 不透明度0
⬇︎
5s : 不透明度1
⬇︎
終了

初期状態では画像の不透明度は0%。その後5秒掛けて不透明度を100%に上げていきます。
本記事のヘッダに置いたサンプルはアニメーションを繰り返していますが、繰り返しはなしとして不透明度が100%になった時点でアニメーションを終了させましょう。

次に、アルゴリズムを実現させるための作戦をたてます。

 作戦 

1.SVGをHTML内にインライン表記または参照表記。
2.CSSで不透明度を変化させる。

今回はSVG画像全体にアニメーションを仕込むので、HTML内には外部参照の形式で貼っても問題ありません。
アニメーションはCSSの「opacity」プロパティを使って不透明度を変化させることにしました。





 

SVG画像の配置。


HTMLの<body>〜</body>内にSVG画像を貼り付けます。あとでCSSを仕込む時に他の画像に影響を与えないよう、id名をつけておきましょう。ここでは「ani_o1」としました。

HTML(参照表記)

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

HTML(インライン表記)

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

外部ファイルを参照させる場合はimgの属性に、インライン表記の場合はsvgの属性にid名を付けます。
参照表記はSVG以外の.png画像以外などにも応用できますね。 ブラウザで表示してみましょう。

ブラウザ

CSSで参照してテキトーに大きさや位置を整えます。

CSS

#ani_01 { width:80%; height:20em; margin-left:10%; }

⬆︎下品なコードお許し下さい(笑)
ブラウザで表示します。

ブラウザ

とりあへずタイトルっぽい大きさになったので、ここにアニメーションを仕込んでいきます。





 

アニメーションを仕込む。


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

CSS

#ani_01 { width:80%; height:20em; margin-left:10%; 「「1animation: ani01 5s;」」 }

今回必要なプロパティはanimation-name(アニメーション名)とanimation-duration(継続時間)の2つがあれば実現します。

animation : アニメーション名 所要時間

サンプルではショートハンドで記述しました。アニメーション名もid名と同じく「ani_01」としています。クオテーション(「" "」や「' '」)で囲んでいない点に注意してください。

次にこの「ani_01」にキーフレームを追加します。
キーフレームは、#ani_01のセレクタの外部に記述することにも注意してください。

CSS

#ani_01 { width:80%; height:20em; margin-left:10%; animation: ani01 5s; } 「「1@keyframes ani01 { 0% { opacity:0.0; } 100% { opacity:1.0; } }」」

先ほどduration(継続時間)は「5s」としました。

その0%の状態、すなはち「0s」の時は不透明度(opacity)を完全な透明(0.0)。
100%の状態、すなはち「5s」の時に完全な不透明(opacity:1.0)と指定します。

これで、5秒間掛けてSVG画像がフェードインするように成増ね。

result

結果はこのようになりました(見やすいように繰り返し処理を仕込んであります)。
いちおーアニメーションとしては成功しています。

でも何か無機質な・・フェードインというよりは鈍く点滅しているだけのネオンみたいですね・・





 

timing-function。


このように無機質に見えてしまうのは、アニメーションの進行が平均的になってしまっているのが原因です。
CSSにはanimation-timing-functionという、アニメーションの進行具合を調節できるプロパティが用意されています。これを使ってみましょう。

animation-timing-function : ease-in;

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

CSS

#ani_01 { width:80%; height:20em; margin-left:10%; animation: ani01 5s 「「1ease-in」」; }

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

result

さっきのものよりも、「何もないところから滲み出てくる感」が表現できました。

⬆︎こちらが先程の無機質なもの。
冷静に動きを見比べてみるとわずかな違いではありますが、ユーザに与える印象は変わってくるものです。





 

設計が重要。


今回はSVGアニメーションのチュートリアル第1回目として、簡単なアニメーションを紹介させていただきました。
ページ構成についてはまだ試作段階の部分もあり、解りづらい部分もあったかと思いますが‥今後修正を重ねていきたいと思いますのでお許しください。

web上でのアニメーションによるパフォーマンス。学習を進めるにつれ、複雑なものに挑戦したくなっていくものと思われます。今回は単純なアニメーションでしたが、将来的なことも見据えて、あえてアルゴリズムと作戦を記述しました。

今後も「ふ」は様々なチュートリアルを紹介していきたいと思いますが、その時にもっとも重要となるのが「設計図」だと考えています。皆さんもアニメーション実装に限らずwebコンテンツを作る際には、「設計」を大切にしてください。






関連記事

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

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


CSSアニメーション、発火のタイミングを制御する。

2020.05.31
〽️ 好きなタイミングで発火/消火。


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

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












「ふ」です。

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

🐧 twitter 🐧