
در این مقاله از آموزش Flutter می آموزید چگونه با انیمیشن و ایجاد برای عناصر موجود اپلیکیشن کار کنید. کار با انیمیشن در فلاتر نیز آسان تر شده و تجربه بهتر و سریع تری رو در ایجاد انیمیشن در اختیار شما قرار میده . همواره آموزش ها مرتبط رو با برچسب فلاتر در وبلاگ مارکت اندروید ریور دنبال کنید.
آموزش کار با انیمیشن در Flutter
همانطور که میدونید در جاوا برای ساخت انیمیشن و ایجاد آن باید با استفاده از xml این کار رو انجام بدیم که xml مربوط به فایل های لی اوت اندروید می شوند اما در فلاتر با توجه به اینکه پایه این زبان بر اساس زبان دارت هستش شما نیاز دارید تا از طریق یک کنترلر به نام AnimationController
استفاده می کنیم.
همچنین با Animation
می تونید کنترل هایی مانند توقف ، معکوس سازی و.. و همچنین Ticker که در هنگام رخ دادن Vsync مقادیر بین 0 و 1 رو تولید میکنه رو روی انیمیشنی که ایجاد کردیم اعمال کنیم.
نحوه ایجاد انیمیشن در فلاتر برای یک ویجت
کد پایین نحوه ایجاد یک انیمیشن برای محو شدن یک فایل تصویری لوگو است که توسط آن می توانید یک انیمیشن زیبا به نحوه نمایش لوگو به جای نمایش ساده آن بدهید که به زیبایی اپلیکیشن نیز کمک می کند.برای ایجاد این انیمیشن از یک FadeTransition
استفاده می کنیم تا زمانی که روی FloatingActionButton
کلیک شد این انیمیشن پخش شود.
import 'package:flutter/material.dart'; void main() { runApp(FadeAppTest()); } class FadeAppTest extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Fade Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyFadeTest(title: 'Fade Demo'), ); } } class MyFadeTest extends StatefulWidget { MyFadeTest({Key key, this.title}) : super(key: key); final String title; @override _MyFadeTest createState() => _MyFadeTest(); } class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin { AnimationController controller; CurvedAnimation curve; @override void initState() { controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this); curve = CurvedAnimation(parent: controller, curve: Curves.easeIn); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Container( child: FadeTransition( opacity: curve, child: FlutterLogo( size: 100.0, )))), floatingActionButton: FloatingActionButton( tooltip: 'Fade', child: Icon(Icons.brush), onPressed: () { controller.forward(); }, ), ); } }
در کد بالا می توانید ببیند کنترلر هایی که در بالا اشاره کردیم به چه نحو تعریف شدند. فوق العادست ، ابتدا یک کلاس به منظور تعریف این کنترلر ها تعریف کردیم. سپس مقادیر زمانی مورد نظر را برای این کنترلر ها ست کردیم.
سپس FadeTransition را نیز برای بادی لوگو تعریف کردیم میزان شفافیت یا Opacity
را نیز برابر مقدار کنترلر Curve
قرار دادیم و برای فولاتینگ باتون هم در رویداد onPressed
انیمیشن را استارت کردیم و در VoidMain
به اجرا در آوردیم. لذت ببرید…
علی شیرالی CO-Founder نویسنده مقاله
بنیانگذار مارکت اندروید ریور و گاهی هم گیم باز 🎮 و صد البته یه عاشق فیلمسازی 🎬 و عکاسی 📷 که چندین گام جدی هم توی این زمینه برداشته..
نگارش کد بلند یا نگارش بخش عمده یک سورس کد :