Purpose

Interactable이 React Animated로 스프링, snap 애니매이션 등을 구현한 방법 파악하기 위한 글입니다.

코드를 전체적으로 읽어서 잘 이해가 안되므로 메소드 하나씩, 코드 한줄씩 다시 읽으면서 파악.

production 코드에 주석으로 달기에는 너무 장황해지므로, 이곳에 자유롭게 기록하면서 이해도를 높이고자 합니다.

1. reaimated 방식으로 쓰인 코드를 보기 쉽게 바꿔서 무슨 의도로 쓴 코드인지 파악하는데 도움.

   • 예시

     const a = divide(
         multiply(-1, strength, dr, exp(divide(multiply(-0.5, drsq), sq(falloff)))),
         obj.mass,
       );
     

     $$ a = -\frac{strength \times dr \times e^{-0.5dr^2 \over falloff^2}}{mass_{obj}} $$

2. 물리학적인 배경지식을 기반으로 한 용어 파악 및 해설

   • 예: tension, friction,damping, a(가속도), v(속도), dt(시간차)

3. 애니매이션을 구현하는 데 사용한 개념과 패턴(?)을 참고함.

   • 예:
     • bucket, behavior 등의 개념
     • 거리가 최소인 snapPoint를 찾는 방식
     • drag할때 위치와 변화값을 가지고 toss된것으로 간주하는 방식

snapTo()

요약

target과의 거리가 최소인 snapPoint을 찾아서 best에 저장함.

Detail

snapPoints[]의 모든 점 중에서, target과의 거리(snapDist)가 최소인 점을 best에 저장한다.

이동중인 객체(target, 위치와 속도값을 가짐)와 snap가능한 포인트, 그리고 best는 snap을 시킬 점(어디로 스냅시킬지)을 저장할 노드.

$$ snapDist = {(target_x-pt_x)}^2 + {(target_y-pt_y)}^2 $$