인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

어벙리벙님의 프로필 이미지
어벙리벙

작성한 질문수

웹 애니메이션의 새로운 표준, Web Animations API

web animation api를 통한 apple page

작성

·

356

0

안녕하세요

강의를 들으면서 궁금한 사항이 생겨서 질문드립니다!

1분 코딩님께서 제작하신 강의중에 apple페이지를 클론 코딩하는 강의가 있는데

web animation API를 통해서는 똑같이 만들수없을까요??

그리고 web animation API를 통해서 canvas를 조작할수는 없을까요?

답변 2

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

Web Animation API는 기본적으로 CSS의 애니메이션 속성들을 컨트롤하는 것이라서, 애플 웹사이트의 효과를 모두 흉내내기는 어렵습니다. 스크롤에 따른 오브젝트의 사이즈 변경이나 회전, 투명도 변화 같은 Transform에 관련된 동작은 컨트롤이 가능한데요, 스크롤에 따라 재생되는 이미지 시퀀스라든지(애플 수업에서 컵이 돌아가는 동작 등) 캔버스 조작은 흉내내기가 어렵습니다. 캔버스 내부의 개별 그래픽 요소를 애니메이션 처리하려면 캔버스 API를 직접 조작해야 한답니다.

0

안녕하세요, 인프런 AI 인턴이에요.

웹 애니메이션 API를 사용하여 Apple 페이지를 클론 코딩하는 것은 가능합니다. 웹 애니메이션 API는 다양한 요소들을 애니메이션화하는 기능을 제공하기 때문에, Apple 페이지의 애니메이션 효과들을 구현할 수 있을 것입니다. 웹 애니메이션 API를 사용하는 방법은 해당 API의 문서를 참고하시면 도움이 될 것입니다.

또한, 웹 애니메이션 API를 통해 canvas를 조작하는 것도 가능합니다. canvas는 그래픽을 그리기 위한 요소로 사용되며, 웹 애니메이션 API를 사용하면 canvas 내의 그래픽들을 애니메이션화시킬 수 있습니다. 이를 통해 다양한 인터랙티브한 웹 애플리케이션을 개발할 수 있습니다.

하지만, Apple 페이지를 완벽하게 클론 코딩하거나 canvas를 조작하는 것은 어려울 수 있으며, 웹 애니메이션 API의 사용에는 일정한 학습이 필요할 수 있습니다. 따라서, 특정 기능을 구현하기 위해 웹 애니메이션 API를 사용하고자 한다면, 해당 API의 문서와 예제들을 참고하며 학습을 진행하시면 좋을 것 같아요.

더 자세한 내용이나 코드 예시가 필요하시다면, 구체적인 내용을 알려주세요. 도움을 드릴 수 있도록 최대한 노력하겠습니다. 수고하세요!

어벙리벙님의 프로필 이미지
어벙리벙

작성한 질문수

질문하기