애니메이션 속성 재설계

animation-transition-architecture.md

문자열 데이타에서 객체 기반 데이타로 변경

animation 은 복잡한 데이타를 매번 합성해야하기 때문에 처음부터 json object 형태로 핸들링한다.

animations: [{
  duration,
  timingFunction,
  delay,
  iterationCount,
  direction,
  fillMode,
  playState,
  name,
  action: "hover" | "click" | "mouseover" | "mousedown" | "auto",
  keyframes: [
    {
      offset: 0,
      properties: [
        ["x", value],
        ["height, value],
        ["y", value]
      ]
    }
  ]
}]

Timeline 기반으로 설계

객체 자체에 timeline 으로 만들 수 있도록 구조화 한다.

1. 여러개의 animation 을 동시에 등록할 수 있다.
2. 개별 animation 은 여러 개의 속성을 가진다.
3. 각각의 속성은 start, end 를 가진다.
4. 개별 animation 은 각자의 타임라인을 가진다.
5. 개별 animation 은 특정 구간에 반복적으로 실행될 수 있다.
6. 개별 animation 은 되도록이면 css animation 형태에 맞춰서 구현한다.
7. 개별 animation 은 trigger 를 가질 수 있다.
8. animation 은 그룹화 할 수 있다.
9. 그룹 animation 에서 설정한 값은 하위 애니메이션에 공통으로 적용된다.
10. 타임라인은 기본적으로 js animation 에서 돌아간다. (출력물은 css 가 될 수도 있다 또는 css 전용 animation 툴킷을 만들던가 해야할 듯 하다.)

레이어에 animation 대응하기

1. 이미 정의된 animation 을 적용한다.
2. 새롭게 만들어지는 animation 을 적용한다.
3. triiger 에 반응하는 animation 을 적용한다.
4. layer 의 모든 속성은 animation 대상이다.
5. 속성은 text, number, color, multi, path 형태의 타입을 가진다.
6. 각 속성은 형태에 맞는 interpolation 함수를 가진다.
7. 몇가지 속성을 동시에 수정 할 수 있는 그룹화된 속성을 가질 수 있다. (예: move -> x, y 를 동시에 움직임)
8. transform 관련된 설정은 변환을 미리 해서 나중에 다시 합쳐야 한다. (예를 들어 scale 했다가 rotateY 를 실행 할 수도 있으니깐 순서만 맞춰서 재조합 해야할 듯 )
9. transform 도 배열로 관리해야할 듯 하다.
10. 애니메이션 때문에 문자열로 관리하면 안되겠구나.
11. 대규모 업데이트가 되어야 겠군. 초기 값은 문자열로 넣을 수 있지만 그 이후 값은 모두 json 형태로 관리된다.

초기 값이 문자열 일 때 는 항상 파싱해서 값을 가지고 있는다.
parse -> array or object -> manipulate -> array or object

그런데 어짜피 animation 할 때는 파싱을 한 이후에 최종값만 넣어줄텐데 상관 없지 않을까?

일단은 속성에 대한 건 그대로 가자. 어짜피 복합 설정은 설정을 더 해야함

다만 transform 같은 경우는 형태를 고정해야할 듯 하다. 너무 복잡하게 안 쓰는게 좋을 것 같아. 고민이 많이 되네...

하나의 필드를 덩어리로 변경을 해야하는 경우면 전체를 파싱해서 대응하도록 하면 된다.

사실은 같은 데이타를 다루는 거지.

시간을 데이타로 다루기 때문에 시간정보랑 그 안에 들어가는 keyframes 정보랑 동일하게 취급되어야 한다.