Lasst uns wiederbeleben

Das Zeichnen von Text und Bildern ist eine Sache, aber der eigentliche Test eines UI-Frameworks besteht darin, wie gut es mit animierten Inhalten ist.

Und mein Test für Animationen ist das klassische MoveMe, das auf dem Beispielcode von Apple basiert.

Die Idee besteht darin, drei Kästchen auf dem Bildschirm zu zeichnen. Wenn die Box ausgewählt ist, ändert sie ihre Farbe und vergrößert sich. Anschließend kann sie mit der Ziehgeste verschoben werden und stellt beim Loslassen schließlich wieder die ursprüngliche Farbe und Größe wieder her.

Lassen Sie uns dieses Beispiel mit der Reanimated-Bibliothek von React Native erstellen.

Aufstellen

Ich folge den offiziellen Dokumenten, verwende jedoch nicht deren Vorlage. Also habe ich ein Basisprojekt mit der leeren Vorlage erstellt und die Abhängigkeiten installiert

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

Als nächstes habe ich das Plugin hinzugefügt

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

Und dann zeichnen Sie 3 Quadrate auf dem Bildschirm:

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",
  },
});

Gestenhandler hinzufügen

Um Unterstützung für Gestenhandler hinzuzufügen, müssen wir zunächst den Inhalt in die GestureHandlerRootView einschließen

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

Und dann jedes Quadrat in GestureDetector einschließen

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

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

Behandeln Sie Gestenereignisse

Um Gesten zu verarbeiten, müssen wir zunächst einen SharedValue erstellen, der State ähnelt, jedoch für Animationszustände. Um beispielsweise die Hintergrundfarbe bei Auswahl zu ändern, müssen wir die Ereignisse onBegin und onFinalize abhören und den Stil aktualisieren:

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>
  );
}

Die Unterstützung des Widerstands ist ähnlich. Wir müssen die Start- und aktuelle Position speichern und dann die aktuelle Position beim onChange-Ereignis aktualisieren. Der onChange stellt die Delta-Änderung bereit, die wir dann zur Startposition hinzufügen müssen, um die endgültige aktuelle Position zu berechnen. Und dann können wir beim onFinalize-Event endlich die Start- und aktuelle Position synchronisieren.

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>
  );
}

Und da haben Sie es

Referenzen

• react-native-reanimated
• react-native-gesture-handler
• Die Grundlagen von PanGestureHandler mit React Native Reanimated 2
• Datengesteuerte Benutzeroberfläche mit UIKit

Das obige ist der detaillierte Inhalt vonLasst uns wiederbeleben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!