第13回 Sugamo.css に行ってきた。さりげに一周年ということで、記念にはじめてネタを用意していった。ドキドキ。
SVGアニメーション
以下のようなイメージをSVGだけで書き出して、アニメーションするというテスト。あんまりSVGとか知らない人にも、やろうと思えばSVGだけでこれだけできるよーってのを見てもらえればと思って。
- SVGアニメーション デモ ※デモは停止しました
アニメーションが動作するのは、現時点ではOperaのみ。Firefoxも3.7では動くんじゃないかという話を聞いたが、3.6系などでは静止した状態で表示される。ChromeはDev版なら動くかもしれないが、私は検証していない。動いたとか動かないとか、気付いたらぜひ教えて下さい。あとマシンスペックによっては動きがカクカクかと...。
中身のこと
さすがにパス全部を手動設定とか無理なので、Adobe Illustrator の書き出し機能を利用してSVGを作成している。はじめ Illustrator 10.0.3 で書き出したのだが、理解不能なソースを吐き出してくれたので CS3 で試してみたところ、ちゃんと読めるソースが吐き出された。今どき 10.0.3 とか使っている方はいないかもしれないが、その点ご注意を。
背景のぐるぐるは<defs>というタグを使って、シンボル化して敷き詰めてみた。
<defs> <g id="guruguru">（背景のぐるぐるオブジェクト）</g> </defs> <use xlink:href="#guruguru" x="-5" y="-5" /> <use xlink:href="#guruguru" x="27" y="-5" /> ・・・・・
今回のアニメーションにはスクリプトを使わず、<animateMotion>を使っています。
<animateMotion dur="4s" path="M -200 -200 L 0 0" />
スケーラブル的なアレも、グループ化したオブジェクトごとに適宜設定してあります。
<g transform="translate(0,0),scale(1.2,1.2)">
ちなみにSVG入門とSVGの概要を参考にさせていただきました。ありがとうございます。
次回への宿題
- 一部を外部ファイルに書き出したりして、ソースを整理する
- JavaScriptでやなんかを使って、もっと複雑なアニメーションにしてみる
- Web fonts 、SVG fonts をあててみる
yomotsu先生のネタが相変わらずのクオリティだったので、ぜひ自分の手元でも試してみたい。今回のネタをちょっとずつバージョンアップさせる方向で頑張ってみたいと思う。
おまけ
一周年記念＆バレンタイン企画ということで、チロルチョコでチョコくじ引きをしてもらった。
当たりを引いた方、おめでとうございます。物によっては迷惑という話もあるが。
