2019年08月22日の日記です


SVG うねうね  2019-08-22 18:26:55  コンピュータ

前回日記に書いた、仕事で必要なリアルタイムの絵の生成の話。


Canvas で生成したり、CSS でアニメーションしたりするのは以前からよくやっているのだけど、SVG でアニメーションする必要があった。

これが僕にとっては未知の技術だったので、今回のデモでは「あらかじめ作った絵でごまかす」を選んだのだった。




SVG でアニメって、SMIL とかいう技術を使うんだよな…と思っていたら、今は SVG + CSS Animation もできるらしい。

僕の知識がすでに古かった。


で、やりたいことを CSS Animation でやってみたら、できなかった。

CSS だと、単純な移動とかはできても、path を動かしたりは融通が利かない。

(アニメ自体はできるけど、制御が利かずに思ったようには動かない)


じゃぁ、SMIL ならできるのか、と調べると、こちらも単純な移動程度。


結局、1コマづつ画像を生成して、連続表示するという泥臭い方法をとるしかないことを知った。



仕方なく泥臭い方法で作ったら、思い通りに動いた。

思ったよりは簡単だった。


作ったのは、データに応じてリアルタイムに動く円グラフと、棒グラフと、ベジェによる曲線グラフ。




SVG 、今までややこしそうで避けていたのだけど、理解してみたら便利だな。

回路図程度なら、画像を描くよりも SVG で入れてしまった方が楽かもしれない。




同じテーマの日記(最近の一覧)

コンピュータ

別年同日の日記

04年 大忙しです

13年 国立科学博物館

17年 夏の家族旅行 2017

17年 下田海中水族館

17年 とうてんぽーる

17年 アニマルキングダム・動物園エリア

17年 アニマルキングダム・遊園地エリア

17年 アニマルキングダム・2周目~帰路


申し訳ありませんが、現在意見投稿をできない状態にしています


戻る
トップページへ

-- share --

0000

-- follow --




- Reverse Link -