Danjiro's 9VA SVG アニメーション: 2015

2015年1月21日水曜日

SVG SMIL ループアニメーションを作る方法

SVG SMIL ループアニメーションを作る方法

SMILの <animation コマンドに繰り返し設定（repeatCount="indefinite"）をつけて無限ループすることは可能だが、
これでは、１つの図形の繰り返ししかできない。

ほんとにやりたいのは、１シーンの繰り返しだ。
図形の重なり順位が変化したり、新しい図形が出現、消滅する。
これを実現するには、個別に <animateをつけるしかない。

各図形には、登場と退場の命令をつけることになる。

繰り返しを行うならば、その登場と退場を、シーン全体の時間からの相対時間で
制御することになる。

ここで、ブラウザのSVGビュアの実装が問題になる。図形が多くなると
全ての図形を時間どおりに制御することができなくなる。
Firefox 以外のブラウザでは、どうも、時間が間に合わないときに、
命令の読み飛ばしが行われるようだ。

このとき、登場、退場の命令が読み飛ばされると、「図形が表示されない」、または、
「図形が残る」という症状になる。これが同じ時間の図形がすべて「表示されない」ので
あれば、１コマが表示されないことになり、見た目は悪くない。

しかし、一部の図形だけが表示されないのであれば、崩れた表示になる。

また、退場の命令が読み飛ばされると図形が残ることになる。
通常、時間がたつと、どんどん上書きされるように処理が進むため、残った
図形は問題にならない。しかし、ループ制御によって、早い時間の図形から
もう一度表示する場合、前回に表示され、退場するはずだった図形が
残っていると、その図形が一番上に表示されてしまい、見苦しいものとなる。

これを防ぐためには、全体のループの時間を、本来の時間より、0.5秒ほど
長くし、最後に表示した図形が退場する時間の余裕をとっておくことである。

また、最初にすばやく描画できる背景をいれておき、画面が真っ白になるのを防ぐ

2015年1月16日金曜日

C, C++プログラムの開発環境

今使っている、C, C++の開発環境は、以下のとおり。
いろいろ試したうえでこれに落ち着いたわけではないので、参考程度。
全部無料

Windows

Visual Studio Express 2012

Linux (Ubuntu / Mint / RaspberryPi)

gcc　コンパイラー
geany　統合環境　
DDD - Data Display Debugger 　デバッガー

Macintosh

Xcode

2015年1月6日火曜日

CodePenを使ってSVGアニメをサイトに埋め込む

CodePenを使ってSVGアニメをサイトに埋め込む方法

動画を自分のサイトに入れる場合、ひとまず、Youtubeに登録し、それを自分のサイトに埋め込むようにするが、SVGアニメを入れる場合は、CodePenに登録するのがよいみたいだ。

そうすれば、CodePenでSVGの再生テストを行うことができる。いろんなブラウザでの動作テストまで無料でできるのでお勧め。その手順を以下にまとめる。

SVGアニメを作る
CodePenに登録
自分のサイトにCodePenをいれる

１．SVGアニメを作る

9va-pi でアニメを作成
「ファイル」＞「名前をつけて保存」
右下のファイル属性を「9VA/EVA」から「SVG」に変更して保存

２．CodePenに登録

上で保存した、SVGファイルをテキストエディタで開く
CodePenサイトをブラウザで開く
ログイン（初めて開いたときはユーザー登録を行う。無料版でよい）
「NewPen」をクリック
→エディタ画面が開く
一番左の「HTML」の中にSVGファイルの中身をコピペする
→下にアニメが表示されればOK
上の「Save」ボタンをクリック
→「Fork」「Info」「Share」が表示されればOK
「Info」をクリックし、タイトルと説明を英語で入れる（後から入れてもよい）
「Share」をクリック→パネルが表示される
「Embed」をクリック→アニメが表示されればOK
「drag to resize」をドラッグしてアニメ全体が見える（スクロールバーが消える）ようにする
上の「Copy & Paste Code」をクリック
→この中のテキストを自分のサイトにいれれば、CodePenに登録したSVGアニメが埋め込まれる。いったんテキストエディタにコピペしておくとよい。
埋め込みコードをテキストエディタにコピペしたら、右上の✕ボタンで閉じてよい。
ブラウザのアドレスバー（CodePen.io/.../xxx）の最後をメモしておく。これが埋め込みCodeの「data-slug-hash=」の値になる。
右上の「Editor」をクリックし、メニューから「Open on CrossBrowserTesting」をクリックすると、作成したSVGアニメが、いろいろな端末、ブラウザでどのように見えるかテストすることができる。

３．自分のサイトにCodePenを入れる

自分のサイトの新しいページを開く
ソースコードを開く
上でコピーした CodePenの埋め込みコードをコピペして入れる
ブラウザで見えるかどうか確認する。

自分のサイトへの入れ方は、サイトの作り方によって違う。

2015年1月3日土曜日

CodePenでSVG公開テスト

以下のようになる

See the Pen SVG loop animation "Island01" by Danjiro Daiwa (@danjiro) on CodePen.

CodePenで作成すると、CrossBrowserTestingサイトで、ブラウザの互換性テストができるので便利