배민찬

화면전환효과 리팩토링

SceneChange와 SceneChangeButton과 SceneChangeNavigator로 나눴으나 더 복잡해짐.

이정도 크기의 클래스는 현업에서 굳이 나누지 않는다는 크롱의 리뷰.

따라서 다시 하나의 클래스로 합치기로 함: NavigatorStyleSceneChange

설계

flow

init을 호출
버튼을 scene의 개수에 맞게 렌더링
좌우버튼과 네비게이터에 이벤트리스너를 붙임
- 좌버튼: leftButton과 leftAni이용
- 우버튼: rightButton과 rightAni이용
- 네비게이터: leftAni와 rightAni를 사용해서 조건에 따라 다르게 호출
  - 애니메이션
  - 버튼 활성화

class NavigatorStyleSceneChange {
    _registerAllEventListener() {}
    _animateScene({previousIndex, nextIndex, animation}) {}
    _activateNavigatorButton({index, style}) {}
}

구현

const newDishes = new NavigatorStyleSceneChange({
  sceneList: document.querySelectorAll('.new_dishes_img'),
  leftButton: document.querySelector('.new_dishes > .notice_left_button'),
  rightButton: document.querySelector('.new_dishes > .notice_right_button'),
  leftAnimation: slide({speed: 0.9, type: 'left'}),
  rightAnimation: slide({speed: 0.9, type: 'right'}),
  navigatorWrap: document.querySelector('.new_dishes > .notice_navigator_wrap'),
  navigatorButtonTemplate: new Template().noticeNavigatorButton,
  activeNavigatorButtonStyle: 'active_notice_navigator_button'
})

newDishes.init();

인자가 너무 많다는 생각이 든다

currying

requestAnimationFrame의 콜백함수에 curry를 사용

function _fade() {...} // 본래 애니메이션 함수

const objectCurry = function({callback, numberOfKey}) {
  return function f(obj) {
    if(Object.keys(obj).length >= numberOfKey) return callback(obj);
    return (restObj) => f(Object.assign(restObj, obj));
  }
}

export const fade = objectCurry({callback: _fade, numberOfKey: 3});

일정개수 이상의 키값이 들어오면 실행되는 curry
- numberOfKey로 설정한다

css를 사용한 화면전환

transition을 사용해서 구현

requestAnimationFrame을 사용한 기존코드를 재활용해서 사용하다보니 css와 js가 섞여있었다. 두 가지가 섞여있다보니 우선순위 문제때문에 애니메이션 컨트롤이 힘들었다. 모든 애니메이션을 Css로 통일시키니 해결.

css나 Js로 애니메이션 컨트롤할 때는 한가지로만 하자!

CSS 와 JS 애니메이션에 대한 이야기

지오메트리의 변경을 유발하는 작업을 일반적으로 layout(reflow)라고 부른다. reflow는 계산 비용이 비싸므로, 퍼포먼스를 고려한다면 최대한 지양해야 한다. reflow를 피하면서 모던 웹브라우저에서 매우 최적화가 잘 되어있는 대표적인 애니메이션 속성이 opacity와 transform이다.

css vs js

css-based 애니메이션은 ‘compositer thread’라는 쓰레드에서 처리되는데, 이 쓰레드는 layout이나 painting, js 실행을 담당하는 main thread와는 다르다. 따라서 main thread가 높은 비용의 계산을 처리하고 있을 때는 css을 이용해서 애니메이션을 처리하는게 바람직하다.

물론 css도 만능은 아니다. layout, paint를 유발하는 애니메이션은 css를 이용한다고 하더라도 main thread를 필요로 하기때문에 주의할 필요가 있다.

참고자료

https://developers.google.com/web/fundamentals/design-and-ux/animations/