Image 애니메이션 계속해서 움직이게 하는 방법

게임에서 이미지 뒷배경처럼
계속해서 이미지가 흘러가는 것은 animation 어떤식으로 해야할까요?

translateX로 했을 때 이미지가 움직이고 다시 돌아오면서 연속성이 중간에 끊어지게되는데
이부분 어떻게 처리할 지 고민인데 혹시 방안이 있을까요?

하나의 이미지 a가 처음과 끝이 연결되어야 하며(이미지 첨과 끝이 같아야 이어붙여도 자연스럽기 때문에),
같은 이미지 두 장으로 하면 미리 로딩해놓은 거를 옮기고 화면에서 사라졌을 때, 다시 앞으로 보내면 되지 않을까요?

그림이 오른쪽에서 왼쪽 방향으로 움직인다고 가정해볼께요. 같은 이미지 두 장 a1, a2 가 있다고 가정하면 처음엔. a1,a2 로 애니메이션 시키다가 화면에서 a1이 사라졌을 때, a2뒤에 a1을 붙이고 a2가 사라지면 a1뒤에 a2를 붙이고 이런식으로 무한 루프하면 자연스럽게 애니메이션 시킬 수 있을겁니다.

keyframe을 이용하시면 무한루프가 쉬워지실것 같습니다 :slight_smile:

이거 말씀이신지요?

감사합니다 저도 삽질하다가 이방법으로 시도해봤는데 제일 나은 방법같아요!
근데 이미지 2개 타이밍이 가끔 어긋날때가 있었는데 다시 해보겠습니다!

1 Like

키프레임은 css 문법이라 어느 리이브러리라도 호환이 가능합니다 e.g.) styled-components, react-spring

1 Like