アニメーションGIF:やめてください!

投稿されたアニメーション GIF は、延々とループ再生され続けます。

Twitter ではアニメーションを停止させる機能があり、Slack では画像を折りたたんで表示を隠すことができます。どうか、Discourse でも同様の機能を提供してください。:folded_hands:

「いいね!」 19

Stylus を使用して、すべてのアニメーション GIF のスタイル(display: none または visibility: hidden)を変更できます:

div.topic-body div.lightbox-wrapper > a.lightbox > img[src$='.gif']

「いいね!」 6

確かに、完全に同意します!かつてブラウザはこの機能をネイティブでサポートしていました。詳しくはこちらでご覧ください:

「いいね!」 9

Chrome をお使いの場合は、この拡張機能を推奨します:

「いいね!」 4

ちょっとした更新です。

このトピックには「YES」のエネルギーが溢れています。実際、今日早些頃、誰かがGIFを投稿した際にも全く同じ気持ちになりました。

@pmusaraj がこの機能に取り組んでおり、準備ができ次第更新します。

「いいね!」 12

ブラウザがGIFのすべてのページアニメーションを停止するために \u003ckbd\u003eesc\u003c/kbd\u003e へのサポートを廃止したのは残念です。人々は忘れがちですが、これは本当に存在していた機能なのです。

「いいね!」 5

素晴らしい機能リクエストをありがとうございます、@ganncamp。これは完了しました(コミット)し、こちらの meta にデプロイ済みです。画像をクリックするとアニメーションが一時停止し、その後再開されます。ブラウザのセキュリティ制限により、一時停止時には画像の最初のフレームのみが表示され、クリックされた瞬間のフレームを表示することはできません。

試してみるための必須 GIF を以下に示します:

giphy-4

「いいね!」 17

とても良い出来です。いくつかの小さな提案があります:

  1. 何が起こったかをユーザーに理解してもらうために、小さな「一時停止」のオーバーレイを追加するのはどうでしょうか?(右下に半透明の II など)

  2. 確信はできませんが、これは GIF が完全に読み込まれた後でしか機能しないのではないかと思われます。一部のアニメーション GIF は読み込みに時間がかかることがあります。ローカル環境でスロットリングを使って、GIF が完全に読み込まれていなくても一時停止が機能するかテストしてもらえますか?

「いいね!」 7

Meta で気づいた奇妙な動作についてです。
私はここに GIF を投稿しました https://meta.discourse.org/t/badges-and-general-chattiness-of-discourse/187971/19?u=geoff777

しかし、再生が止まりませんでした。2 つのブラウザで試しましたが、同じ結果でした。
このスレッドは以前読んだことがあったので訪れました。
「STOP IT」という GIF をクリックすると、再生が停止しました。
自分の投稿に戻ると、今度はそこで再生が停止するようになりました。

つまり…
テスト、テスト、テスト…

Thats So Raven Hello GIF by Cameo

「いいね!」 3

GIF のホバー時に「現在の GIF を停止」ボタン alongside に表示される設定を追加するのはどうでしょうか:

  • 自動再生 GIF のオン/オフ(セッションに保存)
「いいね!」 4

Geoff、ありがとうございます。アップロードが機能しない技術的な理由は、現在この機能がデータベース内のアップロードにのみ対応しているためです。上記のアップロードはGiphyのURLであり、ローカルアップロードの記録が存在しません。特定のURLにあるアセットがアニメーション画像なのか通常の静止画なのかを確実に判別できないため、他のURLからのアニメーション画像への対応を容易に拡張することはできません。

GiphyのURLなどについては推測することは可能ですが、アップロードがローカルで行われ処理されるまで、確実なことはわかりません。

追記:ああ、上記の投稿にあるGiphyのアップロードがローカルにダウンロードされたため、一時停止機能が動作するようになりました。

「いいね!」 4

上記で投稿したGIFは現在一時停止できませんが、ページをリフレッシュすると停止するようになりました。

おそらく、この一時停止できない問題は投稿者側にのみ発生し、リフレッシュで解決するもののようです。

編集:すみません、@pmusaraj さんの上記の投稿を今読みました。

なるほど、その通りですね。ローカルに読み込まれているときは一時停止機能が動作します。
つまり、ごく短時間だけ一時停止機能が使えない状態になるのですね。参考になりました。ありがとうございます。

「いいね!」 2

一時停止アクションは機能しますが、キャンバスは GIF が完全に読み込まれるまで最初のフレームを読み取ったり描画したりできません。これを適切に修正するのは難しいと思うため、canvas 要素に微妙な背景色を追加しました。表示は以下のようになります:

また、再生/一時停止アイコンやその他のいくつかの改善も追加しました。

「いいね!」 10

このトピックは6日後に自動的に閉鎖されました。新しい返信は許可されていません。

ライトボックスが邪魔になっているのがお分かりいただけると思います。以下のアニメーション GIF をクリックまたはタップして、動作を比較・対照してください。

ed1bdf66998acb6fa9d93c4d8b318dbb07c15203

igor-bastidas-2

2 番目の GIF では、まあまあとはいえ機能しています。ただし、ライトボックスの拡大と縮小が一時停止/再開のクリックの 1 つを吸収してしまうという注意点があります。

「いいね!」 3

はい、@pmusaraj さん、これを再オープンします。アニメーション GIF がライトボックス表示される場合の処理をより良くする必要があるでしょう。現状では非常に不便です。

どうするのが正解か分かりませんね?アニメーション GIF をライトボックス表示しないようにする?あるいは、これらのケースでは「一時停止」と「全画面表示」のクリック領域を分ける?

「いいね!」 2

もしかしてこれでしょうか?アニメーション GIF をライトボックス表示することに何かメリットがあるとは思えないのですが…

「いいね!」 7

技術的には、見せびらかすための巨大なアニメーションを用意することも可能かもしれません。

とりあえずライトボックスを無効にして、誰かが文句を言うか見てみるのはどうでしょうか?通常は良くない結果を招き、アニメーション GIF には役に立たないという点には完全に同意します。

「いいね!」 6

もちろん、アニメーション GIF の場合、ライトボックスを無効化するのが簡単なら、そうしましょう。おそらく、バックポートも必要ですね!

「いいね!」 3