SVGアニメーション 作り方。





〽️ 新着。 SVG、金属文字を表現。

CG初心者の課題曲。

CSS


〽️ 新着。 SVGとCSSで画像の境界線をぼかす。

内側は鮮明、周りはblur。

CSS


こんにちは、「ふ」です。
SVG画像って知ってますか? SVGをあなたのwebに取り入れれば、どんなデバイスでも、どんなに拡大してもくっきり表示することができます。
またSVG形式のファイルは、「線」や「色」の情報を持っているので、CSSをはじめとするコーディングによってそれらを独自にカスタマイズすることもできます。

そして。

アニメーションさせましょう。webサイトに動きをつけることで、静止コンテンツの枠から飛び出した、素敵なページを演出できるでしょう。

◼︎ 当ページはSVGアニメーションのサンプル/チュートリアル集で、カテゴリ別にリンクをまとめてあります。目次は画面右上↗︎のアイコンからご覧ください。

SVGアニメーションの方法3つ。


web上でSVGをアニメーションさせるには、以下の3つの方法があります。


 ① CSSアニメーションを利用。

SVGの要素には、CSSを使ってアクセスすることできるため、通常のHTML要素と同様にアニメーションさせることができます。
最近ではCSSアニメーションだけでもかなりのことが実装できるようになってきました。手軽さを考えると、簡単なアニメーションには最も適した方法です。



 ② SIMLでアニメーション。

「SIML」とは、元々SVGに用意されているアニメーションを実装するための機能です。
扱うのは少々複雑ですが、CSSでは実装できない細かなパスや属性のコントロールが可能です。



 ③ JavaScriptによる制御。

3つめはJavaScriptを使った実装です。
最大のメリットはイベントやスクロールに応じて、アニメーションの発生タイミングなどを「制御」できる点にあります。
またプログラミング言語ならではの変数や反復を使うことにより、少ない記述で複雑なアニメーションを実装することができます。

CSSで動かしてみる(基本編)。

SVGアニメーション、入門章です。
CSSだけで動く、 簡単なアニメーションのサンプルを用意しました。まづはココから始めてみましょう。


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

〽️ 新シリーズはじめました。

🔰

CSS


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

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

🔰

CSS


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

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

🔰

CSS


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

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

🔰

CSS


フーノページでは、CSSアニメーションの入門コーナー⬇︎も用意しています。CSSからじっくり学びたい方は参考にしてください。

 

線や文字を描画。

SVGのstroke-dasharray、stroke-dashoffsetは、破線の長さや隙間の大きさを指定するプロパティです。
2つのプロパティを利用することにより、線を引いたり手書き風文字のアニメーションを作ってみましょう。


SVG、線を描くアニメーション。

〽️ 破線のプロパティをつかいます。

CSS


SVGアニメーション、mask要素で手書き風テキスト。

〽️ <mask>要素について理解しましょう。

CSS


花火のアニメーションをSVGで作ろう。

ドーナツ状に線が広がる動き。

CSS

JavaScript


 

UIパーツ。

webサイトで即戦力なSVGアニメーション。
ボタンや吹き出しなどを動かして、利便性のあるUIを実装しましょう。


ボタン。

SVG、ボタンのon/offを表現。

イベントにも効率よく対応。

CSS

JavaScript


SVGでボタンアニメーション【Web Animations API】。

event.targetからオブジェクトを動かす。

CSS

JavaScript


SVGアニメーション、 複数のボタンを一括制御。

1度作っておけば楽チン ♬

CSS

JavaScript


グラフ。

SVGで円グラフアニメーション。

SVGの「破線」と「円周率」。

CSS


SVGで棒グラフのアニメーション。

SVGを「htmlの部品」として利用する。

CSS



SVGとCSSで作る、吹き出しアニメーション。

〽️ 吹き出しの形は自由自在。

CSS


 

JavaScriptによる制御。

アニメーションそのものを実装しただけでは、ブラウザがロードされた瞬間に実行されてしまいます。
スクロールやユーザイベントへの対応を研究。


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

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

CSS

JavaScript


要素が画面内に表示されたらアニメーション、Intersection Observer。

〽️ コピペで試してみてね。

CSS

JavaScript


あまり知られていませんが、JavaScriptには非常に便利なWeb Animation APIというインターフェースが存在します。高度なSVG/CSSアニメーションの実装を考えている方は、是非押さえておきたいスキル⬇︎です。

SVGでWeb Animations API。

