हम Flutter पर CircularRevealAnimation को कार्यान्वित करते हैं और साथ ही pub.dev पर लाइब्रेरी प्रकाशित करते हैं

Android में CircularRevealAnimation नामक View एनीमेशन की एक बहुत ही दिलचस्प विशेषता है - जिसका शाब्दिक अर्थ है "परिपत्र प्रकटीकरण।" स्पंदन, बदले में, हालांकि इसमें विजेट्स को एनिमेट करने की समृद्ध क्षमताएं हैं, लेकिन इस तरह के एनीमेशन को बॉक्स से बाहर नहीं किया जाता है।

यह आलेख दिखाएगा कि फ़्लटर का उपयोग करके इस तरह के एनीमेशन को कैसे लागू किया जाए और आसान पहुंच और वितरण के लिए पब.देव पर पुस्तकालय प्रकाशित किया जाए ।

एनीमेशन कार्यान्वयन

स्पंदन में, सब कुछ एक विजेट है। और एनीमेशन कोई अपवाद नहीं है। इसलिए, हम CircularRevealAnimation class बनाते हैं, जो StatelessWidget क्लास का विस्तार करेगी।

एनिमेशनकंट्रोलर का उपयोग करके शुरू, रोकना, और अन्य एनीमेशन नियंत्रण किए जाते हैं। एक SingleTickerProviderStateMixin बनाने के लिए AnimationController आपको StatefulWidget से इनहेरिट करना होगा और एक विशेष वर्ग SingleTickerProviderStateMixin को State SingleTickerProviderStateMixin होगा।

हमारा एनीमेशन वर्ग CircularRevealAnimation अपने दम पर एनीमेशन के प्रबंधन के लिए ज़िम्मेदार नहीं होगा, लेकिन एक आवश्यक निर्माता पैरामीटर के रूप में Animation<double> प्राप्त करेगा, इसलिए StatefulWidget से इनहेरिट करने की कोई आवश्यकता नहीं है। ऐसा इसलिए किया जाता है ताकि CircularRevealAnimation को अन्य एनिमेशन के साथ आसानी से जोड़ा जा सके, जो समान AnimationController उपयोग करते हैं। उदाहरण के लिए, पारदर्शिता परिवर्तन एनीमेशन के साथ प्रकटीकरण एनीमेशन को मिलाएं।

CircularRevealAnimation कंस्ट्रक्टर का एक और महत्वपूर्ण पैरामीटर child , जो हमारे एनीमेशन का एक बच्चा विजेट है, और जो दिखाई देगा या गायब हो जाएगा। सामान्य तौर पर, स्पंदन में, बहुत सारे विगेट्स का एक child पैरामीटर है। इस तरह के विजेट आपको बच्चे के विजेट के व्यवहार, प्रतिपादन या लेआउट को बदलने की अनुमति देते हैं। या एनीमेशन जोड़ें, जैसा कि CircularRevealAnimation साथ होता है।

इसके अलावा, एनीमेशन को निर्दिष्ट करने के लिए, एनीमेशन के उद्घाटन (या समापन) के केंद्र, साथ ही साथ उद्घाटन के न्यूनतम और अधिकतम त्रिज्या जैसे मापदंडों की आवश्यकता होगी। ये पैरामीटर वैकल्पिक हैं और एनीमेशन बनाते समय इसे null या निर्दिष्ट नहीं किया जा सकता है। इस मामले में, डिफ़ॉल्ट मानों का उपयोग किया जाएगा: प्रकटीकरण केंद्र विजेट के केंद्र में होगा, न्यूनतम त्रिज्या शून्य से घायल हो जाएगी, और अधिकतम त्रिज्या प्रकटीकरण केंद्र से विजेट के शीर्ष तक दूरी के बराबर होगी जो प्रकटीकरण केंद्र से सबसे दूर है।

