여러개의 이미지를(N) to 한개 이미지(1) gif 효과 만들기

프로젝트에서 이미지 api에서 받아온 이미지 url로

 

이미지 파일 N개 혹은

이미지 파일 1개를 같은 width, height 값으로 N개 분할하여

 

여러개의 이미지

이미지 N개를 1개의 연결된 gif 이미지로 보여주려는 작업요건이 필요했다. 

 

그래서 일단 해당 요건을 테스트 해보기 위해 테스트 소스를 작성해보았다.

 

codepen.io/shlee0882/pen/QWGmJbm

이미지 gif 효과 만들기

위 소스는 캔버스를 이용해 특정영역을 잡고

이미지 데이터 주소를 획득하여 배열에 넣은 다음

마우스 hover시 이미지 정보가 담긴 배열을 0.5초 간격으로 번갈아 가며 보여주며

마우스 out시는 반복을 멈추는 소스코드이다.

 

그럼 이 코드로 기본검증이 끝났으므로

 

응용하여 gif를 생성하는 라이브러리를 사용하지 않고 (not use gif library)

아래와 같은 움직이는 gif이미지를 생성한 것 같은 착각을 일으키는 코드를 작성할 수 있다.