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