目玉を光らせるアニメーション GIF を作る Pull Request を送った
今更だけどタイトル通りの pull request を送った。 目を光らせたい人は→ Medama Cherenkov Maker
きっかけとしてはブログを愛成会病院の旧サイトっぽくしたくて手始めにアイコンの目を光らせようと思った所で ふと @anekos さんのこの記事を見て JavaScript 製のジェネレーターがあるのを知ったので、 Chrome 対応とアニメーション GIF 対応をした。
その後の様子
そもそもブログを愛成会っぽくしたかったんだけど、そもそもプロフィールにアニメーション GIF 登録しても動かない事に気付いた… https://t.co/sI8WNPBACg
— tyru🍆 (@_tyru_) July 14, 2018
JSGIF 便利
canvas から GIF アニメのバイナリを生成できる JavaScript ライブラリ。
encoder.addFrame(CanvasRenderingContext2D)
する度 GIF アニメの1コマが追加される。
内部で ByteArray
に GIF のバイナリを構築していくので、
最後に encoder.stream().getData()
でバイナリを取り出して base64 化して img 要素に表示するだけ。すごい。
↑のサンプルコードで十分だけど、一応書いておきます。
<!-- 必要なライブラリを読み込む --> <script type="text/javascript" src="LZWEncoder.js"></script> <script type="text/javascript" src="NeuQuant.js"></script> <script type="text/javascript" src="GIFEncoder.js"></script> <script type="text/javascript" src="b64.js"></script>
const encoder = new GIFEncoder(); encoder.setRepeat(0); // 0 = loop encoder.setDelay(500); //go to next frame every n milliseconds encoder.start(); while (...) { // context になんか描く // encoder.addFrame() する度 GIF アニメの1コマが追加される encoder.addFrame(context); // context.clearRect(0, 0, width, height); して現在のコマをクリアした方がいいかもしれない } encoder.finish(); const binaryGIF = encoder.stream().getData(); // <img id='image'> に GIF アニメを表示 const img = document.getElementById('image'); img.src = 'data:image/gif;base64,'+encode64(binaryGIF);