SVGアニメーション01、画像をフェードインさせる方法。
〽️ タイムラインと作戦。 〽️ SVG画像の配置。 〽️ アニメーションを仕込む。 〽️ timing-function。 〽️ 設計が重要。
SVGアニメーション、作り方。
CSSアニメーション、作り方。
⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。
こんにちは、「ふ」です。
この度「フーノページ」では新シリーズとして、SVGアニメーションのチュートリアル記事を始めていきます。その第１回目として、「画像をフェードインさせる」方法について紹介しようと思います。
挫折しないよう（笑）頑張りますので、今後ともよろしくお願いします。
タイムラインと作戦。
「画像をフェードインさせる」ためのアルゴリズムを整理しておきましょう。
⬇︎
5s : 不透明度1
⬇︎
終了
初期状態では画像の不透明度は0%。その後５秒掛けて不透明度を100%に上げていきます。
本記事のヘッダに置いたサンプルはアニメーションを繰り返していますが、繰り返しはなしとして不透明度が100%になった時点でアニメーションを終了させましょう。
次に、アルゴリズムを実現させるための作戦をたてます。
1.SVGをHTML内にインライン表記または参照表記。
2.CSSで不透明度を変化させる。
今回はSVG画像全体にアニメーションを仕込むので、HTML内には外部参照の形式で貼っても問題ありません。
アニメーションはCSSの「opacity」プロパティを使って不透明度を変化させることにしました。
SVG画像の配置。
HTMLの<body>〜</body>内にSVG画像を貼り付けます。あとでCSSを仕込む時に他の画像に影響を与えないよう、id名をつけておきましょう。ここでは「ani_o1」としました。
HTML（参照表記）
HTML（インライン表記）
外部ファイルを参照させる場合はimgの属性に、インライン表記の場合はsvgの属性にid名を付けます。
参照表記はSVG以外の.png画像以外などにも応用できますね。
ブラウザで表示してみましょう。
ブラウザ
CSSで参照してテキトーに大きさや位置を整えます。
CSS
⬆︎下品なコードお許し下さい（笑）
ブラウザで表示します。
ブラウザ
とりあへずタイトルっぽい大きさになったので、ここにアニメーションを仕込んでいきます。
アニメーションを仕込む。
「ani_01」のCSS内にアニメーションプロパティを追加しましょう。
CSS
今回必要なプロパティはanimation-name（アニメーション名）とanimation-duration（継続時間）の２つがあれば実現します。
サンプルではショートハンドで記述しました。アニメーション名もid名と同じく「ani_01」としています。クオテーション（「" "」や「' '」）で囲んでいない点に注意してください。
次にこの「ani_01」にキーフレームを追加します。
キーフレームは、#ani_01のセレクタの外部に記述することにも注意してください。
CSS
先ほどduration（継続時間）は「5s」としました。
その0%の状態、すなはち「0s」の時は不透明度（opacity）を完全な透明（0.0）。
100%の状態、すなはち「5s」の時に完全な不透明（opacity:1.0）と指定します。
これで、５秒間掛けてSVG画像がフェードインするように成増ね。
result
結果はこのようになりました（見やすいように繰り返し処理を仕込んであります）。
いちおーアニメーションとしては成功しています。
でも何か無機質な・・フェードインというよりは鈍く点滅しているだけのネオンみたいですね・・
timing-function。
このように無機質に見えてしまうのは、アニメーションの進行が平均的になってしまっているのが原因です。
CSSにはanimation-timing-functionという、アニメーションの進行具合を調節できるプロパティが用意されています。これを使ってみましょう。
値を「ease-in」とすると、「開始時はゆっくりと始まって、 次第に本来のスピードに戻されていく」という動きになります。
これを先程のanimationプロパティのショートハンドに追加してみましょう。
CSS
扨（さて）結果はどのようになったか、見てみます。
result
さっきのものよりも、「何もないところから滲み出てくる感」が表現できました。
⬆︎こちらが先程の無機質なもの。
冷静に動きを見比べてみるとわずかな違いではありますが、ユーザに与える印象は変わってくるものです。
ロリポップ！の取次店になりました。
設計が重要。
今回はSVGアニメーションのチュートリアル第１回目として、簡単なアニメーションを紹介させていただきました。
ページ構成についてはまだ試作段階の部分もあり、解りづらい部分もあったかと思いますが‥今後修正を重ねていきたいと思いますのでお許しください。
web上でのアニメーションによるパフォーマンス。学習を進めるにつれ、複雑なものに挑戦したくなっていくものと思われます。今回は単純なアニメーションでしたが、将来的なことも見据えて、あえてアルゴリズムと作戦を記述しました。
今後も「ふ」は様々なチュートリアルを紹介していきたいと思いますが、その時にもっとも重要となるのが「設計図」だと考えています。皆さんもアニメーション実装に限らずwebコンテンツを作る際には、「設計」を大切にしてください。
関連記事
Vectornator、SVGを書き出してwebに配置。
SVGアニメーション03、中心を基準に拡大/縮小 〜transform:scale（ ）。
2020.06.06
〽️ 映画のタイトルのような‥
CSSアニメーション、発火のタイミングを制御する。
2020.05.31
〽️ 好きなタイミングで発火/消火。
SVGアニメーション02、画像を宙に浮かべる。
2020.05.22
〽️ 要素を変形させるtransformプロパティ。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。