애니메이션 GIF: 멈춰 주세요!

사람들이 애니메이션 GIF를 올리면 그게 계속, 계속, 계속, 계속, 계속 재생되고…

트위터는 애니메이션을 멈추게 할 방법을 제공해 줍니다. 슬랙은 이미지를 접어서 더 이상 보이지 않게 해 줍니다. 제발, 제발 디스커스도 비슷한 기능을 제공해 주세요. :pray:

19개의 좋아요

Stylus를 사용하여 모든 애니메이션 GIF의 스타일(display: none 또는 visibility: hidden)을 변경할 수 있습니다:

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

6개의 좋아요

물론 전적으로 동의합니다! 브라우저는 예전에는 이 기능을 네이티브로 지원했었죠. 여기에서 더 자세히 읽어보실 수 있습니다:

9개의 좋아요

크롬을 사용 중이라면 이 확장 프로그램을 추천합니다:

4개의 좋아요

작은 업데이트 하나.

이 주제에 정말 많은 YES가 있네요. 사실 오늘早些에 누군가가 GIF를 올렸을 때 저도 정확히 같은 느낌을 받았어요.

@pmusaraj 님이 이 기능을 작업 중이며, 준비가 되면 업데이트해 주실 거예요.

12개의 좋아요

브라우저들이 GIF에서 모든 페이지 애니메이션을 멈추기 위한 esc 키 지원을 제거한 건 정말 아쉽습니다. 많은 분들이 잊고 있지만, 이건 _정말 존재했던 기능_이었거든요.

5개의 좋아요

훌륭한 기능 요청을 해 주셔서 감사합니다, @ganncamp. 이제 구현이 완료되었습니다(커밋) 그리고 메타에 배포되었습니다. 이미지를 클릭하면 애니메이션이 일시 정지되었다가 다시 재생됩니다. 브라우저 보안 제한으로 인해 일시 정지 시에는 이미지의 첫 번째 프레임만 표시되며, 클릭한 순간의 프레임을 표시할 수 없습니다.

직접 체험해 볼 수 있는 GIF를 하나 첨부합니다:

giphy-4

17개의 좋아요

잘 되어 보입니다. 몇 가지 작은 제안이 있습니다:

  1. 무슨 일이 있었는지 사용자들이 알 수 있도록 작은 “일시정지” 오버레이를 추가하는 건 어떨까요? (우측 하단에 반투명한 II 표시?)

  2. (확신은 없지만) 이 기능이 GIF가 완전히 로드된 후에만 작동하는 것 같습니다. 일부 애니메이션 GIF는 로드에 시간이 걸릴 수 있습니다. GIF가 완전히 로드되지 않은 상태에서도 일시정지가 되는지 확인하기 위해 로컬에서 스로틀링(throttling)을 사용해서 테스트해 볼 수 있을까요?

7개의 좋아요

메타(Meta)에서 이상한 동작을 발견했어요.
여기에 지피에프(GIF)를 올렸는데 https://meta.discourse.org/t/badges-and-general-chattiness-of-discourse/187971/19?u=geoff777

멈추지 않았어요. 두 가지 브라우저를 시도해 봤습니다.
며칠 전에 이 스레드를 읽은 기억이 나서 여기에 왔습니다.
‘STOP IT’ 지피에프를 클릭하니 멈췄어요.
다시 제 게시물로 돌아왔더니 이번에는 멈춥니다.

그러니까 …
테스트 테스트 테스트 …

Thats So Raven Hello GIF by Cameo

3개의 좋아요

GIF를 마우스로 호버했을 때 “현재 GIF 중지” 버튼 옆에 설정을 표시할 수 있는 기능이 있으면 좋겠습니다:

  • GIF 자동 재생 켜기/끄기 (세션에 저장)
4개의 좋아요

조지프, 고맙습니다. 업로드가 작동하지 않는 기술적 이유는 현재 이 기능이 데이터베이스(DB)에 저장된 업로드에 대해서만 작동하기 때문입니다. 위에서 언급하신 업로드는 giphy URL이며, 로컬 업로드 기록이 없습니다. 특정 URL의 자산이 애니메이션 이미지인지 일반 정적 이미지인지 확실하게 알 수 없기 때문에, 다른 URL의 애니메이션 이미지로 이 기능을 쉽게 확장할 수 없습니다.

예를 들어 giphy URL의 경우 educated guess(추정)을 할 수는 있지만, 업로드가 로컬에서 처리되지 않는 한 확실하게 알 수 없습니다.

업데이트: 아, 그리고 위에 게시하신 글의 giphy 업로드가 이제 로컬로 다운로드되었고, 일시정지가 정상적으로 작동합니다.

4개의 좋아요

위에 올린 GIF가 지금은 일시정지가 안 돼요.

그다음 새로고침을 했더니 되네요.

아마 이 일시정지 안 되는 문제는 GIF를 올린 사람에게만 해당되고, 새로고침하면 해결되는 것 같아요.

수정 - 아, @pmusaraj 님의 위 글을 이제 읽었네요.

네, 말이 되네요. 로컬에 있을 때만 일시정지가 되는 거군요.
그러니까 짧은 시간 동안 일시정지 기능이 작동하지 않는 거네요. 알아서 다행이에요. 감사합니다.

2개의 좋아요

일시정지 동작은 작동하지만, GIF가 완전히 로드될 때까지 캔버스가 첫 번째 프레임을 읽거나 그릴 수 없습니다. 이 문제를 제대로 수정할 수 없다고 생각하여 canvas 요소에 은은한 배경색을 추가했습니다. 다음과 같이 표시됩니다:

또한 재생/일시정지 아이콘과 몇 가지 다른 개선 사항도 추가했습니다.

10개의 좋아요

이 주제는 6일 후 자동으로 닫혔습니다. 더 이상 새로운 답변을 게시할 수 없습니다.

여기서 볼 수 있듯이, 라이트박싱(Lightboxing)이 문제를 일으키고 있습니다. 아래 애니메이션 GIF를 클릭/탭하여 동작을 비교해 보세요:

ed1bdf66998acb6fa9d93c4d8b318dbb07c15203

igor-bastidas-2

두 번째 GIF에서는 어느 정도 작동하는 것 같지만, 라이트박스 확장 및 수축 과정에서 일시정지/재생을 위한 클릭 중 하나가 흡수된다는 단점이 있습니다.

3개의 좋아요

음 @pmusaraj 이 이슈를 다시 열려고 해요. 애니메이션 GIF가 라이트박스로 열렸을 때 처리 방식을 좀 더 개선해야 할 것 같아요. 지금은 꽤 불편하거든요.

어떤 방식으로 처리하는 게 적절할지 잘 모르겠어요? 애니메이션 GIF는 라이트박스를 안 띄우는 게 좋을까요? 아니면 이런 경우 "일시정지"와 "전체 크기"를 위한 클릭 영역을 따로 두는 게 좋을까요?

2개의 좋아요

이건 어때요? 애니메이션 GIF를 라이트박스로 보는 것에서 얻을 수 있는 이점이 있는지 잘 모르겠네요…

7개의 좋아요

기술적으로는 과시할 거대한 애니메이션을 사용할 수도 있겠네요.

일단 라이트박스를 비활성화해 두고 누가 불만을 제기하는지 지켜보는 건 어떨까요? 애니메이션 GIF의 경우 보통 좋지 않은 결과를 초래하고 쓸모가 없다는 데 전적으로 동의합니다.

6개의 좋아요

네, 애니메이션 GIF에서 라이트박스를 비활성화하는 것이 쉽다면 그렇게 합시다. 백포트도 해야 할 것 같네요!

3개의 좋아요