डिफ़ॉल्ट अधिकतम त्रिज्या गणना एल्गोरिथ्म इस प्रकार है। सबसे पहले, प्रकटीकरण केंद्र से केंद्र से शिखर तक क्षैतिज और ऊर्ध्वाधर दूरी की गणना की जाती है, और फिर विकर्ण की गणना पायथागॉरियन प्रमेय द्वारा की जाती है।

 static double calcMaxRadius(Size size, Offset center) { final w = max(center.dx, size.width - center.dx); final h = max(center.dy, size.height - center.dy); return sqrt(w * w + h * h); } 

अब आपको प्रतिपादन के दौरान सर्कल के भीतर विजेट की क्रॉपिंग को लागू करने की आवश्यकता है। ClipPath वर्ग इसमें हमारी मदद करेगा, जो आपको एक मनमाने टेम्पलेट के अनुसार विजेट को क्रॉप करने की अनुमति देता है। मापदंडों के रूप में, इस विजेट को clipper (इसके बारे में थोड़ा बाद में) पारित किया जाता है और child बच्चा विजेट होता है जिसे क्रॉप करने की आवश्यकता होती है।

ClipPath विजेट का clipper पैरामीटर यह निर्धारित करता है कि बच्चे के विजेट को कैसे क्रॉप किया जाएगा। अपना स्वयं का क्रॉपिंग टेम्प्लेट बनाने के लिए, CircularRevealClipper वर्ग बनाएं, जो CustomClipper<Path> वर्ग को इनहेरिट करता है और Path getClip(Size size) विधि को फिर से परिभाषित करता है। यह विधि क्रॉपिंग क्षेत्र को पार करते हुए एक Path लौटाती है। हमारे मामले में, यह क्षेत्र एक दिए गए केंद्र के साथ एक चक्र है। एक सर्कल की त्रिज्या की गणना करने के लिए, आपको एनीमेशन के वर्तमान मूल्य को जानने की आवश्यकता है। यह मान fraction पैरामीटर के रूप में CircularRevealClipper को पारित किया गया है। सर्कल के त्रिज्या की गणना न्यूनतम और अधिकतम त्रिज्या के बीच रैखिक प्रक्षेप का उपयोग करके की जाती है।

उसके बाद, विजेट के कार्यान्वयन के लिए आगे बढ़ते हैं। एनीमेशन बनाने के लिए AnimatedBuilder का उपयोग करना सुविधाजनक है। AnimatedBuilder कंस्ट्रक्टर Animation<double> ऑब्जेक्ट और builder को वर्तमान एनीमेशन मूल्य के आधार पर विजेट बनाने के लिए उपयोग करता है। builder हम एक ClipPath बनाते हैं और एनीमेशन के वर्तमान मान ( fraction ) को ClipPath जाते हैं।

 class CircularRevealAnimation extends StatelessWidget { ... @override Widget build(BuildContext context) { return AnimatedBuilder( animation: animation, builder: (BuildContext context, Widget _) { return ClipPath( clipper: CircularRevealClipper( fraction: animation.value, center: center, minRadius: minRadius, maxRadius: maxRadius, ), child: this.child, ); }, ); } } 

यह CircularRevealAnimation के निर्माण को पूरा करता है। इसका उपयोग करना बाकी है। ऐसा करने के लिए, एक StatefulWidget , StatefulWidget बनाएं और StatefulWidget लेकर CircularRevealAnimation पास करें।

 import 'package:flutter/material.dart'; import 'package:circular_reveal_animation/circular_reveal_animation.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'CRA Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { AnimationController animationController; Animation<double> animation; @override void initState() { super.initState(); animationController = AnimationController( vsync: this, duration: Duration(milliseconds: 1000), ); animation = CurvedAnimation( parent: animationController, curve: Curves.easeIn, ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("CRA Demo"), ), body: Padding( padding: const EdgeInsets.all(16.0), child: CircularRevealAnimation( minRadius: 12, maxRadius: 200, center: Offset(0, 300), child: Container(color: Colors.red), animation: animation, ), ), floatingActionButton: FloatingActionButton(onPressed: () { if (animationController.status == AnimationStatus.forward || animationController.status == AnimationStatus.completed) { animationController.reverse(); } else { animationController.forward(); } }), ); } } 

