aholachek/react-flip-toolkit
React Flip Toolkit
react-flip-toolkit هو إطار عمل للانتقالات القائمة على الإحداثيات ومكتبة رسوم متحركة للتخطيط لـ React. يستخدم تقنية "الحركة السحرية" لحساب مواضع العناصر، مما يمنع القفزات المزعجة أثناء تغييرات التخطيط من خلال الاستيفاء والفيزياء.
توفر المكتبة محرك حركة قائماً على الزنبرك (Spring-based) يستخدم إعدادات الصلابة والتخميد لإنشاء حركة طبيعية لتغييرات التخطيط والنمط. وتتضمن أدوات متخصصة لانتقالات العناصر المشتركة، والتي تنسق الحركات البصرية عبر تغييرات المسار في جانب العميل للحفاظ على الاستمرارية بين الصفحات المختلفة.
يغطي النظام رسوم الانتقال للتخطيط واستيفاء الخصائص غير المتعلقة بالتخطيط. ويدير التوقيت من خلال تسلسل الرسوم المتحركة المتداخلة ويتضمن تحييد التحويل (Transform neutralization) لمنع العناصر الفرعية من التشوه عند تغيير حجم الحاوية الأصلية. كما يوفر إطار العمل مشغلات استدعاء (Callbacks) لتنفيذ المنطق في مراحل محددة من دورة الحياة.
Features
- React Animation Libraries - Provides a comprehensive library for animating layout shifts and element transitions within the React ecosystem.
- Coordinate-Based Layout Transitions - Calculates exact coordinates to smoothly move elements between different layout positions using FLIP techniques.
- Spring Animations - Implements a physics-driven motion engine using stiffness and damping for natural spring animations.
- Layout Transition Libraries - Calculates element size and position changes to ensure smooth visual transitions between layout states.
- Page Transition Animations - Provides specialized tools for shared element transitions that coordinate visual movements across client-side route changes.
- Physics-Based Animation Libraries - Utilizes spring physics to create natural-feeling UI motion in React instead of fixed-duration easing.
- Shared Element Transitions - Coordinates visual continuity for shared elements moving across different pages during route changes.
- Geometric Distortion Correction - Corrects geometric distortion of child elements during parent scale or translation transitions.
- Route-Synced Animation Triggers - Triggers layout calculations automatically when the client-side router changes the application view.
- Spring Physics Configurations - Provides configurable stiffness and damping settings to control the feel and bounce of physics animations.
- Physics-Based Property Interpolators - Uses a physics-based system to calculate intermediate values for non-layout properties like opacity.
- Transform Neutralizations - Includes transform neutralization to prevent child elements from warping when a parent container scales.
- Nested Transform Neutralization - Prevents child elements from warping or distorting when their parent container undergoes a scale or translation transition.
- Orchestrated Motion - Manages the timing and execution of spring-physics animations that do not involve position shifts.
- Staggered Animations - Coordinates a sequence of animations with incremental delays to create orchestral movements.
- Style Property Interpolators - Interpolates non-layout style properties, such as opacity, using a physics-based model.
- Animation Libraries - Layout transition library for React.
