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 デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

Webサイト制作

Webアクセシビリティの基本を学ぼう!

近年Webサイト制作時に求められる『Webアクセシビリティ』。 正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。 自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。 一緒にWebアクセシビリティについて学んでいきましょう。 目次1 そもそもWebアクセシビリティってなに?2 基本的な対応内容2.1 色のコントラストをはっきりさせよう2.2 文字サイズを変更できるようにしよう2.3 できるだけテキストベースを心 […]

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

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

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

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

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