繪製文字和圖像是一回事，但 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" />
<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>
然後將每個 Square 包裹在 GestureDetector 中
function Square() {
const gesture = Gesture.Pan();
return (
<GestureDetector gesture={gesture}>
<Animated.View style={styles.square} />
</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]} />
</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>
);
}
給你了
以上是讓我們復活吧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
