كيفية تطبيق CircularRevealAnimation كأداة Flutter ونشرها على pub.dev في الطريق

في Android ، توجد رسوم متحركة مثيرة جدًا تدعى CircularRevealAnimation. في حين أن الرفرفة تتمتع بإمكانيات الرسوم المتحركة الغنية ، فإنها لا توفر هذه الرسوم المتحركة خارج الصندوق.

في هذه المقالة ، سوف أصف كيفية تنفيذ هذه الرسوم المتحركة باستخدام Flutter SDK ونشر المكتبة على pub.dev لسهولة الوصول والتوزيع.

تنفيذ الرسوم المتحركة

كل شيء هو القطعة في رفرفة. والرسوم المتحركة ليست استثناءات. لهذا السبب نحن بحاجة إلى إنشاء ، وتوسيع StatelessWidget.

يتحكم AnimationController في التحكم في الرسوم المتحركة (البداية ، الإيقاف المؤقت ، الإيقاف ، إلخ). لإنشاء ANNIMATIONController ، نحتاج إلى تمديد StatefulWidget وإضافة فئة خاصة من SingleTickerProviderStateMixin إلى الولاية.

لن يتحكم صفنا CircularRevealAnimation في الرسوم المتحركة بنفسه. ستتلقى الرسوم المتحركة كمعلمة مُنشئ مطلوبة. لهذا السبب ليست هناك حاجة لتوسيع StatefulWidget. يتم ذلك للسماح بدمج CircularRevealAnimation مع الرسوم المتحركة الأخرى باستخدام نفس AnimationController. على سبيل المثال ، لدمج الرسوم المتحركة للكشف عن التعميم مع الرسوم المتحركة التعتيم.

معلمة مُنشئ مهمة أخرى CircularRevealAnimation هي الطفل الذي سيتم تحريكه (يظهر أو يختفي). بشكل عام ، الكثير من الحاجيات في Flutter لديها معلمة achild. تتيح هذه التطبيقات المصغّرة تغيير السلوك أو الرسم أو موضع عنصر واجهة المستخدم الفرعية. أو لإضافة الرسوم المتحركة ، مثلما يفعل CircularRevealAnimation.

بالإضافة إلى ذلك ، لتعريف الرسوم المتحركة ، نحتاج إلى مثل هذه المعلمات كمركز كشف وحد ​​أدنى ونصف أقصى للكشف. هذه المعلمات غير مطلوبة وقد تكون خالية. في مثل هذه الحالة ، سيتم استخدام القيم الافتراضية. المركز الافتراضي هو مركز القطعة. الحد الأدنى لنصف القطر الافتراضي هو صفر. ونصف القطر الأقصى الافتراضي هو المسافة من مركز الكشف إلى قمة القطعة.

الخوارزمية لحساب الحد الأقصى لنصف القطر افتراضيًا هي كما يلي. أولاً ، قم بحساب المسافة أفقياً وعمودياً من المركز إلى الرأس أبعد من مركز الكشف ، ثم قم بحساب القطر باستخدام نظرية فيثاغورس.

calcMaxRadius ثابت مزدوج (حجم ، مركز الإزاحة) {
  final w = max (center.dx، size.width - center.dx)؛
  final h = max (center.dy، size.height - center.dy)؛
  عودة sqrt (w * w + h * h) ؛
}

الآن نحن بحاجة إلى تنفيذ لقطة من القطعة التابعة داخل الدائرة أثناء الرسم. فئة ClipPath سوف تساعدنا على القيام بذلك. ClipPath يسمح لقطة القطعة على قالب التعسفي. معلمات هذه القطعة هي المقص (حولها بعد ذلك بقليل) والطفل - القطعة التي يجب قصها.

تقوم أداة معلمة clipper في ClipPath بتعريف طريقة عنصر واجهة مستخدم القطع. لتحديد قالب القطع الخاص بنا ، نقوم بإنشاء CircularRevealClipper لتوسيع CustomClipper وطريقة تجاوز مسار getClip (حجم الحجم). تقوم هذه الطريقة بإرجاع المسار الذي يحدد منطقة القطع. في حالتنا ، هذه المنطقة عبارة عن دائرة بها مركز معين. لحساب نصف قطر الدائرة ، نحتاج إلى معرفة قيمة الرسوم المتحركة الحالية. يتم تمرير هذه القيمة إلى CircularRevealClipper كمعلمة الكسر. يتم إجراء حساب نصف قطر الدائرة باستخدام الاستيفاء الخطي بين الحد الأدنى والحد الأقصى لنصف القطر.

