Réanimons-js tutoriel-php.cn

Dessiner du texte et des images est une chose, mais le véritable test d'un cadre d'interface utilisateur réside dans sa qualité en matière d'animation de contenu.

Let

Et mon test d'animation est le MoveMe classique basé sur l'exemple de code d'Apple.

L'idée est de dessiner trois cases sur l'écran. Lorsqu'elle est sélectionnée, la boîte change de couleur et s'agrandit, puis peut être déplacée avec le geste de glisser et revient finalement à sa couleur et à sa taille d'origine une fois relâchée.

Créons cet exemple à l'aide de la bibliothèque Reanimated de React Native.

Installation

Je suis les documents officiels mais je n'utilise pas leur modèle. J'ai donc créé un projet de base avec le modèle vierge et installé les dépendances

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

Copier après la connexion

Ensuite, j'ai ajouté le plugin

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

Copier après la connexion

Et puis dessinez 3 carrés à l'écran :

import { StatusBar } from "expo-status-bar"; import { StyleSheet, View } from "react-native"; import Animated from "react-native-reanimated"; function Square() { return ; } export default function App() { return (       ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "space-evenly", }, square: { width: 100, height: 100, backgroundColor: "blue", }, });

Copier après la connexion

Let

Ajouter un gestionnaire de gestes

Pour ajouter la prise en charge des gestionnaires de gestes, nous devons d'abord envelopper le contenu dans GestureHandlerRootView

Copier après la connexion

Et puis enveloppez chaque carré dans GestureDetector

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

Copier après la connexion

Gérer les événements gestuels

Pour gérer le geste, nous devons d'abord créer une SharedValue qui est comme State mais pour les états d'animation. Par exemple, pour changer la couleur d'arrière-plan lorsqu'elle est sélectionnée, nous devons écouter les événements onBegin et onFinalize et mettre à jour le style :

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

Copier après la connexion

La prise en charge de la traînée est similaire. Nous devons stocker les positions de départ et actuelles, puis mettre à jour la position actuelle lors de l'événement onChange. Le onChange fournit le changement delta que nous devons ensuite ajouter à la position de départ pour calculer la position actuelle finale. Et puis, enfin, lors de l'événement onFinalize, nous pouvons synchroniser les positions de départ et actuelles.

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

Copier après la connexion

Et voilà

Let