生き返らせましょう-jsチュートリアル-php.cn

生き返らせましょう

王林

リリース： 2024-08-29 11:08:04

オリジナル

339 人が閲覧しました

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

Let

そして、私のアニメーションのテストは、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",
  },
});

ログイン後にコピー

Let

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

ジェスチャーハンドラーのサポートを追加するには、まず 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>
  );
}

ログイン後にコピー

これで完成です

Let