بعد ذلك ، يمكننا تنفيذ CircularRevealAnimation. لإنشاء الرسوم المتحركة ، من المفيد استخدام AnimatedBuilder. يأخذ تطبيق AnimatedBuilderAnimation والباني الذي يتم استخدامه لإنشاء عنصر واجهة تابعة مع الأخذ في الاعتبار قيمة الحركة الحالية. في الباني ، نقوم بإنشاء ClipPath ونمرر قيمة (الكسر) للرسوم المتحركة الحالية إلى CircularRevealClipper.

الطبقة CircularRevealAnimation يمتد StatelessWidget {
  ...
@تجاوز
  إنشاء عنصر واجهة المستخدم (سياق BuildContext) {
    عودة AnimatedBuilder (
      الرسوم المتحركة: الرسوم المتحركة ،
      باني: (سياق BuildContext ، القطعة _) {
        إرجاع ClipPath (
          المقص: CircularRevealClipper (
            الكسر: الرسوم المتحركة.
            المركز: المركز ،
            مين راديوس: مين راديوس ،
            maxRadius: maxRadius ،
          )،
          الطفل: هذا.
        )؛
      }،
    )؛
  }
}

هذا يكمل إنشاء CircularRevealAnimation. لاستخدامها ، نحتاج إلى إنشاء StatefulWidget و AnimationController وتمرير AnimationController إلى CircularRevealAnimation. جست مع المثال.

التطبيق التجريبي على جيثب.

إنشاء مكتبة

لإنشاء مكتبة Dart أو Flutter ، تحتاج إلى إضافة ملف pubspec.yaml إلى dir نفسه حيث يوجد مجلد lib مع ملفات .dart. يحتوي هذا الملف على وصف المكتبة ومعلومات حول المؤلفين والتبعيات.

من الممارسات الجيدة إنشاء ملف منفصل لتعريف API العمومي. يوجد هذا الملف في مجلد lib ويحتوي على اسم المكتبة وقائمة الملفات التي يجب تضمينها في واجهة برمجة التطبيقات العامة. يتم وضع جميع ملفات .dart الأخرى في src dir. يسمح لنا ذلك باستيراد المكتبة بأكملها باستخدام تعبير استيراد واحد وإخفاء الملفات التي لم يتم تضمينها في واجهة برمجة التطبيقات العامة. محتوى هذا الملف:

مكتبة circular_reveal_animation ؛
export 'package: circular_reveal_animation / src / circular_reveal_animation.dart'؛

يمكنك العثور على مزيد من التفاصيل حول إنشاء مكتبات Dart هنا.

النشر إلى pub.dev

من السهل جدًا نشر مكتبة Dart على pub.dev. كل ما عليك القيام به هو تشغيل نشر الحزم flutter pub pub من الجذر الخاص بمكتبتك. يتم تنفيذ المنشور نيابة عن حساب Google. لهذا السبب ستحتاج أثناء النشر إلى فتح رابط معين في المتصفح وتسجيل الدخول إلى Google. يمكنك لاحقًا نشر تحديثات المكتبة فقط باستخدام نفس الحساب الذي تم استخدامه لنشر الإصدار الأول.

قبل النشر ، يوصى بالتحقق من صحة المكتبة باستخدام نشر حزم الحزم رفرفة - تشغيل سريع.

بعد تنفيذ نشر حزمة الحزم رفرفة ، ستكون المكتبة على الفور في pub.dev. وكما هو مكتوب في الوثائق ، "النشر للأبد" - في وقت لاحق ، يمكنك فقط تحميل إصدارات جديدة. الإصدارات القديمة ستكون متاحة أيضا.

على الرغم من أن نشر المكتبة يبدو بسيطًا ، إلا أنه قد يكون له عيوب. على سبيل المثال ، عند نشر الإصدار الأول من circular_reveal_animation ، كنت محرومًا من عدة نقاط في التصنيف لأن وصف المكتبة كان قصيرًا جدًا (في pubspec.yaml).

يمكنك العثور على مزيد من التفاصيل حول نشر مكتبات Dart هنا.

أخيرًا ، مكتبة circular_reveal_animation على pub.dev و github.com.

تحديث: في الإصدار 1.0.6 وأضاف مثال لمربعات الحوار رفرفة.