〽️ ネイティブJavaScriptでのアニメーション。

🔰

JavaScript


 

クリップとマスク。

SVG画像は各要素がレイヤーのように重ねられて構成されています。
マスクやクリップ機能を使うと、見た目も不思議な効果が得られます。

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

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

CSS


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

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

CSS


clip-pathをアニメーションさせる。

「覗き窓」自体を動かす。

CSS


SVG アニメーション、パスの内側を切り抜いて透過させる。

不透明度を移植する。

CSS


SVGアニメーション、 回転スワイプで画像切り替え。

ポイントは「2重クリップ」。

CSS


回転。


単なる「回転」でも、transform-origin(基準)やそのほかのtransform関数と掛け合わせることで、多様な動きを表現することが可能です。

SVGアニメーション、 回転の中心を指定する。

座標を取得して%変換。

SIML

CSS


SVGで転がりアニメーション。

回転量と移動距離を一致させる方法。

CSS


SVG アニメーション、カメラのシャッターを再現。

「アニメーションごと」重ねていく。

CSS


 

ランダム、エンドレス。


画像の重ね方を工夫したり、JavaScriptをつかってエンドレスなアニメーションやランダム発生を試みます。

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

〽️ タイトル部分に使えそう?ふふふ。

CSS


SVG アニメーション、ランダムにキラキラ。

〜SVG in SVG。

CSS

JavaScript



雨のアニメーションをSVGで作ろう。

webページ上に雨を降らせます。

CSS

JavaScript


 

モーションパス。

SVGのSIMLならではのアニメーション。パスに沿って要素を動かします。


SVGでモーションパス(基本編)。

〽️ 好きな軌道で画像を動かす。

🔰

SIML


SVG、モーションパスで複数の要素を動かす。

〽️ 小技を集結させて実装します。

SIML


SVG、use要素を使ったモーションパス。

〽️ ポイントは‥「マイナスの遅れ」。

SIML


 

matrix。

transformを理解する上での大きな壁、「transform:matrix」。
ですが、ご安心を。難解な行列計算なしで学習できる手順を紹介します。


transform:matrixを理解する。

行列計算は必要なし。

🔰

CSS


transform:matrixの使い方①。

基本的な変形をmatrixで行う。

CSS


transform:matrixの使い方② 〜要素の反転と基準点について。

matrixにおける「基準点」の役割とは?

CSS


SVG要素のtransformについて。

普通のHTML要素とは大きく違います。

CSS


 

3Dに挑戦。

SVG画像を3D空間で動かしてみましょう。SVG自体は3Dをサポートしていないので、CSSアニメーションとの合わせ技で挑みます。


SVGアニメーション、裏表を見せながら回転。

〽️ X軸を基準に回転。

CSS


CSSで3D回転アニメーション。

〽️ rotate3dに挑戦。

CSS


perspectiveで奥行きのあるアニメーション。

〽️ 1点透視の環境を再現。

CSS


SVG、3D空間に配置してアニメーション〜preserve-3d。

〽️ オブジェクトごとに重ねて配置。

CSS


 

画像を貼り付けて。

レイヤー構造を持つSVG。

HTML内にSVG領域を定義することで、貼り付けた画像のコントロールも格段に便利になること、知っていましたか?
さらにアニメーションを仕込むことで、色々な画像切り替えが楽しめます。


HTMLで画像を重ねる、便利な方法。

positionやz-index指定なし。

🔰

CSS


SVGとCSSで、 見開きページ風に画像切り替え。

SVG領域を確保すると便利。

CSS


ページめくりアニメーション 作り方。

画像を読み込むだけで実装。

JavaScript


SVGに画像をぴったりと配置〜
preserveAspectRatio。

縦横比が違っても安心。

🔰


 

モーフィング。

SIMLやJavaScriptを使用して、SVGオブジェクトのパスデータ自体をアニメーションさせます。


SVGでモーフィングアニメーション。

オブジェクトをなめらかに変形させる。

🔰

SIML


SVG モーフィングが動かない!

3つの確認ポイント。

🔰

SIML



SVG、波を表現する。

合成されたリアルな波を目指す。

JavaScript


 

画像作成。

SVG画像を作成しましょう。構築環境としては、イラレのような万能しかし高額なものもありますが、無料のアプリやブラウザ上で作成する方法もあります。






 

HTMLに配置。

作成したSVGファイルをHTMLファイルに貼りましょう。CSSなどを使って編集も可能です。


 


「ふ」です。

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