蠍は留守です考

蠍の輪郭を見つめてふける思惟の痕跡

20170509013806

第13回 Sugamo.css

第13回 Sugamo.css に行ってきた。さりげに一周年ということで、記念にはじめてネタを用意していった。ドキドキ。

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先生のネタが相変わらずのクオリティだったので、ぜひ自分の手元でも試してみたい。今回のネタをちょっとずつバージョンアップさせる方向で頑張ってみたいと思う。

おまけ

一周年記念&バレンタイン企画ということで、チロルチョコでチョコくじ引きをしてもらった。

チョコくじ引き

景品のチョコ

当たりを引いた方、おめでとうございます。物によっては迷惑という話もあるが。


参考URL

Copyright © Hitoyam.