Fork
0
Fav
0
View
485
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 48 lines
  • HTML 0 lines
  • CSS 10 lines
XNGはSVGを使ったパラパラアニメーションの俗称.
http://blog.mecheye.net/2014/10/xng-gifs-but-better-and-also-magical/

仰々しい名称なものの, その実単なるSMILアニメーションなだけで「一発ネタ」と思われていた.
(だってIE系でSMILは使えないから)

しかし, SMILの部分をCSS Animationsに変えてみたら
FireFox, Chrome, Safari, Edgeという極めて広範な環境で動作することが判明した.
(これは時間経過による実装度の向上がもたらした僥倖)

このことからcanvasで作ったアニメーションをXNG経由でCSS背景等に挿入することができる.
しかもXNG自体は単純な構造をしているため, スクリプトによる生成が極めて簡単.

これまでもcanvasアニメーションをCSS背景に挿入する方法は幾つか存在した(element関数や-webkit-canvas)のだが,
blink, EdgeHTMLには代替手段が存在せず, 面倒でもアニメーションGIFに変換する必要があった.

注意点
・余りにフレーム数の大きなアニメーションには不適
(1枚ペラ画像のサイズ上限に達する危険がある)
・生成したXNGはブラウザでのみ動作する

追記・・・Chrome56で動かなくなってしまった…なんとかして
  • XNG(SVG+CSS Animations)を使った背景アニメーション
  • XNG(SVG+CSS Animations)を使った背景アニメーション

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

defghi1977

Author

svgはいんすぴれーしょん http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm 重箱の隅っこをつっついて,にんまり. ドキュメントにまとめて,にっこり.

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags