2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Goで複数の画像を束ねてアニメーションSVGをつくるコマンドを書いた

Posted at

Github: high5/picsv

下記のコマンドは、
ドロイドちゃん を歩かせて、途中で鳥を飛ばしたり、雪を降らせたりするサンプルです。

$ picsv -o output.svg \
-pics_1 background.gif \
-pics_2 front_1.gif,front_2.gif,front_3.gif,front_4.gif \
-pics_3 bird_1.gif,bird_2.gif,bird_3.gif,bird_4.gif \
-begin_3 3.5 \
-repeat_3 1 \
-pics_4 snow_1.gif,snow_2.gif,snow_3.gif,snow_4.gif \
-begin_4 6.5 \
-repeat_4 3 \

作成したSVGは下記のように動作します。

output.svg

※ IEでは動作しないです。

内部的には、base64エンコードしたimageを SVGのanimate要素で制御して、*.svgとしてアウトプットしています。
animate要素を使ったアニメーションSVGは単一のファイルで細かい制御ができて、gifオルタナティブな感じがして個人的にはいいなと思っていたのですが、作成したsvgを表示させてchromeのinspectを開くと、
SVG's SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead. と表示されるようになってました。
下記の記事にあるように、animateは将来的にはChromeではサポートされなくなる可能性があるみたいです。
Chrome 45 BetaからSVGのSMILアニメーションが非推奨に
SVGアニメーションの現状

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?