繪製文字和圖像是一回事,但 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中文網其他相關文章!