CSSを使わないSVGアニメーションの作り方【キーフレームアニメーション編】

  • このエントリーをはてなブックマークに追加

SVG画像をアニメーションさせる時は、CSSを使用するのが一般的かと思いますが、SVGファイルに直接記述してアニメーションさせることもできます。
SMILという名前の、SVGのアニメーション機能です。IEでは使用できなかったため、使いづらかったのですが、今後は気後れすることなく使用できます。

SMILにはざっくり3種類のアニメーションがありますが、複雑なのでまずは簡単なキーフレームアニメーションから、早速試してみましょう。

静止画のSVG



アニメーションを作成する前に、まず静止画のSVGを用意して、中身を見てみましょう。
SVGファイルをエディタで開くと、下記のようになっています。
これにアニメーションの指示を追加していきます。



このpathタグの中のd属性が、パスのデータになります。方法は後述しますが、このd属性を操作するので、「d=”XXXX”」の記述がある状態にしてください。

▲ ハート型を表すd属性の値。d属性があればpathタグでもcircleタグでも構いません。

<d属性がない場合>
IllustratorでSVGを作成するとd属性が無い場合があるので、下記のサイトでファイル圧縮を試してみてください。
Compressor.io – optimize and compress JPEG photos and PNG images

基本のアニメーション

animateタグを追加する



では早速、簡単なアニメーションを作ってみましょう。animateタグを使うと、pathの属性値を操作するアニメーションを作成することができます。
まずはコピペで良いので、下記のanimateタグをpathタグの中に記述してみてください。

▲ pathタグは単一だったので、終了タグ(</path>)を追加します。開始タグ末尾の”/”を削るのを忘れずに。


これでパスの色が変わります。
各属性を解説すると、下記のようになります。


CSSアニメーションを作ったことがある方であれば、おおよその感覚はすぐ掴めると思います。
秒数や色の値を編集して再度表示してみると、また違ったアニメーションが作成できると思います。


キーフレームアニメーション



先程は開始と終了の2点を指定したアニメーションでした。
次に、中間の色を追加してみましょう。



animateタグの記述が変わりました。values属性の中に、セミコロン区切りで3つの値が入っています。これでピンクから水色を経由して、黄色に変わるアニメーションになります。

▲ valuesを使うときはfrom属性とto属性は不要になります


値をセミコロンで区切れば、いくつでもキーフレームを追加できます。

▲ 5つの値をセミコロン区切りで繋げました。


パスが変形するアニメーション


キーフレームアニメーションの応用です。
valuesにd属性の値を挿入すると、パスを滑らかに変形させることができます。

まず静止画でアニメーション開始時点のパスと、終了時点のパスを作ります。
作成時の注意として、パスのポイントの数はどちらも同じにします。開始の時に4つであれば、終了時も4つです。ポイントの数を変えてしまうと上手に動かないので注意してください。

開始時点


終了時点



開始時点のpathタグのd属性と、終了時点のpathタグのd属性に注目してください。
これらの値をコピペして、キーフレームアニメーションとしてvaluesの中にセミコロン区切りで記述します。すると、それだけで間のアニメーションは自動で補完されます。簡単ですね。

▲ 先程はfill属性を操作しましたが、次はd属性を操作するので「attributeName=”d”」に設定します。




終了後に逆再生の動きで元に戻したい場合は、valuesの最後に最初と同じ値を挿入します。




SMILを使用すればパスを操作できるので、CSSとはまた違った動作が可能です。アプリの中で使用することもできるので、表現の幅が広がります。是非試してみてくださいね。

執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

プログラミング

【PHP】PHPでExcelファイルを操作するお話 その2

目次1 前回は・・・2 考え方3 保存したフォーマットにデータを入れる4 ExcelからPDFへ変換する4.1 mpdfで変換する4.2 TCPDFで変換する4.2.1 IPAexフォントのインストール5 結局何がいいの? 前回は・・・ 前回はPHPでExcelファイルを操作する方法をまとめました。 基本的にはCSV出力や一括登録の代替案としてまとめましたが、PhpSpreadsheetを使うことでExcelで作成した書類のフォーマットにPHPでデータを入力してPDFで出力す […]

プログラミング

【PHP】PHPでExcelファイルを操作するお話 その1

目次1 こういうことってないですか?2 インストール方法3 PHPでライブラリの呼び出し方4 Excelファイルのエクスポート方法4.1 ちなみに・・・5 Excelファイルのインポート方法6 これを組み合わせると??? こういうことってないですか? webでの管理システムを設計するときに「CSVでインポートやエクスポート機能を付けてよ」って言われる事があります。 インポートに関しては一括登録や一括削除や更新など割とリスクが大きいのですが、エクスポートはあったりします。 CS […]

スマホアプリ

【Android】スプラッシュスクリーンを設定するお話

スマホアプリを作る上で欠かせない・・・訳ではないですが、アプリの構成に必要なのはスプラッシュスクリーン(以下スプラッシュ画面)ですよね 目次1 そもそもスプラッシュ画面とは?2 Androidアプリで実装する場合(今まで)3 SplashScreen API登場3.1 スプラッシュ画面用のActivityを用意する3.2 themes.xmlにテーマを記述する そもそもスプラッシュ画面とは? スマホアプリにかかわらず、ほとんどのアプリやプログラムを起動した際に一瞬表示される画 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。