إنتهى!
إنشاء مشروط مع شريحة الرسوم المتحركة الأصلية المعاد إحياؤها مع كتلة الربيع
التكنولوجيا
الهندسة
الفيزياء
علوم الحاسوب
الخطوات
الجواب
لإنشاء نموذج مع رسم متحرك منزلق باستخدام React Native Reanimated وتأثير كتلة الربيع ، ستحتاج إلى اتباع هذه الخطوات. يفترض هذا المثال أنك تستخدم React Native Reanimated 2.x.
- تثبيت التبعيات:
تأكد من تثبيت التبعيات اللازمة. قم بتشغيل الأمر التالي لتثبيت
react-native-reanimated
إذا لم تكن قد قمت بذلك بعد:
npm install react-native-reanimated
-
الإعداد المعاد إحياؤه: تأكد من اتباع أي خطوات تثبيت خاصة بالنظام الأساسي مذكورة في Reanimated documentation.
-
تنفيذ الطرائق: يوجد أدناه مثال كامل على التعليمات البرمجية لإنشاء نموذج ينزلق من الأسفل باستخدام الرسوم المتحركة الربيعية.
import React, { useState } from 'react'; import { View, Text, Button, Modal, StyleSheet, TouchableOpacity } from 'react-native'; import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated'; const App = () => { const [isVisible, setIsVisible] = useState(false); const translateY = useSharedValue(1000); // Offscreen position const showModal = () => { setIsVisible(true); translateY.value = withSpring(0, { mass: 0.5, tension: 100, friction: 10 }); // Spring animation }; const hideModal = () => { translateY.value = withSpring(1000, { mass: 0.5, tension: 100, friction: 10 }, () => { setIsVisible(false); }); }; const animatedStyle = useAnimatedStyle(() => { return { transform: [{ translateY: translateY.value }], }; }); return ( <View style={styles.container}> <Button title="Show Modal" onPress={showModal} /> <Modal transparent visible={isVisible} animationType="none" // Disable default animation onRequestClose={hideModal} // Handle back button on Android > <TouchableOpacity style={styles.overlay} onPress={hideModal}> <Animated.View style={[styles.modalContainer, animatedStyle]}> <Text style={styles.modalText}>This is a modal!</Text> <Button title="Close" onPress={hideModal} /> </Animated.View> </TouchableOpacity> </Modal> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, overlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)', justifyContent: 'flex-end', }, modalContainer: { backgroundColor: 'white', padding: 20, borderTopLeftRadius: 20, borderTopRightRadius: 20, }, modalText: { fontSize: 18, marginBottom: 10, }, }); export default App;
شرح:
- إدارة الحالة: ندير رؤية النموذج باستخدام متغير الحالة (
isVisible
). - القيم المتحركة: نستخدم
useSharedValue
للاحتفاظ بقيمة الترجمة الرأسية (translateY
). - مشغل الرسوم المتحركة: تقوم وظيفة
showModal
بتعيين الترجمة لتحريكها في العرض ، بينما يقومhideModal
بتحريكها ثم إخفاء الوسائط. - نمط الرسوم المتحركة: نقوم بإنشاء نمط متحرك يتم تحديثه بناء على قيمة
translateY
. - تراكب مشروط: يمكن رفض النموذج عن طريق النقر خارجه (التراكب).
تذكر:
- قم دائما بتشغيل مشروعك على جهاز حقيقي أو محاكي يدعم ميزات React Native Reanimated.
- تخصيص الأنماط وإعدادات الانتقال وفقا لاحتياجات التصميم الخاصة بك.
الإقتراحات
- ما هي التبعيات الرئيسية المطلوبة لإنشاء النموذج باستخدام الرسوم المتحركة المنزلقة؟
- كيف تعمل وظيفة showModal لتحريك النموذج في العرض؟
- هل يمكنك شرح الغرض من التراكب المشروط وكيف يتم تنفيذه في الكود؟
- ما هي الاعتبارات الرئيسية لتشغيل المشروع باستخدام ميزات React Native Reanimated؟
- كيف يمكن تخصيص الأنماط وإعدادات الانتقال لتناسب احتياجات التصميم المحددة؟
AAAnonymous