SVG SMIL ループアニメーションを作る方法
SMILの <animation コマンドに繰り返し設定(repeatCount="indefinite")をつけて無限ループすることは可能だが、
これでは、1つの図形の繰り返ししかできない。
ほんとにやりたいのは、1シーンの繰り返しだ。
図形の重なり順位が変化したり、新しい図形が出現、消滅する。
これを実現するには、個別に <animateをつけるしかない。
各図形には、登場と退場の命令をつけることになる。
繰り返しを行うならば、その登場と退場を、シーン全体の時間からの相対時間で
制御することになる。
ここで、ブラウザのSVGビュアの実装が問題になる。図形が多くなると
全ての図形を時間どおりに制御することができなくなる。
Firefox 以外のブラウザでは、どうも、時間が間に合わないときに、
命令の読み飛ばしが行われるようだ。
このとき、登場、退場の命令が読み飛ばされると、「図形が表示されない」、または、
「図形が残る」という症状になる。これが同じ時間の図形がすべて「表示されない」ので
あれば、1コマが表示されないことになり、見た目は悪くない。
しかし、一部の図形だけが表示されないのであれば、崩れた表示になる。
また、退場の命令が読み飛ばされると図形が残ることになる。
通常、時間がたつと、どんどん上書きされるように処理が進むため、残った
図形は問題にならない。しかし、ループ制御によって、早い時間の図形から
もう一度表示する場合、前回に表示され、退場するはずだった図形が
残っていると、その図形が一番上に表示されてしまい、見苦しいものとなる。
これを防ぐためには、全体のループの時間を、本来の時間より、0.5秒ほど
長くし、最後に表示した図形が退場する時間の余裕をとっておくことである。
また、最初にすばやく描画できる背景をいれておき、画面が真っ白になるのを防ぐ
Danjiro's 9VA SVG アニメーション
Raspberry Pi / Macintosh /Ubuntu 用のベクトルアニメーションソフト、9va-pi (きゅうべえ: 9は数字の9)と、SVG(Scalable Vector Graphics)に関する情報
2015年1月21日水曜日
2015年1月16日金曜日
C, C++プログラムの開発環境
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をいれる
1.SVGアニメを作る
- 9va-pi でアニメを作成
- 「ファイル」>「名前をつけて保存」
- 右下のファイル属性を「9VA/EVA」から「SVG」に変更して保存
2.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アニメが、いろいろな端末、ブラウザでどのように見えるかテストすることができる。
3.自分のサイトにCodePenを入れる
- 自分のサイトの新しいページを開く
- ソースコードを開く
- 上でコピーした CodePenの埋め込みコードをコピペして入れる
- ブラウザで見えるかどうか確認する。
2015年1月3日土曜日
CodePenでSVG公開テスト
CodePenでSVG公開テスト
以下のようになる
See the Pen SVG loop animation "Island01" by Danjiro Daiwa (@danjiro) on CodePen.
CodePenで作成すると、CrossBrowserTestingサイトで、ブラウザの互換性テストができるので便利
CodePenで作成すると、CrossBrowserTestingサイトで、ブラウザの互換性テストができるので便利
2014年12月26日金曜日
Linux (Ubuntu, Mint) 版 9va-pi 公開
Linux (Ubuntu, Mint) 版 9va-pi 公開
こちらからダウンロード- Linux Mint 17 で作成したが、Ubuntu 14 でも動作する。
- Puppy Linux 5.7.1 でも、libgtk-3 と libgtk-3-common を入れると動いた。mpg321を追加すると音も出た。
2014年12月19日金曜日
中古PCにどのLinuxを入れたらいいか
中古PCに、どのLinuxを入れたらいいか
いまのところ、以下のように選べばよいと思う- HDD がこわれているなら、Puppy Linux の CDブート
- DVDがない、または、メモリが128MB以下なら、Puppy Linux のインストール
- メモリが512MB以下で、DVDがあるなら、Linux Mint
- メモリが1GBで、DVDがあるなら、Ubuntu
Linux Mint の日本語化
メニュー>設定>入力メソッドfcitx をインストール
メニュー>設定>Fcitx設定
変換はMozc
設定ツールの追加
ターミナルから
sudo apt-get install mozc-utils-gui
HDDのない中古PCをラズベリーパイのディスプレイにする
HDDのない中古PCをラズベリーパイのディスプレイにする
友人からPCをもらったが、HDDが壊れているという。ひどい。しかし、KNOPPIXをCDブートして、ラズベリーパイのディスプレイとして使えることがわかった。
この中古PCは、
HDDが壊れている。LANは本体にはない(PCMCIA、ドッキングベイ)。CDあり。
- いくつかのバージョンがあるが、KNOPPIX 5.1.1 がよかった。Ver.6 Ver.7 はかっこいいが、古いPCのLANカードを認識しなかった。
- べつのパソコンで、KNOPPIX 5.1.1 のイメージ ISO をダウンロードし、CDを作成する。DVDだと中古PCは認識しない。
- ハードディスクのこわれた中古PCに、KNOPPIX CDを入れて起動。そのまま実行すると、640x480 の表示になるが、起動時の boot: のあとに「fb1024x768」と入れると、1024x768になる。
- Raspberry Pi には、tightvncserver を入れ、自動起動するようにしておく。Raspberry Pi は固定IPアドレスにしておく。
- Raspberry Pi と、KNOPPIXをどちらも同じネットワークにつなぐ(LANケーブル2本使用)。
- KNOPPIX側でコンソールを起動。xvncviewer 192.168..(ラズベリーパイのアドレス):1 と入力(ラズパイのIPアドレスに:1をつける)。VNCパスワードを入力すると、ラズパイのデスクトップが見えた。
- Raspberry Pi と、KNOPPIXを1本のLANケーブルで直結する場合は、KNOPPIXもRaspberryPi と同じ仲間の固定アドレスにしておく必要がある(IPアドレスの上の3つの数字を同じにする)。それをするには、コンソールで、「netcardconfig」を実行する。接続先が、eth0 eth1と表示されたら、LANケーブルをつなぐ先が2つあるということなので、実際にLANケーブルをつないだほうを変更すること。最初に、KNOPPIXのアドレスを、ラズベリーパイのIPアドレスの最後の数字だけ変更したものに設定したら、あとは、デフォルトの値でよい。
CDブートにはすこし時間がかかるが、xvncviewerが起動してしまうと、あとは十分な速度でRaspberryPiのディスプレイとして使える。
ラベル:
Linux,
RaspberryPi,
中古PC
登録:
投稿 (Atom)