Animation In Flutter

تعداد بازدید ها : 734 بازدید
 Animation In Flutter

مبحث انیمیش در فلاتر ، از جذاب ترین مباحث کار می باشد . شما به راحتی می توانید افکت های حرکتی مختلفی را به ویجت های موجود در UI بدهید . در زیر نمونه ای کوچک از پیاده سازی یک انیمیشن قرار دارد . در این مثال سعی شده روش کار با چهار جزء سازنده یک انیمیشن شامل : Animation , AnimationController , Tween , AnimatedBuilder به نمایش گذاشته شود .

کد پیاده سازی این انیمیشن به شکل زیر است :

  1. import 'package:flutter/material.dart';
  2. void main() {
  3. runApp(MaterialApp(
  4. debugShowCheckedModeBanner: false,
  5. home: MyApp(),
  6. ));
  7. }
  8. class MyApp extends StatefulWidget {
  9. @override
  10. _MyAppState createState() => _MyAppState();
  11. }
  12. class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  13. AnimationController controller; // تعریف یک انیمیشن کنترلر
  14. Animation<double> animation; // تعریف یک انیمیشن
  15. @override
  16. void initState() {
  17. // TODO: implement initState
  18. super.initState();
  19. // مقداردهی به کنترلر
  20. controller = AnimationController(
  21. vsync: this, duration: Duration(milliseconds: 2000));
  22. // مقداردهی به انیمیشن
  23. animation = Tween(begin: 0.0, end: 300.0)
  24. .animate(CurvedAnimation(parent: controller, curve: Curves.bounceOut));
  25. }
  26. @override
  27. Widget build(BuildContext context) {
  28. return Scaffold(
  29. appBar: AppBar(
  30. title: Text('انیمیشن در فلاتر'),
  31. centerTitle: true,
  32. ),
  33. body: Center(
  34. child: Column(
  35. mainAxisAlignment: MainAxisAlignment.center,
  36. children: <Widget>[
  37. // استفاده از انیمیش بیلدر جهت ساخت انیمیشن
  38. AnimatedBuilder(
  39. animation: controller, // ارسال کنترلر به انیمیشن بیلدر
  40. builder: (BuildContext context, Widget child) {
  41. return Container(
  42. width: animation.value,
  43. height: animation.value,
  44. child: Image.network('https://javareshkian.ir/wp-content/uploads/2020/03/javareshkian4.png')
  45. );
  46. },
  47. ),
  48. RaisedButton(
  49. onPressed: () {
  50. if (controller.isDismissed) // اگر انیمشن شروع نشده بود
  51. controller.forward(); // اجرای انیمیشن
  52. else if (controller.isCompleted) // اگر انیمیشن اتمام یافته بود
  53. controller.reverse(); // اجرای معکوس انیمیشن
  54. },
  55. child: Text('شروع انیمیشن'),
  56. )
  57. ],
  58. ),
  59. ),
  60. );
  61. }
  62. }
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  AnimationController controller;  // تعریف یک انیمیشن کنترلر
  Animation<double> animation;  // تعریف یک انیمیشن

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    // مقداردهی به کنترلر
    controller = AnimationController(
        vsync: this, duration: Duration(milliseconds: 2000));

    // مقداردهی به انیمیشن
    animation = Tween(begin: 0.0, end: 300.0)
        .animate(CurvedAnimation(parent: controller, curve: Curves.bounceOut));
    
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('انیمیشن در فلاتر'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // استفاده از انیمیش بیلدر جهت ساخت انیمیشن
            AnimatedBuilder(
              animation: controller,  // ارسال کنترلر به انیمیشن بیلدر
              builder: (BuildContext context, Widget child) {
                return Container(
                    width: animation.value,
                    height: animation.value,
                    child: Image.network('https://javareshkian.ir/wp-content/uploads/2020/03/javareshkian4.png')
                );
              },
            ),
            RaisedButton(
              onPressed: () {
                if (controller.isDismissed)  // اگر انیمشن شروع نشده بود
                  controller.forward();  // اجرای انیمیشن
                else if (controller.isCompleted)  // اگر انیمیشن اتمام یافته بود
                  controller.reverse();  // اجرای معکوس انیمیشن
              },
              child: Text('شروع انیمیشن'),
            )
          ],
        ),
      ),
    );
  }
}

خروجی کد بالا به شکل زیر است :

Animation_In_Flutter

جهت کسب اطلاعات بیشتر از این آدرس به سایت اصلی فلاتر مراجعه نمایید .

می خوانم   اسکلت بندی صفحه در فلاتر

امیدوارم این مطلب برای شما مفید باشد .

2+
محمدمجتبی جوارشکیان

محمدمجتبی جوارشکیان

من محمدمجتبی جوارشکیان ، کارشناس IT و فعال اجتماعی هستم و در حوزه معماری ، طراحی ، تحلیل گری ، مدلسازی و توسعه ی محیط های نرم افزاری فعالیت دارم. همانند سایر کارشناسان IT در تلاشم تا دنیا جای زیباتری برای زندگی باشد. بسیار خوشحال می شوم من را از انتقادات ، پیشنهادات و نظرات خود مطلع فرمایید. آدرس ایمیل : mjfakhr@yahoo.com

ارسال یک پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

یک × 1 =