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






こんにちは、「ふ」です。
SVG画像って知ってますか? SVGをあなたのwebに取り入れれば、どんなデバイスでも、どんなに拡大してもくっきり表示することができます。
さらにラスター画像とは違い「線」や「色」の情報を持っているので、コードで部分的にカスタマイズすることもできます。

そして。

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

◼︎目次は画面右上↗︎のアイコンからご覧ください。

新着。



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

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



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

2021.01.20
positionやz-index指定なし。



SVG、波を表現する。

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


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

2021.01.11
3つの確認ポイント。


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

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


 

始めてみましょう。

シンプルなアニメーションを用意しました。まづはココから始めてみましょう。


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

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


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

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


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

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



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

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


 

webパーツ。

ボタンや吹き出しなど、webサイトで即戦力なSVGアニメーション。


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

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


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

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



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

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


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

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



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

2021.01.20
positionやz-index指定なし。


 

工夫ワザいろいろ。

画像の重ね方などを工夫して、コードだけでは実装できない色んな効果に挑戦してみます。


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

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


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

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


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

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


 

モーションパス。

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


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

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


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

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


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

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


 

3Dに挑戦。

SVG画像を3D空間で動かしてみましょう。SVG自体は3Dをサポートしていないので、CSSも活躍させます。


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

2020.10.09
〽️ X軸を基準に回転。


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

2020.10.21
〽️ rotate3dに挑戦。


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

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


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

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


 

アニメーションを制御。

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


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

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


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

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


SVGでWeb Animations API。

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


 

線を操る。

SVGのオブジェクト本体ではなく、「線」を動かすアニメーションに挑戦。


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

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


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

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


 

画像作成。

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


◼︎ iPhone/iPad/Mac所有なら無料。



◼︎ net環境さえあれば。ただし¥が少々掛かります。



 

HTMLに配置。

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


 


「ふ」です。

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