آموزش Flutter : کار با انیمیشن

در این مقاله از آموزش 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 به اجرا در آوردیم. لذت ببرید…

  تخفیف ها و اخبار ویژه رو در تلگراممون دنبال کن :)

مقالات مرتبط را بخوانید :

سورس های اندروید شامل تخفیف رو ببین !

  خرید سورس های حرفه ای بازی و اپلیکیشن اندروید