오늘 한 일:

• 배민찬 step5, 6, 7
  • 슬라이드효과
  • 무한롤링
  • 추가 슬라이드 UI 구현

내일 할 일:

• 배민찬 PR

배민찬

슬라이드 효과

기본이 되는 렌더링 기능구현 후 어떤 값들을 변할 수 있을 지 고민함

1. 애니메이션: 변하지 않음. 이미 클래스 이름이 slideStyleSceneChagne이므로 애니메이션은 정해졌다
2. 스피드: 변할 수 있다. 스피드는 옵션으로 주는게 좋다고 생각(duration)
3. 한 번에 표시되는 ListItem의 개수: 변할 수 있다. item의 형태나 wrapper의 크기가 변하면 변할 수 있다
4. wrapper의 크기: 변할 수 있다. 전체적인 페이지 레이아웃이 변할경우

결정: 2,3,4번

2번(스피드)의 경우 duration이라는 옵션을 주고

3번과 4번의 경우를 고려해서 이동하는 정도를 wrapper나 item의 크기에 맞게 동적으로 변하게끔 결정

• element.offsetWidth를 이용해 wrapper와 item의 width를 가져온다

무한 롤링

앞 뒤로 더미데이터를 생성

flow

렌더링

1. 한 세트의 sceneList를 렌더링한다
2. 한 세트의 sceneList의 폭(sceneListWidth)을 계산한다
3. 앞 뒤로 똑같은 sceneList를 렌더링한다
   • leftDummyScene - originScene - rightDummyScene
4. 계산한 sceneListWidth만큼 전체 sceneList를 이동한다:initScenePosition(start)

wrapper가 rightDummyScene으로만 구성됏을 때: originScene으로 다시 이동한다

1. 전체 location이 특정 position이 된다(-2*sceneListWidth)
2. initScenePosition(start)

wrapper가 leftDummyScene으로만 구성됏을 때: originScene으로 다시 이동한다

1. 전체 location이 특정 position이 된다(-sceneListWidth + wrapperWidth)
2. initScenePosition(end)

마구 누를경우를 방지하지 위해: event throttling

const throttle = function({delay, callback}) {
  let standardTime = 0;
  return function() {
    const now = new Date().getTime();

    if((now - standardTime) <= delay) return;

    standardTime = now;
    callback();
  }
}