第13回 Sugamo.css
- 投稿日：2010年2月14日 15:30
- カテゴリ：セミナー、勉強会報告
こんにちは、ショコラの前では俄然やる気を見せるHitoyamです。チョコ大好き！
第13回 Sugamo.css に行ってきました。さりげに一周年ということで、はじめてネタを用意していきました。ドキドキ。普通のOLのくせにごめんなさい。というワケで、ソースとか一式置いておきます。
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先生のネタが相変わらずのクオリティだったので、ぜひ自分の手元でも試してみたい！ 今回のネタをちょっとずつバージョンアップさせる方向で頑張ってみたいと思います。
おまけ
一周年記念＆バレンタイン企画ということで、チロルチョコでチョコくじ引きをしてもらいました。
当たりを引いた方、おめでとうございます！ 物によっては迷惑という話も(笑)。
- 投稿日：2010年2月14日 15:30
- カテゴリ：セミナー、勉強会報告