讓我們復活吧

繪製文字和圖像是一回事，但 UI 框架的真正考驗在於它在動畫內容方面的表現如何。

我對動畫的測試是基於Apple範例程式碼的經典MoveMe。

這個想法是在螢幕上繪製三個盒子。選取後，該方塊會改變顏色並放大，然後可以透過拖曳手勢來移動，並最終在釋放時恢復到原始顏色和大小。

讓我們使用 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"></statusbar>
      <square></square>
      <square></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></square>
  <square></square>
</gesturehandlerrootview>

然後將每個 Square 包裹在 GestureDetector 中

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

  return (
    <gesturedetector gesture="{gesture}">
      <animated.view style="{styles.square}"></animated.view>
    </gesturedetector>
  );
}

處理手勢事件

為了處理手勢，我們首先需要建立一個 SharedValue，它類似於 State，但用於動畫狀態。例如，要在選擇時更改背景顏色，我們需要監聽 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></animated.view>
    </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></animated.view>
    </gesturedetector>
  );
}

給你了

參考

• react-native-reanimated
• 反應原生手勢處理程序
• PanGestureHandler 與 React Native Reanimated 2 的基礎知識
• 使用 UIKit 的資料驅動 UI

以上是讓我們復活吧的詳細內容。更多資訊請關注PHP中文網其他相關文章！