شرح كيفية عمل animations على النصوص في flutter
في هذه المقالة نقدم لكم شرح لكيفية عمل انميشن على الtext في فلاتر وكما نعلم ان النصوص من اكثر الwedget استعمالا وفي هذا المقال نشارك معكم مجموعه متنوعه من الانميشن التي تستطيع اضافتها على النص لديك في تطبيقك لكي تحسن من شكل التطبيق ويظهر بصورة افضل والامر لا يقتصر فقط على النصوص بل قدمنا لكم الكثير من المقالات حول الانميشن بشكل عام وكيف تضيف انميشن للعناصر المختلفه في تطبيقك من اجل تحسين مظهره .
نظام تشغيل الأجهزة المحمولة ، الذي يُعرف أحيانًا باسم نظام تشغيل الهاتف المحمول ، هو عبارة عن منصة برمجية تتيح تشغيل التطبيقات الأخرى على الأجهزة المحمولة ، على غرار أنظمة تشغيل Linux أو Windows التي تحكم سطح المكتب أو الكمبيوتر المحمول. تم إنشاء هذه المنصة خصيصًا للهواتف المحمولة والهواتف الذكية وأجهزة المساعد الرقمي الشخصي وأجهزة الكمبيوتر اللوحية والأجهزة المحمولة الأخرى.
يتم تحديد كل من Thumbwheels ، ولوحات المفاتيح ، و WAP ، والمزامنة مع البرامج ، والبريد الإلكتروني ، والرسائل النصية ، والوظائف والميزات الأخرى بواسطة نظام التشغيل. يعد إنشاء تطبيق جوال مهمة صعبة وتستغرق وقتًا طويلاً. هناك العديد من أنظمة التشغيل المختلفة ، ولكل نظام أساسه الخاص لإنشاء تطبيقات الأجهزة المحمولة. يتم كتابة إطار العمل الأصلي لنظام Android بلغة Java ، بينما تتم كتابة إطار العمل الأصلي لنظام iOS بلغة Swift.
عمل انميشن على اخفاء العناصر بالبطيئ
بالتسبة لهذا التاثير فلن تحتاج الى اي مكتبات خارجية لكي تستعمله فيمكنك من خلال اكواد بسيطة تنفيذه وهو عباره عن انميشن على النص يقلل من الشفافيه للنص وتستطيع التحكم بها وذلك من خلال النقر على النص يتم تقليل الشفافيه او وضعها بالصورة الكامله .
AnimatedOpacity.dart
Center(
child: AnimatedOpacity(
child: Container(
height: isAnimation ? 100 : 100,
width: isAnimation ? 130 : 130,
child: Text(
'GeeCoders',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: isAnimation ? 22 : 16,
color: isAnimation ? Colors.blue : Colors.red),
),
),
duration: Duration(seconds: 1),
opacity: isAnimation ? 0.4 : 0.8,
curve: Curves.easeInBack,
),
)
عمل انميشن على النصوص بإستخدام مكتبة text_kit
في هذا الجزء سوف يتم عمل مجموعه من الانميشن الواسعه على العناصر المختلفه في تطبيقك من ناحية النصوص ولكن في هذا الجزء سوف نحتاج الى ان نستخدم مكتبة خارجية من اجل تنفيذها على النصوص وهي من اهم المكتبات التي تستخدم في عمل انميشن على النصوص كما هو موضح بالصورة الخاصه بالمقال حيث تعد مكتبة animated_text_kit من اكثر المكتبات التي تستخدم في الانميشن بشكل كبير جدا ويمكنك استخدامها بشكل مجاني لتنفيذ عدد كبير من الانميشن كما هو موضح .
dependencies:
animated_text_kit: ^4.2.1
animated_text_kit.dart
Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text('Rotate' , style: TextStyle(fontSize: 22),),
Row(
children: <Widget>[
const Text(
'Be',
style: TextStyle(fontSize: 43.0),
),
const SizedBox(width: 30.0 , height: 120,),
DefaultTextStyle(
style: const TextStyle(
fontSize: 35.0,
fontFamily: 'Horizon',
color: Colors.red
),
child: AnimatedTextKit(
animatedTexts: [
RotateAnimatedText('AWESOME'),
RotateAnimatedText('OPTIMISTIC'),
RotateAnimatedText('DIFFERENT'),
],
),
),
],
),
const Text('Fade' , style: TextStyle(fontSize: 22),),
SizedBox(
width: double.infinity,
height: 100,
child: DefaultTextStyle(
maxLines: 1,
textAlign: TextAlign.center,
overflow: TextOverflow.clip,
style: const TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold,
color: Colors.red,
),
child: AnimatedTextKit(
animatedTexts: [
FadeAnimatedText('GeeCoders !'),
FadeAnimatedText('GeeCoders to learn !'),
FadeAnimatedText('GeeCoders is here !'),
],
onTap: () {
print("Tap Event");
},
),
),
),
const Text('Scale ' , style: TextStyle(fontSize: 22),),
SizedBox(
height: 100,
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 50.0,
fontFamily: 'Canterbury',
color: Colors.red,
),
child: AnimatedTextKit(
animatedTexts: [
ScaleAnimatedText('Dart'),
ScaleAnimatedText('Java'),
ScaleAnimatedText('Python'),
],
),
),
),
const Text('Wavy ' , style: TextStyle(fontSize: 22),),
SizedBox(
height: 100,
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 20.0,
color: Colors.red,
),
child: AnimatedTextKit(
animatedTexts: [
WavyAnimatedText('GeeCoders'),
],
isRepeatingAnimation: true,
),
),
),
const Text('LIQUIDY ' , style: TextStyle(fontSize: 22),),
SizedBox(height: 10,),
SizedBox(
width: 280,
child: TextLiquidFill(
text: 'GeeCoders',
waveColor: Colors.red,
boxBackgroundColor: Colors.brown,
textStyle: TextStyle(
fontSize: 50.0,
fontWeight: FontWeight.bold,
),
boxHeight: 100.0,
),
),
],
),
)
,
);
مزيد من المقالات
