이게 무슨 효과? 무슨 기능인지 아시나요 ?? 채택완료
+ 버튼을 누르면
시계방향으로 이미지가 보여지는 효과인데.
이게 무슨 기능? 무슨 효과 인가요?
검색을 해봐도 도통 관련 자료들이 나오질 않네요ㅠㅠㅠ
이미지가 시계 방향으로 클리핑 된 것처럼 보여지게 하고 싶은데..
어떤기능이 적용되어 있는 건가요 ..?
레퍼런스 : http://design.samsung.com/kr/contents/galaxy_watch/
답변 3개
아르키어드
자바스크립트로 canvas에 이미지를 그리는겁니다.
기초
https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Basic_animations
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
에어팟프로 페이지를 벤치마킹 한것같은데,, 역시 퀄리티는 에어팟프로를 따라가지 못한것 같지만 그래도 잘만들었네요..
기본 배경화면은 다음과 같은 이미지를 사용하였구요
http://design.samsung.com/kr/contents/galaxy_watch/img/sec2_watch_default.jpg
아르키어드님의 답변처럼 자바스크립트를 통해 이벤트가 발생하면 캔버스에 그림을 그리는 형식입니다.
해당 페이지의 소스보기를 클릭하시면
canvasElement.js 에서 캔버스용 js파일을 만들고
page.js 에서 이것들을 사용하시는걸 보실 수 있습니다.
page.js 에 이벤트 발생시 실행시킬 함수들을 작업해놓은 것 같구요
음.. 좀더 파보면 좋겠지만 시간이 오래걸릴 것 같네요..
참고 되셨으면 좋겠습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
아르키어드canvas로 클릭시에 나타는 이미지들을 숨겨놓고 클릭이벤트시에 정해진 위치부터 시작하게 나타나게 한것같네요 소스코드 좀봤더니 3개 이미지 분할해놓은 이미지를 백그라운드로 깔아놓고 그위에 캔버스 애니메이트를 돌렸습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인