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

آذر 8, 1397| علی شیرالی
آموزش فلوتر | آموزش کار با animate در 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 به اجرا در آوردیم. لذت ببرید…

همچنین بخوانید :  آموزش دیکامپایل APK به سورس اندروید
2.5/5 (2 Reviews)
علی شیرالی CO-Founder نویسنده مقاله

بنیانگذار مارکت اندروید ریور و گاهی هم گیم باز 🎮 و صد البته یه عاشق فیلمسازی 🎬 و عکاسی 📷 که چندین گام جدی هم توی این زمینه برداشته..



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

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


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


  تخفیف ها و اخبار ویژه رو در تلگراممون دنبال کن :)
به این مقاله امتیاز دهید :
2.5/5 (2 Reviews)
  خرید سورس های حرفه ای بازی و اپلیکیشن اندروید

دسته‌ها: آموزش برنامه نویسی اندروید

دیدگاهتان را بنویسید

راهنما : برای نوشتن موارد مختلف در دیدگاه می توانید از راهنمای نگارش اندروید ریور استفاده کنید : نگارش کد کوتاه `your code`
نگارش کد بلند یا نگارش بخش عمده یک سورس کد :
[sourcecode lang="your code language"] your code here [/sourcecode]