生き返らせましょう

テキストと画像を描画することは別のことですが、UI フレームワークの本当のテストは、コンテンツのアニメーション化がどの程度優れているかによって決まります。

そして、私のアニメーションのテストは、Apple のサンプル コードに基づいた古典的な MoveMe です。

アイデアは、画面上に 3 つのボックスを描くことです。選択すると、ボックスの色が変化して拡大し、ドラッグ ジェスチャで移動できるようになり、放すと最終的に元の色とサイズに戻ります。

React Native の Reanimated ライブラリを使用してサンプルを構築しましょう。

設定

私は公式ドキュメントに従っていますが、そのテンプレートは使用していません。したがって、空のテンプレートを使用して基本プロジェクトを作成し、依存関係をインストールしました

npx create-expo-app playground --template blank
npx expo install react-native-reanimated
npx expo install react-native-gesture-handler

次に、プラグインを追加しました

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

次に、画面上に 3 つの正方形を描きます:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, View } from "react-native";
import Animated from "react-native-reanimated";

function Square() {
  return <Animated.View style={styles.square}></Animated.View>;
}

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <Square />
      <Square />
      <Square />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "space-evenly",
  },
  square: {
    width: 100,
    height: 100,
    backgroundColor: "blue",
  },
});

ジェスチャーハンドラーを追加する

ジェスチャー ハンドラーのサポートを追加するには、まず GestureHandlerRootView 内でコンテンツをラップする必要があります

<GestureHandlerRootView style={styles.container}>
  <Square />
  <Square />
  <Square />
</GestureHandlerRootView>

そして、各正方形を GestureDetector 内でラップします

function Square() {
  const gesture = Gesture.Pan();

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={styles.square} />
    </GestureDetector>
  );
}

ジェスチャイベントを処理する

ジェスチャを処理するには、まず State に似ていますが、アニメーションの状態を対象とした SharedValue を作成する必要があります。たとえば、選択時に背景色を変更するには、onBegin および onFinalize イベントをリッスンしてスタイルを更新する必要があります。

function Square() {
  const isPressed = useSharedValue(false);
  const animStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: isPressed.value ? "red" : "blue",
    };
  });

  const gesture = Gesture.Pan()
    .onBegin(() => {
      isPressed.value = true;
    })
    .onFinalize(() => {
      isPressed.value = false;
    });

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={[styles.square, animStyle]} />
    </GestureDetector>
  );
}

ドラッグのサポートも同様です。開始位置と現在位置を保存し、onChange イベントで現在位置を更新する必要があります。 onChange は、最終的な現在位置を計算するために開始位置に追加する必要があるデルタ変更を提供します。そして最後に、onFinalize イベントで開始位置と現在の位置を同期できます。

function Square() {
  const isPressed = useSharedValue(false);
  const startPos = useSharedValue({ x: 0, y: 0 });
  const pos = useSharedValue({ x: 0, y: 0 });
  const animStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: isPressed.value ? "red" : "blue",
      transform: [
        { translateX: pos.value.x },
        { translateY: pos.value.y },
        { scale: withSpring(isPressed.value ? 1.2 : 1) },
      ],
    };
  });

  const gesture = Gesture.Pan()
    .onBegin(() => {
      isPressed.value = true;
    })
    .onChange((e) => {
      pos.value = {
        x: startPos.value.x + e.translationX,
        y: startPos.value.y + e.translationY,
      };
    })
    .onFinalize(() => {
      isPressed.value = false;
      startPos.value = {
        x: pos.value.x,
        y: pos.value.y,
      };
    });

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={[styles.square, animStyle]} />
    </GestureDetector>
  );
}

これで完成です

参考文献

• react-native-reanimated
• 反応ネイティブジェスチャーハンドラー
• React Native Reanimated 2 を使用した PanGestureHandler の基本
• UIKit を使用したデータ駆動型 UI

以上が生き返らせましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。