▲ 그림 6-16 좌우로 움직이기

위 애니메이션의 미리보기는 다음 링크에서 확인할 수 있습니다.

• https://bit.ly/32Mk6oZ

6.5.1.3 interpolate로 여러 스타일 적용하기

버튼을 누르면 검은색 박스가 우측으로 움직이면서 서서히 사라지는 효과를 내고 싶다고 해볼까요? 이 경우에는 interpolate라는 함수를 사용합니다. 이 함수를 사용하면 Value가 지니고 있는 값을 기준으로 새로운 값을 생성할 수 있습니다.

interpolate 함수는 다음과 같이 사용합니다.

animation.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 150],
})

Value가 지닐 값의 입력 범위와 출력 범위를 지정하면 이에 따라 새로운 값이 생성됩니다. 이와 같이 설정하면 Value가 지닌 값이 0일 때는 0, 1일 때는 150으로 지정됩니다.

CalendarScreen을 다음과 같이 수정해보세요.