웹에 적합한 애니메이션을 지원하는 형식은 무엇입니까?

13

웹에 적합한 애니메이션을 지원하는 형식과 각각의 장단점은 무엇입니까?

image-format animation

— 알리 늄
소스

웹용 일러스트레이션에 애니메이션을 적용하는 가장 좋은 방법 은 무엇입니까?를 참조하십시오 . 각 형식에 대한 자세한 내용

— Zach Saucier

13

필요한 애니메이션 유형에 따라 다릅니다.

.gif 이미지 -완전히 지원되지만 프레임에 제한적으로 사용됩니다. .png 파일은 애니메이션을 지원해야하지만 야생에서는 자주 볼 수 없습니다.
Flash, Silverlight 및 기타 플러그인 -Flash는 가장 보편적으로 사용되지만 모든 플러그인은 브라우저에 설치해야하며 사용자 컴퓨터에 반드시 설치 될 필요는 없습니다. 모바일 플랫폼에서는 작동하지 않을 수 있습니다.
CSS3- 제한된 변환 또는 애니메이션, 제한된 브라우저 지원.
HTML5 비디오 -미래지만 제한적인 브라우저 지원.
JavaScript- 활성화해야하지만 거의 보편적 인 브라우저 지원이 있어야합니다. 제한된 유형의 애니메이션. Raphael.js를 참조하십시오 .
캔버스 태그 -최신 브라우저 지원이지만 풍부한 애니메이션을 지원합니다.

— 버츄 오시 미디어
소스

여기서는 nitpick하겠습니다. 그러나 <canvas>애니메이션은 본질적으로 JavaScript입니다. 이것은 물건을 그릴 수있는 형식과 다릅니다. 정확하게하려면, HTML 요소 애니메이션, SVG (raphael.js에서 사용)와 HTML5를 구분해야합니다<canvas>

— Yi Jiang

간단히 말해서 SVG와 캔버스 애니메이션 의 차이점 -SVG를 사용하면 모든 경로는 클릭 및 마우스 오버와 같은 데이터와 이벤트를 div처럼 바인딩하고 상호 작용할 수있는 요소입니다 .Canvas에서는 브라우저가 물건을 만드는 것과 비슷합니다. 그런 다음 행동 규칙은 잊어 버립니다. SVG는 IE 9 이전의 IE에는 존재하지 않기 때문에 Raphael이 훌륭합니다. SVG를 제어하거나 IE6-8에서는 IE의 자체 브랜드 자체 (VML)를 사용합니다. 내가 Raphael이 작동하지 않는다는 것을 아는 유일한 것은 오래된 안드로이드 주식 브라우저입니다 (버전 2 이전).

— user56reinstatemonica8 2018

2

이것은 Virtuosi Media의 훌륭한 답변에 추가됩니다.

Apple은 최근 사이트의 애니메이션에 여전히 JPEG 및 PNG 이미지를 사용했습니다. 그들은 JavaScript를 사용하여 이미지를 전환합니다. 너무 많은 프레임이없고 알파 투명도 지원이 필요하며 페이지에 애니메이션을 배치하고 넓은 브라우저를 지원하려는 경우 훌륭한 기술입니다. 단점은 다운로드 크기와 노력입니다.

대화식 일 수도 있습니다. Apple의 iPad 페이지에서 Smart Cover 섹션으로 스크롤하면 실제로 작동하는 것을 볼 수 있습니다. http://www.apple.com/ipad/features/

— 마크 에드워즈
소스

1

이미지 아래 레이어의 애니메이션 이미지 위에 투명도가 포함 된 이미지를 오버레이 할 때. PNG24는 앤티 앨리어싱이 배경 이미지와 올바르게 혼합되는 유일한 이미지 형식입니다. GIF와 PNG8을 사용하면 가장자리가 모두 뭉툭하다는 것을 알 수 있습니다. 잘 보이지는 않지만 놓치기 쉽습니다.

— 존 드레 팔
소스