# animated
React Native: Animated 네임스페이스
리액트 네이티브에서 슬라이드 버튼을 구현하기 위해 웹의 리액트처럼 translateX 기능이 있는지 궁금하여 찾아보니 Animated 네임스페이스가 리액트 네이티브에서 애니메이션을 담당한다는 것을 발견했다.아래는 애니메이션에 관련된 함수나 클래스들을 묶어놓은 네임스페이

IndexedStack으로 하겠습니다. 근데 이제 애니메이션을 넣은
최근에 Flutter를 공부하기 시작했다. Flutter를 아직 안써본 프론트엔드 개발자들은 한번씩 꼭 써보길 바란다. 혁신! 혁명! 프론트엔드의 미래! 플러터의 위젯을 이것저것 활용해보면서 앱을 대충 만들고 있던 와중. 이제서야 깨달은 사실이 있어 글을 쓰게되었다.

[RN] 스크롤에 따라 컴포넌트를 동적으로 변화시켜보자
어플리케이션을 쓰다보면 스크롤에 따라 헤더나 텍스트의 위치 및 크기가 바뀌는 UI를 제공하는 경우가 종종 있습니다.이런 UI는 제한된 모바일 화면의 크기 안에서 비교적 많은 양의 정보를 보여줌과 동시에 좀 더 사용자와 상호작용을 하고있다는 느낌을 줄 수 있습니다.

Animated(with Animated, interpolate)
import { Animated, Easing } from 'react-native'const Box = styled.View background-color: tomato; width: 200px; height: 200px;const AnimatedBox = An

React-Native(2.loagApp with animated, interaction)
npm i @types/styled-componentsnpm i @types/styled-components-react-native노가다로 animated 하기라이버러리 없이 animated 작업할려면 이렇게나 힘듦.
애니메이션 적용된 네비게이션 바 만들기
0. 커스텀 헤더의 필요성 모든 어플리케이션에는 다른 페이지로 이동하게 해주는 헤더가 들어간다. (아닌가?) React로 웹 어플리케이션을 구축할 때는 항상 상단에 고정되도록 했다. 사실 상단에 계속 고정되게 하는 네비게이션 바는 css를 아시는 분들이라면 모두 가능할
[메모] Animated Example
rotate: 360도 회전 (outputRange가 꼭 숫자이지 않아도 된다.)scale: input/outputRange 값에 따라 크기 확대/축소opacity: input/outputRange 값에 따라 투명도 조절애니메이션 작업을 자바스크립트 엔진이 아닌 네이티

[Flutter] AnimatedSwitcher()
오늘은 다양한 animation 기능을 만들 수 있는 AnimatedSwitcher() 위젯에 대하여 알아보겠다AnimatedSwitcher의 속성 값을 보면 transitionBuilder, layoutBuild에 대해서는 다음에 추가로 살펴볼 예정임시간을 제어하는
리액트 네이티브의 Animated
ViewScrollViewTextImage interpolate : inputRange, outputRange를 이용하여 설정객체를 만듦.timing : duration동안 동작하는 애니메이션loop : 무한반복parallel 복수 애니메이션 병렬처리seq
React Native: Animated Scroll Header 구현기
애니메이션을 만들기위한 핵심 워크 플로: Animated.Value를 만들고 애니메이션 구성 요소의 하나 이상의 스타일 속성에 연결한 다음 Animated.timing()을 사용해 애니메이션을 업데이트한다. 스크롤 이벤트 생성하기... 왼쪽 정렬 상태를 만들고 폰트