新着。
SVG、JavaScriptを埋め込んでobject呼び出し。
2022.01.15
サイトをおめでたくしよう。
SVG、扇子アニメーション２〜 好きな画像を貼り付ける。
2022.01.05
サイトをおめでたくしよう。
SVGで扇子のアニメーション。
2021.12.30
２つのキーフレームで実現。
SVG、要素を基準にtransform。
2021.12.18
これまでの苦労は何?（笑）。
SVGアニメーションのサンプル集です。
こんにちは、「ふ」です。
SVG画像って知ってますか？
SVGをあなたのwebに取り入れれば、どんなデバイスでも、どんなに拡大してもくっきり表示することができます。
またSVG形式のファイルは、「線」や「色」の情報を持っているので、CSSをはじめとするコーディングによってそれらを独自にカスタマイズすることもできます。
そして。
アニメーションさせましょう。webサイトに動きをつけることで、静止コンテンツの枠から飛び出した、素敵なページを演出できるでしょう。
◼︎ 当ページはSVGアニメーションのサンプル/チュートリアル集で、カテゴリ別にリンクをまとめてあります。目次は画面右上↗︎のアイコンからご覧ください。
SVGアニメーションの方法３つ。
web上でSVGをアニメーションさせるには、以下の３つの方法があります。
① CSSアニメーションを利用。
SVGの要素には、CSSを使ってアクセスすることできるため、通常のHTML要素と同様にアニメーションさせることができます。
最近ではCSSアニメーションだけでもかなりのことが実装できるようになってきました。手軽さを考えると、簡単なアニメーションには最も適した方法です。
② SMILでアニメーション。
「SMIL」とは、SVGのベースとなっているxml規格に用意されている、アニメーションなどを行うための機能です。
扱うのは少々複雑ですが、CSSでは実装できない細かなパスや属性のコントロールが可能です。
③ JavaScriptによる制御。
３つめはJavaScriptを使った実装です。
最大のメリットはイベントやスクロールに応じて、アニメーションの発生タイミングなどを「制御」できる点にあります。
またプログラミング言語ならではの変数や反復を使うことにより、少ない記述で複雑なアニメーションを実装することができます。
CSSで動かしてみる（基本編）。
SVGアニメーション、入門章です。
CSSだけで動く、
簡単なアニメーションのサンプルを用意しました。まづはココから始めてみましょう。
SVGアニメーション01、画面内にフェードインさせる方法。
〽️ 新シリーズはじめました。
🔰
CSS
SVGアニメーション02、画像を宙に浮かべる。
〽️ 要素を変形させるtransformプロパティ。
🔰
CSS
SVGアニメーション03、中心を基準に拡大/縮小 〜transform:scale（ ）。
〽️ 映画のタイトルのような‥
🔰
CSS
SVGアニメーション04、軸を基準に拡大/縮小 〜
〽️ 「切実な一言」に使おう。
🔰
CSS
フーノページでは、CSSアニメーションの入門コーナー⬇︎も用意しています。CSSからじっくり学びたい方は参考にしてください。
CSSアニメーション、作り方。
線や文字を描画。
SVGのstroke-dasharray、stroke-dashoffsetは、破線の長さや隙間の大きさを指定するプロパティです。
２つのプロパティを利用することにより、線を引いたり手書き風文字のアニメーションを作ってみましょう。
SVG、線を描くアニメーション。
〽️ 破線のプロパティをつかいます。
CSS
SVGアニメーション、mask要素で手書き風テキスト。
〽️ <mask>要素について理解しましょう。
CSS
花火のアニメーションをSVGで作ろう。
ドーナツ状に線が広がる動き。
CSS
JavaScript
SVGで集中線のアニメーション。
ランダムな「遅れ」を指定するだけ。
CSS
JavaScript
UIパーツ。
webサイトで即戦力なSVGアニメーション。
ボタンや吹き出しなどを動かして、利便性のあるUIを実装しましょう。
ボタン。
SVGでニューモフィズムのアニメーション。
拡張性のある実装をしています。
CSS
JavaScript
SVG、ボタンのon/offを表現。
イベントにも効率よく対応。
CSS
JavaScript
SVGでボタンアニメーション【Web Animations API】。
event.targetからオブジェクトを動かす。
CSS
JavaScript
SVGアニメーション、 複数のボタンを一括制御。
１度作っておけば楽チン ♬
CSS
JavaScript
SVGでborderのアニメーション。
2021.12.06
SVGとHTMLの座標空間を調和させる。
グラフ。
SVGで円グラフアニメーション。
SVGの「破線」と「円周率」。
CSS
SVGで棒グラフのアニメーション。
SVGを「htmlの部品」として利用する。
CSS
SVGとCSSで作る、吹き出しアニメーション。
〽️ 吹き出しの形は自由自在。
CSS
SVGでborderのアニメーション。
SVGとHTMLの座標空間を調和させる。
JavaScriptによる制御。
アニメーションそのものを実装しただけでは、ブラウザがロードされた瞬間に実行されてしまいます。
スクロールやユーザイベントへの対応を研究。
CSSアニメーション、発火のタイミングを制御する。
〽️ 好きなタイミングで発火/消火。
CSS
JavaScript
要素が画面内に表示されたらアニメーション、Intersection Observer。
〽️ コピペで試してみてね。
CSS
JavaScript
あまり知られていませんが、JavaScriptには非常に便利なWeb Animation APIというインターフェースが存在します。高度なSVG/CSSアニメーションの実装を考えている方は、是非押さえておきたいスキル⬇︎です。
SVGでWeb Animations API。
〽️ ネイティブJavaScriptでのアニメーション。
🔰
JavaScript
クリップとマスク。
SVG画像は各要素がレイヤーのように重ねられて構成されています。
マスクやクリップ機能を使うと、見た目も不思議な効果が得られます。
SVGアニメーション、アニメーションに合わせてテキストの色を反転。
〽️ ３つの長方形を動かします。
CSS
SVGアニメーション、アニメーションしている部分をクリッピング(マスク)する。
〽️ テキストの内部だけアニメーション。
CSS
clip-pathをアニメーションさせる。
「覗き窓」自体を動かす。
CSS
SVG アニメーション、パスの内側を切り抜いて透過させる。
不透明度を移植する。
CSS
SVGアニメーション、 回転スワイプで画像切り替え。
ポイントは「２重クリップ」。
CSS
配色とグラデーション。
SVGではグラデーションそのものをアニメーションさせることもできます。
またweb制作全般に有用な、配色パターンについても学びましょう。
〽️ SVGのグラデーションについて。
カラーストップ/オフセットとは？
CSS
JavaScript
〽️ SVG、グラデーションのアニメーション ①〜線形編。
パターンの繰り返しとユニット切り替え。
SMIL
〽️ SVG、グラデーションのアニメーション ②〜円形編。
CSSの「steps」が裏で活躍 ♪
SMIL
CSS
SVG、テキストにグラデーション、しかもアニメーション。
１つの定義から多彩な表現。
〽️ SVG、金属文字を表現。
CG初心者の課題曲。
CSS
〽️ HSL変換を使った配色や色指定。
コードを使って配色パターンを秒で作成。
CSS
JavaScript
回転。
単なる「回転」でも、transform-origin（基準）やそのほかのtransform関数と掛け合わせることで、多様な動きを表現することが可能です。
SVGアニメーション、 回転の中心を指定する。
座標を取得して％変換。
SMIL
CSS
SVGで転がりアニメーション。
回転量と移動距離を一致させる方法。
CSS
SVG アニメーション、カメラのシャッターを再現。
「アニメーションごと」重ねていく。
CSS
ランダム、エンドレス。
画像の重ね方を工夫したり、JavaScriptをつかってエンドレスなアニメーションやランダム発生を試みます。
SVG、画面全体に雪を降らせるアニメーション。
これからの季節に必要（笑）。
SVGアニメーション、エンドレスに流れる画像。
〽️ タイトル部分に使えそう？ふふふ。
CSS
SVG アニメーション、ランダムにキラキラ。
〜SVG in SVG。
CSS
JavaScript
雨のアニメーションをSVGで作ろう。
webページ上に雨を降らせます。
CSS
JavaScript
モーションパス。
SVGのSMILならではのアニメーション。パスに沿って要素を動かします。
SVGでモーションパス（基本編）。
〽️ 好きな軌道で画像を動かす。
🔰
SMIL
SVG、モーションパスで複数の要素を動かす。
〽️ 小技を集結させて実装します。
SMIL
SVG、use要素を使ったモーションパス。
〽️ ポイントは‥「マイナスの遅れ」。
SMIL
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。
縦横比が違っても安心。
🔰
SVGとCSSで画像の境界線をぼかす。
内側は鮮明、周りはblur。
CSS
モーフィング。
SMILやJavaScriptを使用して、SVGオブジェクトのパスデータ自体をアニメーションさせます。
SVGでモーフィングアニメーション。
オブジェクトをなめらかに変形させる。
🔰
SMIL
SVG モーフィングが動かない！
３つの確認ポイント。
🔰
SMIL
SVG、波を表現する。
合成されたリアルな波を目指す。
JavaScript
画像作成。
SVG画像を作成しましょう。構築環境としては、イラレのような万能しかし高額なものもありますが、無料のアプリやブラウザ上で作成する方法もあります。
Vectornator 使い方。
iPadでSVGデータを作成、HTMLに配置。
作成したSVGファイルをHTMLファイルに貼りましょう。CSSなどを使って編集も可能です。
HTML：SVGファイルでくっきり画像。
SVG画像に影を落とす。
SVG、オブジェクト単位でCSSを適用させる。
SVGをCSSで編集。
Vectornator、SVGを書き出してwebに配置。
SVGコード、読み方（構成を知る）。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。