この発想はすごい！アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js

アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。 canvasに書き込むという発想がすごいですね。 通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。 Freezeframe.js -GitHub Freezeframe.jsの特徴 Freezeframe.jsのデモ Freezeframe.jsの使い方 Freezeframe.jsの特徴 Freezeframe.jsではアニメーションgifの最初のフレームだけをcanvasに書き込み、gifの静止画バージョンを自動作成します。あとは、この静止画バージョンとアニメーションgifをトリガーで切り替え、アニメーションgifを再生・停止させます。 下記は、ホバーで

[coliss]

アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリ。

[ifttt]

スクリプト内部でどういう動作してるか触れてもないのに「この発想はすごい！」も何もなくないか？

[deokisikun]

停止絵は１フレ目に固定なのね。でもホバーで動くというアイデアはPCブラウザユーザーには良さそう。webベースのスライドに組み込んだら良さげ

[solidstatesociety]

これがすごいのは次の応用で漫画がGIFでまとめれそうだなと思うところ

[kiti-net]

Gifアニメ　canvas

[jdash]

シネマグラフのものに良いですね。停止したフレームのものを別に作らなくても良いのがナイス。

[mztns]

hoverで静止画と動画を切り替えるだけならcssだけでできるよね

[wordi]

任意フレームで一時停止したいな、改造したら出来るだろうか

[OKOKOK]

あとでまた読みます

[securecat]

ほおー

[north_korea]

普通に誰でもこのやり方を考えると思うが…

[daichirata]

Gifってこの辺結局うまくいかないイメージだけど、現状のブラウザのシェアの感じだといけるのか

[gxg]

スマホメインで考えてほしい

[versatile]

みかんみてたら虫が出てきた

[Knoa]

ん？autoplay(自動再生)もposter(初期画像)も自在に設定できる、video要素のように扱えるAPIを提供してくれるんじゃないの？もし違うなら、そっちの方がよくね？

[field_combat]

どこかで使うかも

[otihateten3510]

動くかどうかわからんのが難点？