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

関連記事

プログラミング

iOSアプリでREST APIを使うお話

前回のREST APIをiOSアプリでも使うお話です。 こちらも割と簡単ですが、Kotlin=Javaに比べると型に関してはシビアです。 目次1 インストール1.1 CocoaPodsでインストールする。2 使い方2.1 GETの場合2.2 POSTの場合 インストール CocoaPodsでインストールする。 ライブラリが対応していれば簡単ですね。 その後、 これでインストール完了です。 使い方 こちらもAndroidの時と同じような感じでできますが、今回はModelでデータ […]

プログラミング

AndroidでREST APIを取り扱うお話

前回のお話でREST APIを気軽に確認する内容を書きましたが、今回は実際にスマホアプリ内でREST APIのやりとりを行う方法をまとめます。 以前はOkHttpというライブラリを使うことが多く、現在もそれが主流になりますが、今回はkotlinで使えるRetrofitと呼ばれるライブラリを使っていきましょう 目次1 インストール2 使い方2.1 GETの場合2.2 POSTの場合2.3 PUT通信の場合3 まとめ インストール 通信するので当然アプリ側にインターネット接続の設 […]

スマホアプリ

無音カメラが国内ではリリースできなかったお話

みなさん、無音カメラ(Silent Camera)で撮影してますか? いきなりグレーゾーンの発言ぽくなりましたが、App StoreもGoogle Playにも無音カメラは割とたくさんリリースされています。 そこで弊社でもその波(!?)に乗り、無音カメラのリリースを検討しました。 目次1 実際どうなった?2 リジェクト理由1 スパイウェアの扱いになった3 ちなみにGoogle Playでは?4 終わりに5 参考 実際どうなった? 結果から言うと、リリースはできませんでした。 […]

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

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

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

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