READMEに載せたGIFの重なりを解決したいです。

Question

##　READMEに載せたGIFがGitHub上だと重なって自動再生されてしまいます、この重なり解決したいです

• 下の添付画像のように一つ前に再生されたGIFが左上に表示されてまた再生されてしまい、

　とても見にくい状態が怒ってしまっています。

こちらが解決したいURLになります。

###自分で試してみたこと

• READMEにて、GIFの末尾に改行を入れてみたが直りませんでした。
• 似たような記事がないか探してみましたが、見つけられませんでした。。

初めてREADMEを上げるのでマークダウン記法やREADMEの記述ルール等、分からないことばかりなので、
どなたか解決策を教えていただけると幸いです。

よろしくお願いします。

Comments

[yumetodo]

当該URLを提示してください

[Daikichi_ttt]

yumetodoさん、かしこまりました。
https://github.com/DaikiTanaka34432/sense-34432
こちらのリポジトリになります。よろしくお願いします。

[yumetodo]

Windows10のFirefox, Chrome, Edge最新版で再現を試みましたが再現しません。PCを再起動しても再現するか確認し、再現する場合は環境を教えて下さい。

[Daikichi_ttt]

yumetodoさん、ご確認ありがとうございます。
macOS Big Sur ver.11.2, Chrome,
PC再起動をしてみましたが、それでも不具合が直りませんでした。
環境によっては今回のような事例はよく起こりうることなのでしょうか？

[yumetodo]

あー、自分のgif閲覧時間が足りなかった。確かにその当時のcommitを今よく見たら再現しますね。気がつけばgif生成側に問題と言えたのに力になれずすみません・・・。くやしい。

[Daikichi_ttt]

yumetodoさん、
いえいえ、一緒に考えてくださりありがとうございました。
また何かありましたらよろしくお願いします！

Answer 1

上記の不具合、解決しました。
原因は、mp4からGIFへ変換する際に
cd 動画のあるディレクトリ

ffmpeg -i sample.mp4 -an -r 10 %04d.png  // 10frames/secでpng作成
convert *.png -resize 40% output_%04d.png  // 作成したpngを40%にリサイズ
convert output_*.png result.gif  //  gifに変換

を実行したのですが、ディレクトリにresulut.gifを残したまま次のGIFを作成していました。
おそらくですが、convert output_*.png result.gifをするたびに前のresulut.gifに上書きされて、今回のような現象が起きたのではないかと考えました。

上記コマンドを実行してGIFに変換する際、ディレクトリ内に出力されたresult.gifを逐一削除するか、もしくは別の名前を付けて出力するかで、無事正常に表示されました。

yumetodoさん、ご協力ありがとうございました。