آموزش انیمیشن در فلاتر Flutter

  • مدرس : عماد قاسم پور
  • سطح آموزش : متوسط
  • مدت : 78 دقیقه
  • تعداد دانشجو : 81

انیمیشن در فلاتر Flutter

یکی از جذاب ترین بحث ها در فریمورک فلاتر پیاده سازی انیمیشن هست. با پیاده سازی انیمیشن در نرم افزار های موبایلی یا همان اپلیکیشن ها، ظاهر UI زیباتر و جذاب تر و تجربه کاربری UX بهتری برای کاربر رقم میزنیم. در فلاتر امکان پیاده سازی انواع انیمیشنها بر روی ویجت ها وجود داره. بیشتر ویجت ها به ویژه متریال ویجت در فلاتر جلوه های حرکتی استانداردی در ساختار خودشون دارن، اما بهتر هست بدونید که امکان سفارشی سازی جلوه ها هم وجود داره.

دو نوع انیمیشن در flutter وجود داره که توضیح مختصری راجع به هر کدوم از اونها میدیم.

انیمشین تویین Tween animation in flutter:

در این نوع انمیشین نقطه شروع و پایان داریم که دارای زمان و سرعت حرکت از نقطه شروع به پایان هست. مانند تایم لاین

انیمیشن های فیزیک پایه در فلاتر  Physics-based animation in flutter:

این نوع انیمیشن بر اساس حرکات واقعی مثل پرتاب یک توپ در واقعیت ساخته میشن.

 

انیمیشن در فلاتر الگو هایی داره که اغلب مورد استفاده قرار میگیرن و بسیار پر کاربرد هستن. چند تا نمونه از اونها رو براتون توضیح میدم.

لیست متحرک یا گرید Animated list or grid:

این الگو شامل اضافه یا حذف کردن یک عنصر به لیست یا گرید هست.

 

انتقال عنصر مشترک shared element transition:

در این الگو کاربر یک المان رو انتخاب می کنه که با حرکتی به صفحه جدید منتقل میشه و جزئیات بیشتری به کاربر نشون میده. در فلاتر با استفاده از ابزارک هیرو hero به راحتی میتونیم انتقال عنصر مشترک بین صفحات رو پیاده کنیم. مثلا با استفاده از ویجت هیرو در فلاتر ضمن تغییر شکل و اندازه از صفحه ای به صفحه ای پرواز می کنیم🤨

 

staggered animation:

این انمیشین از چندین جلوه کوچک تشکیل شده که ممکنه این انیمیشن های کوچک پشت سر هم اجرا بشن یا به طور کامل یا تا حدی همپوشانی داشته باشن. مثلا فرض کنین یک مربع تبدیل به یک دایره بشه و بعد رنگش عوض بشه و مجددا رنگ دایره به حالت قبل برگرده و به مربع تبدیل بشه.

در این دوره آموزشی به نحوه ایجاد انیمیشن ها در Flutter میپردازیم و نحوه استفاده از انها رو به صورت عملی توضیح میدیم. در طول دوره به هم انواع مختلف انیمیشن ها در Flutter و روش پیاده سازی انها رو بررسی خواهیم کرد.

 

خب تا این جا توضیحات مختصری در مورد کلیات انیمیشن در flutter دادیم. اگر احتیاج به توضیحات بیشتر و مشاهده نمونه انمیشین های ساخته شده داشتین می تونین به لینک زیر مراجعه کنین.

توضیح انیمیشن در فلاتر

چرا انیمیشن در Flutter مهم است؟

فریمورک Flutter یک ابزار فوق العاده برای طراحی اپلیکشن های اندروید و iOS است. امکان طراحی UI بسیار جذاب در Flutter از نقاط قوت اش محسوب میشه. انیمیشن ها در تجربه کاربری(UX) برنامه ها تاثیر خییییییلی مهمی دارند . اشنایی با انیمیشن ها در ایجاد یک UI و UX دلچسب و کاربردی و در دنیای امروز برنامه های موبایل حیاتی است.

توی دوره انیمیشن ها در فلاتر چی یاد میگریم؟

