Expo SDK40에서 Reanimated 사용

이 글은 React Native 추가 캘린더 21일째 글이다.

이것은 무엇이냐

나는 Expo SDK 40의 개인 눈동자 기능인'Reanimated v2-rc'을 만졌다.시위 행진이 있다.

Expo SDK 40

Expo는 ReactNative에서 개발을 지원하는 프레임워크입니다.며칠 전 올해 마지막으로 업데이트된 SDK40이 발표됐다.SDK40의 업데이트여기.에는 공식 방송이 있다.SDK40에서는 "SDK 39 큰 변경은 없었다"면서도 개인적으로는 "Reanimated v2-rc 이용할 수 있다"는 생각에 만져봤다.

제작된 어플리케이션

이번에는 애니메이션 동작을 확인하기 위해 버튼을 누르면 그림 문자가 나오는 앱입니다.👇만들었어요.이 응용 프로그램에서 우리는 ReactNative 표준Animated과 Reanimated v2-rc의 응용을 비교했다.

표준 Animated 응용 프로그램 사용

애니메이션이 있는 프로그램을 만들어 보려고 해요.

표준 Animated

기본 Animated를 사용하여 애니메이션의 예제 코드를 그립니다.공식 문서는여기.입니다.'표준 Animated 응용 프로그램 사용'은 이런 코드로 만들어졌다.

/* AnimationIcon.tsx */
/* 標準ライブラリのAnimatedを使う */
import { StyleSheet, Animated, Easing, Text } from "react-native";

export class AnimationIcon extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      /* 絵文字の座標と、透明度を変化させます */
      animeY: new Animated.Value(0),
      animeX: new Animated.Value(0),
      animeOpacity: new Animated.Value(1),
    };
  }
  componentDidMount() {
    this._startAnimation();
  }
  componentWillUnmount() {
    this.state.animeX.stopAnimation(); // アニメーションの後処理
  }

  _startAnimation = () => {
    const toValueY = /* どこまでY座標を変化させるか */
    Animated.timing(this.state.animeY, {
      toValue: toValueY,
      duration,
      useNativeDriver: true,
      // アニメーションをどのように変化させたいか
      // https://reactnative.dev/docs/easing
      easing: Easing.inOut(Easing.linear), 
      delay: delay,
    }).start();
    
    /* 他の値もアニメーションを定義する */
  };

  render() {
    const icon = this.props.icon || "😊";
    return (
      <>
        <Animated.View
          style={[
            styles.icon,
            /* アニメーションで変化させる値をstyleにあてる */
            { opacity: this.state.animeOpacity },
            {
              transform: [
                { translateY: this.state.animeY },
                { translateX: this.state.animeX },
              ],
            },
          ]}
        >
          <Text style={styles.iconText}>{icon}</Text>
        </Animated.View>
        </>
    );
  }
}

react-native reanimation 지원

그럼 상기 표준Animated를 사용하는 프로그램react-native-reanimated에 대응해 봅시다.

이른바 Reanimated

expo SDK 40공식 방송부터 시작
Now with more bugfixes and improvements, the react-native-reanimated v2 release candidate is available in SDK 40!
따라서 expo SDK40Reanimated v2-rc을 사용할 수 있습니다.추가할 프로그램 라이브러리는 react-native-reanimated입니다.
React Native advent 달력 3일차 보도React Native 2020년 회고에서 말했듯이 2020년 11월 ReactNative에 대응하는 내용은 이번에도 Expo가 대응했다.특히 ReactNative 애니메이션에서는 안드로이드 애니메이션이 느리기 때문에 이 프로그램 라이브러리를 사용하는 것이 빨라질지 보고 싶습니다.

Reanimated 가입

문서Reanimated와 같이 먼저 프로그램 라이브러리를 추가합니다.이게 다야![1]

expo install react-native-reanimated

# yarnを使っている人向け
yarn add [email protected]

# babel.config.jsを編集し、
# plugins: ["react-native-reanimated/plugin"]を追加する
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

Reanimated 사용

위에서 설명한 대로 추가된 라이브러리를 사용하여 애니메이션을 설치합니다.

/* AnimationIcon.tsx */
/* 追加したReanimatedライブラリをつかう */
import { StyleSheet, Text } from "react-native";
import Animated, {
  Easing,
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from "react-native-reanimated";

/* Hooks対応しないと使えないようでした */
export const AnimationIcon: React.FC<Props> = ({ icon = "😊" }) => {
  const valueY = useSharedValue(/* 最終値 */);
  useEffect(() => {
    valueY.value = /* 初期値 */;
  }, []);

  const transformStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: withTiming(valueY.value, {
            duration: FADE_DURATION,
            easing: Easing.inOut(Easing.linear),
          }),
        },
        /* 省略 */
      ],
    };
  });

  const opacityStyle = useAnimatedStyle(() => {
  /* こちらも同様に */
  });

  return (
    <>
      {/* 上記で用意したReanimatedのスタイルを当てる */}
      <Animated.View style={[styles.icon, transformStyle, opacityStyle]}>
        <Text style={styles.iconText}>{icon}</Text>
      </Animated.View>
    </>
  );
};

DEMO-Android 기반 애니메이션 비교

Reanimated에서 만든 애플리케이션과 표준 Animated를 사용하는 애플리케이션을 비교해 보겠습니다.어때?
표준 Animated
Reanimated 사용 시


보자마자 잘 풀리네!!!
특히 버튼을 누르기 시작했을 때의 행동이 매끄러워졌네요.

측량하다

위의 데모에도 성능 모니터가 표시됩니다.
실제 기기에서 성능 모니터를 볼 때 터미널을 흔들면 바로 표시할 수 있다.Android 에뮬레이터에서 터미널에서 실행adb shell input keyevent 82하면 를 열 수 있습니다.
성능 모니터를 켜면 화면의 오른쪽 위 모서리에 표시됩니다.그중JS xx fps의 수치도 중요하다.
JS xx fps의 수치는 초당 JS 프레임을 그리는 속도를 나타내는 수치[2]입니다.
일반적으로 이 값은 60이며 이 값은 작은 드로잉일수록 "걸림돌"입니다.
이 수치를 비교해 보면 수치에도 차이가 있다는 것을 알 수 있다.Reanimated가 더 매끄럽다.

표준 Animate: 5 정도

Reanimatev2:5-25 전후

총결산

애니메이션을 사용할 때 Reanimated를 사용하여 동작이 부드럽다는 것을 확인할 수 있습니다.
SDK40은 Expo에서도 간단히 대응할 수 있습니다.

통지하다

12/26~의 기술서적전 10에는'Firestore Testing'이라는 책이 출간될 예정이다.
이쪽👉👉 페이지 순환 👈👈 를 참고하십시오.기대해주세요!
각주
bare workflow라면 추가 작업이 있어 이쪽문서 같은 작업이 필요한데 이번엔 하지 않겠다.↩︎
성능 지표에 대해서는 여기의 ReactNative 문서에 상세하게 기재되어 있다.↩︎