الحركة في Filee جاية منين؟

Filee معمول بـ C# و Avalonia. Avalonia بترسم كل حاجة بنفسها بـ Skia (نفس محرك الرسم بتاع Chrome و Flutter)، فالحركة شغالة بنفس النعومة على ويندوز وماك ولينكس.

لما تفتح الكود، هتلاقي طريقتين بس للحركة، ومفيش أي مكتبة أنيميشن خارجية.

الطريقة الأولى: transitions في الـ styles

دي لكل حاجة عادية: زراير، chips، ألوان، عناصر الـ sidebar. بتقول للعنصر “لو الخاصية دي اتغيرت، اتحرك ليها في وقت كذا بمنحنى كذا”. ده بالظبط transition بتاع CSS.

<Style Selector="Button, ToggleButton, RepeatButton">  <Setter Property="Transitions">    <Transitions>      <TransformOperationsTransition Property="RenderTransform"                                     Duration="0:0:0.22"                                     Easing="{StaticResource SoftEase}" />    </Transitions>  </Setter></Style><Style Selector="Button:pressed, ToggleButton:pressed">  <Setter Property="RenderTransform" Value="scale(0.95)" /></Style>

ومعاها keyframes للحاجات اللي بتظهر مرة واحدة، زي الـ toast وفتح الصفحة. ده @keyframes بتاع CSS.

الطريقة التانية: ترسم بإيدك وتحسب كل فريم

الدونت مش زراير. هو control اسمه DonutMenu بيعمل override لـ Render(DrawingContext) وبيرسم كل شريحة بالخطوط والأقواس. وكل فريم بيطلب الفريم اللي بعده بـ RequestAnimationFrame، وبيحسب القيم بـ spring هو كاتبها بنفسه.

على الويب ده يساوي: canvas + requestAnimationFrame + حاجة زي react-spring.

التلات حاجات اللي بتعمل “الطراوة”

الخريطة: Filee قصاد الويب

خلّصت الفصل لما

• تفرّق بين transitions في الـ styles والرسم بإيدك
• تقول التلات حاجات اللي بتعمل الطراوة
• تعرف المقابل على الويب لكل طريقة