توی این دوره با انواع Animated Widget و روش کار با اونها اشنا میشیم بعد به سراغ استفاده از Tween میریریم که با استفاده از اون میتونیم تقریبا به هر چیزی در Flutter انیمیشن بدیم. در ادامه نحوه کنترل انیمیشن ها رو با Animation Controller یاد میگیریم. و همچنین یاد میگیریم چطور انیمیشن ها رو با هم ترکیب کنیم و چند تا انیمیشن رو با هم اجرا کنیم و همچنین با Hero و روش استفاده از اون آشنا میشیم.

  • درس 1 : معرفی دوره آموزشی

    1 دقیقه
  • 18 دقیقه

    در این قسمت ، قصد داریم اولین نوع Animation در فلاتر رو بررسی کنیم.
    در فلاتر همه چیز وابسته به Widget هست. همچون Container , Padding , Text و …
    حالا برای بحث Animation ، فلاتر یک سری Widget رو ایجاد کرده که این نوع ویجت ها امکان انیمیشن شدن رو دارند یعنی همان Animated Widget
    به طور مثال Animated Container داریم. همان Container که میتونه دارای انیمیشن باشه. یعنی یک نقطه ابتدا و انتها از ما دریافت کنه و مسیر این دو رو خودش Animate کنه.

    در اولین مثال قصد داریم یک نمونه از همین ویجت ها رو Animate کنیم.در مرحله اول یک stateful widget ایجاد می کنیم.

    import 'package:<a href="https://welearn.site/course/flutter-video-tutorial/" title="آموزش جامع فلاتر Flutter" target="_blank" class="auto-link" >flutter</a>/material.<a href="https://welearn.site/course/dart-tutorial/" title="آموزش زبان برنامه نویسی Dart (دارت)" target="_blank" class="auto-link" >dart</a>';
    
    void main() {
      runApp(App());
    }
    class App extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: MyApp(),
        );
      }
    }
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    class _MyAppState extends State<MyApp> {
      @override
      Widget build(BuildContext context) {
        return Container();
      }
    }

    حالا اپلیکیشن رو یکبار ریست می کنیم.
    در دومین قدم نیاز داریم برنامه ما ساختار اپلیکیشن داشته باشه. در نتیجه از Scaffold استفاده می کنیم.

    return Scaffold(
      appBar: AppBar(),
      body: Container(
          color: Colors.white,
    ),);

    برای حذف بنر نیز از debugShowCheckedModeBanner استفاده کنید.

    debugShowCheckedModeBanner: false,

    حالا میایم و یک Animated Widget ایجاد می کنیم اون ویجت رو با استفاده از یک Button کنترل می کنیم.
    در مرحله اول یک ویجت Center ایجاد میکنیم تا تمام ویجت ها در مرکز قرار بگیرند.
    در ویجت children نیز یک Animated Widget رو ایجاد می کنیم.

    child: Center(
      child: Column(
    	mainAxisAlignment: MainAxisAlignment.center,
    	children: <Widget>[
    	  AnimatedContainer();
    	],
      ),
    ),

    AnimatedContainer چندین ویژگی داره که دو تا از اونها کاربرد بیشتری دارند. از جمله duration و curve

    child: Center(
      child: Column(
    	mainAxisAlignment: MainAxisAlignment.center,
    	children: <Widget>[
    	  AnimatedContainer(
    		duration: Duration(milliseconds: 600),
    	  ),
    	],
      ),
    ),

    پس از مشخص کردن duration نیز میایم یک عرض و ارتفاع ثابت در نظر میگیریم.

    child: Center(
      child: Column(
    	mainAxisAlignment: MainAxisAlignment.center,
    	children: <Widget>[
    	  AnimatedContainer(
    		duration: Duration(milliseconds: 600),
    		width: 300,
    		height: 300,
    		color: Colors.purple,
    	  ),
    	],
      ),
    ),

    پس از run برنامه یک باکس بنفش برای ما نمایش داده میشه. بعد از ویجت AnimatedContainer از SizedBox استفاده می کنیم که یک button رو با فاصله از مربع نمایش دهیم.

    child: Center(
      child: Column(
    	mainAxisAlignment: MainAxisAlignment.center,
    	children: <Widget>[
    	  AnimatedContainer(
    		duration: Duration(milliseconds: 600),
    		width: 300,
    		height: 300,
    		color: Colors.purple,
    	  ),
    	  SizedBox(height: 50,),
    	],
      ),
    ),

    برای ایجاد یک button نیز از ویجت RaisedButton استفاده می کنیم و پارامترهای child و onPressed رو پیاده سازی میکنیم.

    child: Center(
      child: Column(
    	mainAxisAlignment: MainAxisAlignment.center,
    	children: <Widget>[
    	  AnimatedContainer(
    		duration: Duration(milliseconds: 600),
    		width: 300,
    		height: 300,
    		color: Colors.purple,
    	  ),
    	  SizedBox(height: 50,),
    	  RaisedButton(
    		child: Text("Press"),
    		onPressed: (){
    		  
    		},
    	  )
    	],
      ),
    ),

    دقت کنید تا الان هیچ عملیاتی روی button ایجاد نشده.
    خب تا اینجا ، یک باکس 300 در 300 و یک button ایجاد کردیم. حالا قصد داریم با فشردن دکمه Press عرض و ارتفاع باکس رو با یک ساختار Animate کم کنیم.
    پس در مرحله اول باید عرض و ارتفاع باکس رو متغییر کنیم.
    در مرحله اول یک مقدار boolean تعریف می کنیم.

    bool isBig=false;

    حالا در پارامترهای width , height داریم.

    width: isBig==false ? 300 : 100,
    height: isBig==false ? 300 : 100,

    حالا قصد داریم با فشردن button عرض و ارتفاع این باکس رو مدیریت کنیم.
    پس در نتیجه از تابع setState استفاده می کنیم.

    setState(() {
    	isBig=!isBig;
    });

    خب تا اینجا انیمیشن باکس ما از طریق button در حال مدیریت هست. این انیمیشن ما به صورت خطی هست و ما میتونیم از طریق پارامتر curve نوع های دیگه ای از انیمیشن نیز داشته باشیم.
    به طور مثال easeOutQuart
    در نتیجه داریم :

    import 'package:<a href="https://welearn.site/course/flutter-video-tutorial/" title="آموزش جامع فلاتر Flutter" target="_blank" class="auto-link" >flutter</a>/material.<a href="https://welearn.site/course/dart-tutorial/" title="آموزش زبان برنامه نویسی Dart (دارت)" target="_blank" class="auto-link" >dart</a>';
    
    void main() {
      runApp(App());
    }
    class App extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: MyApp(),
        );
      }
    }
    
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      bool isBig=false;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(),
          body: Container(
            color: Colors.white,
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  AnimatedContainer(
                    duration: Duration(milliseconds: 600),
                    curve: Curves.easeOutQuart,
                    width: isBig==false ? 300 : 100,
                    height: isBig==false ? 300 : 100,
                    color: Colors.purple,
                  ),
                  SizedBox(height: 50,),
                  RaisedButton(
                    child: Text("press"),
                    onPressed: (){
                      setState(() {
                        isBig=!isBig;
                      });
                    },
                  )
                ],
              ),
            ),
          ),
        );
      }
    }

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 11 دقیقه

    در جلسه قبل با Animated Widgets آشنا شدیم.حالا اگر قصد داشته باشیم یک Widget رو Animate کنیم که داخل Animated Widgets نبود ، روال کار به چه صورت هست؟
    یکی از راه حل ها ، استفاده از Tween هست که به ما کمک می کند ، هر Value رو با یک ساختار Animate ایجاد کنیم.Tween میاد یک مقدار ابتدا و انتها از هر نوعی ، به عنوان ورودی دریافت و بین این مقادیر رو با Animated تغییر می کند. یعنی ما می توانیم با این مقادیر ابتدا و انتها یک انیمیشن ایجاد کنیم.

    حالا چطور از Tween استفاده کنیم؟
    خب در جلسه قبل مثال زیر رو داشتیم

    
    import 'package:<a href="https://welearn.site/course/flutter-video-tutorial/" title="آموزش جامع فلاتر Flutter" target="_blank" class="auto-link" >flutter</a>/material.<a href="https://welearn.site/course/dart-tutorial/" title="آموزش زبان برنامه نویسی Dart (دارت)" target="_blank" class="auto-link" >dart</a>';
    
    void main() {
      runApp(App());
    }
    class App extends StatelessWidget {
      @override
      <a href="https://welearn.site/course/coding-wordpress-widgets/" title="آموزش ابزارک نویسی وردپرس" target="_blank" class="auto-link" >Widget</a> build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: MyApp(),
        );
      }
    }
    
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State {
      bool isBig=false;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(),
          body: Container(
            color: Colors.white,
          ),
        );
      }
    }

    حالا قصد داریم یک Container دیگه ایجاد و از طریق Tween فاصله این دو Container رو Animate کنیم. طبیعتا ما چنین Animated Widget برای این روند نداریم و باید خودمون این ساختار رو پیاده سازی کنیم.در مرحله اول از تابع TweenAnimationBuilder استفاده می کنیم. این تابع نیز همانند Animated Widget دو ویژگی duration و curve رو نیز دارد.

    child: TweenAnimationBuilder(
    	duration: Duration(milliseconds: 600),
    	curve: Curves.easeOutQuart,
    ),

    ویژگی های دیگری که در این تابع داریم ، ویژگی tween هست که ما باید ابتدا و انتهای آیتمی که قصد داریم Animate کنیم را مشخص کنیم.در این مرحله باید مشخص کنیم چه نوع Value رو باید Animate کنیم. ما double تعریف می کنیم.
    این Value داخل Tween مشخص می کند نوعی که میخواد تو این مدت 600 میلی ثانیه از نقطه ابتدا به انتها برود double هست. ما داخل tween دو پارامتر begin و end داریم. برای مقدار end یک متغیر تعریف می کنیم.

    double targetValue=100;
    tween: Tween(begin: 0,end:targetValue ),

    حالا باید آیتم builder رو مشخص کنیم. در واقع اون قسمتی هست که میاد و موقع Animate رفرش میشه. 3 پارامتر ورودی داره.

    builder: (context,double size,Widget child)

    حالا باید رابط کاربری که در این builder میخوایم نمایش بدیم رو پیاده سازی کنیم.

    builder: (context,double size,Widget child){
    	return Column(
    		mainAxisAlignment: MainAxisAlignment.center,
            children: [
            Container(
    			color: Colors.indigo,
    			width: 300,
                height: 100,
            ),
            SizedBox(
                height: size,
            ),
            Container(
                color: Colors.indigo,
                width: 300,
                height: 100,
            ),
            RaisedButton(
                child: Text("press me"),
                onPressed: (){
    				setState(() {
    					targetValue= targetValue==0.0 ? 100 : 0.0;
    				});
     
                },
            ),
    		Text(size.toInt().toString(),style: TextStyle(fontSize: 30),)
    		],
          );
    },

    در مرحله اول یک Column ایجاد و مقدار mainAxisAlignment رو center در نظر میگیریم که آیتم های ما در وسط اپ قرار بگیرن.
    رنگ و عرض و ارتفاع widget رو نیز تعریف میکنیم.

    Container(
        color: Colors.indigo,
        width: 300,
        height: 100,
    ),

    پس از ساخت widget یک sidebox نیز ایجاد میکنیم که این sidebox ارتفاع بین دو widget هست.

    SizedBox(height: size,),

    یک widget دیگه نیز پیاده سازی می کنیم.

    Container(
        color: Colors.indigo,
        width: 300,
        height: 100,
    ),

    و در نهایت از طریق یک button این انیمیشن رو کنترل می کنیم.

    RaisedButton(
         child: Text("press me"),
         onPressed: (){
    		setState(() {
    			targetValue= targetValue==0.0 ? 100 : 0.0;
            });
    
          },
    ),
    Text(size.toInt().toString(),style: TextStyle(fontSize: 30),)

    در نهایت داریم

    import 'package:<a href="https://welearn.site/course/flutter-video-tutorial/" title="آموزش جامع فلاتر Flutter" target="_blank" class="auto-link" >flutter</a>/material.<a href="https://welearn.site/course/dart-tutorial/" title="آموزش زبان برنامه نویسی Dart (دارت)" target="_blank" class="auto-link" >dart</a>';
    
    void main() {
      runApp(App());
    }
    class App extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: MyApp(),
        );
      }
    }
    
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State {
      double targetValue=100;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(),
          body: Container(
            color: Colors.white,
            child: Center(
              child: TweenAnimationBuilder(
                duration: Duration(milliseconds: 600),
                curve: Curves.easeOutQuart,
                tween: Tween(begin: 0,end:targetValue ),
                builder: (context,double size,Widget child){
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        color: Colors.indigo,
                        width: 300,
                        height: 100,
                      ),
                      SizedBox(
                        height: size,
                      ),
                      Container(
                        color: Colors.indigo,
                        width: 300,
                        height: 100,
                      ),
                      RaisedButton(
                        child: Text("press me"),
                        onPressed: (){
                          setState(() {
                            targetValue= targetValue==0.0 ? 100 : 0.0;
                          });
    
                        },
                      ),
                      Text(size.toInt().toString(),style: TextStyle(fontSize: 30),)
                    ],
                  );
                },
              ),
            ),
          ),
        );
      }
    }

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 10 دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    خب ما تا اینجا در مورد Animate Widget و Tween صحبت کردیم. اما مشکلی که در این دو مورد هست ، این هست که ما کنترلی روی انیمیشن نداریم. یعنی ابتدا و انتها رو به ویجت میدادیم و انیمیشن ایجاد می شد. اما در وسط انیمیشن کنترلی نداریم که بخوایم stop کنیم یا حتی انیمیشن رو برعکس کنیم. خب حالا چطور یک کنترل مشخص در مورد انیمیشن داشته باشیم؟ جواب سادست : Animation Controller که از اسم اون هم مشخص هست ، روند کنترل انیمیشن رو بر عهده داره.
    یعنی به طور مثال از طریق Animation Controller می توانیم انیمیشن ویجت رو در وسط متوقف یا برعکس اجرا کنیم و یا …

    حالا بریم سراغ یک مثال جذاب

    AnimationController _animationController;

    AnimationController چندین پارامتر داره که یکی از آنها همان duration هست.

    _animationController=AnimationController(duration: Duration(seconds: 5),vsync: this);

    پارامتر دیگه vsync هست. این پارامتر به ما کنترل عملکرد انیمیشن رو میده. حالا چطور این vsync رو مقدار بدیم.
    به کلاس قسمت State تایپ می کنیم.

    with SingleTickerProviderStateMixin

    یعنی داریم :

    class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin

    حالا به vsync پارامتر this v رو پاس می دهیم. حالا بیایم ویجت مورد نظرمون رو پیاده سازی کنیم. ویجت RotationTransition رو پیاده سازی می کنیم.

    RotationTransition(
    	alignment: Alignment.center,
    	turns: _animationController,
    	child: Container(
    	  color: Colors.cyan,
    	  width: 200,
    	  height: 200,
    	),
    ),

    طبیعتا برای کنترل انیمیشن هم یک button ایجاد می کنیم.

    RaisedButton(
    child: Text("toggle"),
    onPressed: (){
      if(_animationController.isAnimating){
    	_animationController.stop();
      }else{
    	_animationController.repeat();
      }
    },
    )

    دقت کنید که initState حتما باید فراخوانی بشه تا AnimationController ما مقدار دهی بشه.
    حالا اگر بیایم در تابع initState انیمیشن رو با تابع forward فراخوانی کنیم و برنامه رو ریست کنیم ، انیمیشن اجرا می شود.

    _animationController.repeat();

    یعنی داریم :

    void initState() {
        // TODO: implement initState
        super.initState();
        _animationController=AnimationController(duration: Duration(seconds: 5),vsync: this);
        _animationController.forward();
    }

    حالا قصد داریم از طریق Button انیمیشن ویجت رو کنترل کنیم.
    حالا میایم از طریق تابع onPressed یک شرط پیاده سازی می کنیم.

    if(_animationController.isAnimating){
    	_animationController.stop();
    }else{
    	_animationController.repeat();
    }

    خب در نهایت از طریق قطعه کد زیر ما میتونیم روی انیمیشن یک ویجت از طریق Animation Controller کنترل داشته باشیم.

    import 'package:<a href="https://welearn.site/course/flutter-video-tutorial/" title="آموزش جامع فلاتر Flutter" target="_blank" class="auto-link" >flutter</a>/material.<a href="https://welearn.site/course/dart-tutorial/" title="آموزش زبان برنامه نویسی Dart (دارت)" target="_blank" class="auto-link" >dart</a>';
    
    void main() {
      runApp(App());
    }
    class App extends StatelessWidget {
      @override
      <a href="https://welearn.site/course/coding-wordpress-widgets/" title="آموزش ابزارک نویسی وردپرس" target="_blank" class="auto-link" >Widget</a> build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: MyApp(),
        );
      }
    }
    
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin{
    
      AnimationController _animationController;
    
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        _animationController=AnimationController(duration: Duration(seconds: 5),vsync: this);
        _animationController.repeat();
      }
    
      @override
      <a href="https://welearn.site/course/coding-wordpress-widgets/" title="آموزش ابزارک نویسی وردپرس" target="_blank" class="auto-link" >Widget</a> build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(),
          body: Container(
            color: Colors.white,
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <<a href="https://welearn.site/course/coding-wordpress-widgets/" title="آموزش ابزارک نویسی وردپرس" target="_blank" class="auto-link" >Widget</a>>[
                  RotationTransition(
                    alignment: Alignment.center,
                    turns: _animationController,
                    child: Container(
                      color: Colors.cyan,
                      width: 200,
                      height: 200,
                    ),
                  ),
                  RaisedButton(
                    child: Text("toggle"),
                    onPressed: (){
                      if(_animationController.isAnimating){
                        _animationController.stop();
                      }else{
                        _animationController.repeat();
                      }
                    },
                  )
                ],
              ),
            ),
          ),
        );
      }
    }
  • 21 دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    در جلسه قبل بحث Animation Controller رو مورد بررسی قراردادیم و حال در این جلسه میخوایم چند تا انیمیشن رو با هم ترکیب کنیم و با استفاده از Animation Controller اونها رو مدیریت کنیم. قصد داریم یک دیالوگ رو با انیمیشن پیاده سازی کنیم. برای شروع یک Animation Controller ایجاد می کنیم.

    AnimationController _animationController;

    و در داخل تابع initState این Animation Controller رو پیاده سازی می کنیم.

    void initState() {
        // TODO: implement initState
        super.initState();
        _animationController =
            AnimationController(duration: Duration(seconds: 2), vsync: this);
    }

    حالا برای ایجاد انیمیشن دیالوگ یک ویجت از نوع stateless به نام PopupWidget ایجاد می کنیم. در مرحله اول ، چندین انیمیشن پایه به نام های opacity , width , height , controller از نوع double ایجاد می کنیم.

    class PopupWidget extends StatelessWidget {
      Animation opacity;
      Animation width;
      Animation height;
      Animation controller;
      @override
      <a href="https://welearn.site/course/coding-wordpress-widgets/" title="آموزش ابزارک نویسی وردپرس" target="_blank" class="auto-link" >Widget</a> build(BuildContext context) {
    	return Container;
      }
    }

    حالا این انیمیشن ها رو در تابع constructor مقداردهی می کنیم.

    PopupWidget(this.controller) {
        opacity = Tween(begin: 0, end: 1.0).animate(CurvedAnimation(
            parent: controller, curve: Interval(0.0, 0.1, curve: Curves.ease)));
        width = Tween(begin: 0, end: 300.0).animate(CurvedAnimation(
            parent: controller, curve: Interval(0.125, 0.225, curve: Curves.ease)));
        height = Tween(begin: 2, end: 300.0).animate(CurvedAnimation(
            parent: controller, curve: Interval(0.250, 0.350, curve: Curves.ease)));
    }

    دقت کنید که انیمیشن ما به صورت Tween هست و به همین خاطر هست که در تابع constructor از Tween استفاده می کنیم.حالا اگر بخوایم رابط کاربری رو براساس کنترلر آپدیت کنیم ، صرفا Container برای ما جوابگو نیست و باید از یک AnimatedBuilder نیز استفاده کنیم.
    مهمترین پارامترهای AnimatedBuilder یکی builder و دیگری animation هست. پارامتر animation همان کنترلی هست که داریم استفاده می کنیم.builder هم دو پارامتر اصلی context و یک ویجت به نام child رو داره.
    حالا میتونیم Container رو ایجاد کنیم.

    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
    		return Container(
    	)
      }
    );

    اما چون قصد داریم Container ما با opacity کم و زیاد کنیم ، پس در نتیجه Container رو داخل ویجت opacity قرار می دهیم.

    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
    	return Opacity(
    	  opacity: opacity.value,
    	  child: Container(
    		width: width.value,
    		height: height.value,
    	  ),
    	);
      }
    );

    حالا میتونیم یک سری استایل رو به باکس موردنظرمون نسبت بدیم.

    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
    	return Opacity(
    	  opacity: opacity.value,
    	  child: Container(
    		width: width.value,
    		height: height.value,
    		decoration: BoxDecoration(
    			color: Colors.green,
    			borderRadius: BorderRadius.all(Radius.circular(20)),
    			boxShadow: [
    			  BoxShadow(
    				color: Colors.grey[500],
    				blurRadius: 20,
    			  )
    		]),
    		child: Center(
    			child: Text(
    			  "Welearn",
    		)),
    	  ),
    	);
      },
    );
  • 12 دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    حالا در این بخش قصد داریم یکی از جذاب ترین ویجت های فلاتر صحبت کنیم ، که به ما کمک میکنه انیمیشن ها رو بین دو صفحه منتقل کنیم. برای اینکار ویجتی داریم به نام Hero. این ویجت کمک میکنه که ما یک object رو با انیمیشن به صفحه دیگری منتقل کنیم.
    انیمیشن‌های Hero، یک عنصر مانند یک تصویر رو انتخاب می‌کنند. این تصویر از این پس Hero نامیده می‌شود و زمانی که گذار صفحه (معمولاً از طریق کلیک روی تصویر) آغاز می‌شود، این Hero به صفحه بعدی اپلیکیشن پرواز می‌کند. زمانی که کاربر دوباره به صفحه قبلی بازگردد، انیمیشن در جهت دیگر اجرا می‌شود و تصویر به محل قبلی خود بازمی‌گردد. ما در این مقاله نه تنها مبانی مقدماتی انیمیشن‌های Hero را بررسی می‌کنیم، بلکه آن را سفارشی‌سازی نیز می‌کنیم.
    ایجاد یک انیمیشن ساده Hero
    انیمیشن‌های Hero احتمالاً یکی از ساده‌ترین انیمیشن‌هایی هستند که می‌توان در فلاتر اجرا کرد و نیازمند تنظیمات زیادی نیستند. اگر نگاهی به تصویر متحرک نمونه فوق بیندازید می‌بینید که آیکون اپلیکیشن مربوطه در هر دو صفحه وجود دارد. تنها چیزی که برای پیاده‌سازی این انیمیشن نیاز داریم، این است که به فلاتر بگوییم این دو صفحه و جایگاه آیکون به هم لینک شده‌اند.

  • 2 دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

نظرات دوره آموزش مجازی انیمیشن در فلاتر Flutter

  • برای مشاهده نظرات و سوالات، بر روی دکمه مربوطه کلیک کنید
  • قابلیت ارسال نظرات به صورت متنی، صوتی، تصویری
81
0
افکار شما را دوست دارم، لطفا نظر دهیدx