Github डेमो ऐप ।

पुस्तकालय निर्माण

डार्ट या pubspec.yaml लाइब्रेरी बनाने के लिए, आपको डार्ट फ़ाइलों के साथ lib निर्देशिका के रूप में pubspec.yaml फ़ाइल को उसी निर्देशिका में जोड़ना होगा। इस फ़ाइल में लाइब्रेरी का विवरण, लेखकों और निर्भरता के बारे में जानकारी शामिल है।

सार्वजनिक एपीआई को परिभाषित करने वाली फ़ाइल बनाने के लिए भी अच्छा अभ्यास है। यह फ़ाइल lib फ़ोल्डर में स्थित है और इसमें लाइब्रेरी का नाम और उन फ़ाइलों की एक सूची शामिल है जिन्हें सार्वजनिक एपीआई में शामिल करने की आवश्यकता है। अन्य सभी डार्ट फाइलें src डायरेक्टरी में रखी गई हैं। यह न केवल उन फ़ाइलों को छुपाता है जो सार्वजनिक एपीआई में शामिल नहीं हैं, बल्कि आपको एकल import अभिव्यक्ति का उपयोग करके पुस्तकालय को आयात करने की अनुमति भी देता है। इस फ़ाइल की सामग्री:

 library circular_reveal_animation; export 'package:circular_reveal_animation/src/circular_reveal_animation.dart'; 

आप यहां डार्ट पर लाइब्रेरी बनाने के बारे में अधिक पढ़ सकते हैं।

पब.देव को प्रकाशित करें

पब.देव को एक डार्ट लाइब्रेरी प्रकाशित करना बहुत सरल है। आपको बस इतना करना है कि लाइब्रेरी के रूट डाइरेक्टरी से flutter packages pub publish कमांड चलाएं। प्रकाशन Google खाते की ओर से किया जाता है, इसलिए प्रकाशन प्रक्रिया के दौरान एक लिंक दिया जाएगा जिसे ब्राउज़र में खोला जाना चाहिए और Google में लॉग इन करना होगा। इसके बाद, अपडेट केवल उस खाते का उपयोग करके प्रकाशित किया जा सकता है, जिसकी ओर से पहला संस्करण पोस्ट किया गया था।

प्रकाशन से पहले, यह अनुशंसा की जाती है कि आप flutter packages pub publish --dry-run का उपयोग करके लाइब्रेरी को सही flutter packages pub publish --dry-run ।

flutter packages pub publish पुस्तकालय तुरंत pub.dev पर उपलब्ध हो जाएगा। और, जैसा कि प्रलेखन कहता है, "प्रकाशन हमेशा के लिए है" - बाद में आप केवल नए संस्करण अपलोड कर सकते हैं। पुराने संस्करण भी उपलब्ध होंगे।

हालाँकि लाइब्रेरी प्रकाशन सरल दिखता है, लेकिन इसमें नुकसान भी हो सकता है। उदाहरण के लिए, पहले संस्करण को प्रकाशित करते समय, मुझे रेटिंग में कुछ बिंदुओं से हटा दिया गया था क्योंकि पुस्तकालय ( pubspec.yaml ) का वर्णन बहुत छोटा था।

आप यहाँ पुस्तकालयों के प्रकाशन के बारे में अधिक पढ़ सकते हैं।

दरअसल, pub.dev और github.com पर परिपत्र_सेवा_प्रमाण पुस्तकालय।

PS: मैंने डार्ट कोड को उजागर करने के लिए ```java {...} ``` किया। यह अच्छा होगा कि habr.com पर डार्ट कोड को उजागर किया जाए।