Animation https://techgrowup.net エンジニアを強くする Tue, 22 Oct 2024 05:20:49 +0000 ja hourly 1 https://wordpress.org/?v=7.1.2 https://techgrowup.net/wp-content/uploads/2021/05/hp-icon-150x150.png Animation https://techgrowup.net 32 32 Flutter開発入門57 FlutterでFade-Inエフェクトを簡単に作成 https://techgrowup.net/flutter-opacity-animation/ https://techgrowup.net/flutter-opacity-animation/?noamp=mobile#respond Tue, 22 Oct 2024 05:20:47 +0000 https://techgrowup.net/?p=1991 はじめに

アプリケーションに視覚的な魅力を加えるために、アニメーションは非常に重要な要素です。特に、要素を徐々に表示させたり非表示にしたりするOpacityアニメーション（フェードイン・フェードアウト）は、FlutterアプリのUIを洗練させるために非常に効果的です。Flutterでは、Opacityアニメーションを簡単に実装するための機能が用意されています。

この記事では、FlutterでOpacityアニメーション（フェードアニメーション）を実装する方法を詳しく解説します。これにより、スムーズなフェードイン・フェードアウト効果を簡単にアプリに取り入れることができ、ユーザー体験を向上させることができます。

Opacityアニメーションとは

Opacityアニメーションは、ウィジェットの透明度（不透明度）を時間の経過に合わせて徐々に変化させるアニメーションです。フェードインやフェードアウトと呼ばれることもあり、ウィジェットをスムーズに表示または非表示にする際に用いられます。

Flutterでは、OpacityウィジェットやAnimatedOpacityウィジェットを使うことで、透明度をアニメーションでコントロールすることができます。

Opacityアニメーションの基本的な使い方

AnimatedOpacityを使ったフェードイン・フェードアウト

Flutterでは、AnimatedOpacityを使って簡単にOpacityアニメーションを実装できます。これにより、ウィジェットの透明度を自動的にアニメーションで変化させることが可能です。

サンプルコード：AnimatedOpacityによるフェードアニメーション
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: OpacityAnimationExample(),
    );
  }
}

class OpacityAnimationExample extends StatefulWidget {
  @override
  _OpacityAnimationExampleState createState() => _OpacityAnimationExampleState();
}

class _OpacityAnimationExampleState extends State<OpacityAnimationExample> {
  double _opacity = 1.0;

  void _toggleOpacity() {
    setState(() {
      _opacity = _opacity == 1.0 ? 0.0 : 1.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Opacity Animation Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedOpacity(
              opacity: _opacity,
              duration: Duration(seconds: 2),
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _toggleOpacity,
              child: Text('Fade In/Out'),
            ),
          ],
        ),
      ),
    );
  }
}

解説

  • AnimatedOpacity：ウィジェットの透明度（不透明度）をアニメーションさせるために使用します。opacityプロパティに0.0から1.0までの値を指定し、どれくらい透明にするかを決定します。
  • duration：アニメーションの長さを指定します。例では2秒間でフェードイン・フェードアウトを行います。
  • setState：ボタンをタップした際に透明度の状態を変更し、アニメーションをトリガーします。

Opacityアニメーションの応用

状態に基づくアニメーション

アニメーションは、ユーザー操作や状態に応じて動的に変化させることが可能です。たとえば、ユーザーがボタンをタップしたときにフェードイン、もしくは自動的に一定時間後にフェードアウトするアニメーションを簡単に追加できます。

自動フェードアウトの例

以下のコードでは、アプリの起動時に一定時間後に自動的にフェードアウトするアニメーションを実装しています。

class AutoFadeOut extends StatefulWidget {
  @override
  _AutoFadeOutState createState() => _AutoFadeOutState();
}

class _AutoFadeOutState extends State<AutoFadeOut> {
  double _opacity = 1.0;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 3), () {
      setState(() {
        _opacity = 0.0;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Auto Fade Out Example')),
      body: Center(
        child: AnimatedOpacity(
          opacity: _opacity,
          duration: Duration(seconds: 2),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

リストアイテムのフェードイン

リストアイテムをスクロールして表示した際に、アイテムがフェードインするアニメーションを作成することも可能です。これにより、ユーザーの目を引く動きを加えることができます。

リストのアイテムフェードイン例
class FadeInListItem extends StatelessWidget {
  final String text;
  final Animation<double> animation;

  FadeInListItem({required this.text, required this.animation});

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: animation,
      child: ListTile(
        title: Text(text),
      ),
    );
  }
}

この例では、FadeTransitionウィジェットを使用して、リストアイテムがフェードインするアニメーションを簡単に追加できます。

Opacityアニメーションのメリット

  1. アプリの視覚的な魅力を向上
    • Opacityアニメーションを使うことで、ユーザーの視覚的な体験を大幅に向上させることができます。要素が徐々に表示・非表示になる動きは、視覚的に心地よく、アプリ全体のデザインを洗練されたものにします。
  2. ユーザーの関心を引く
    • フェードイン・フェードアウトは、特定の要素にユーザーの注意を引きたい場合に効果的です。たとえば、重要なメッセージや通知をフェードインさせることで、ユーザーに自然に目を向けさせることができます。
  3. 実装が簡単
    • AnimatedOpacityを使えば、コードの手間をかけずにアニメーションを実装できます。UIの一部をスムーズにアニメーションさせたい場合、非常に簡単かつ効果的です。

まとめ

FlutterでのOpacityアニメーションを使えば、アプリに滑らかで自然な視覚効果を追加でき、UI全体が洗練されます。フェードイン・フェードアウトは視覚的に非常に効果的で、アプリの使い心地を向上させるためのシンプルかつ強力な手法です。特に、ユーザーの操作に応じてダイナミックに変化するエフェクトは、アプリにインタラクティブな要素を加える際に最適です。

ぜひ今回のチュートリアルを参考にして、FlutterアプリにOpacityアニメーションを取り入れ、より魅力的なUIを作成してみてください。

]]> https://techgrowup.net/flutter-opacity-animation/feed/ 0 Flutter開発入門56 FlutterのHeroアニメーションで魅力的な画面遷移を実現する方法 https://techgrowup.net/flutter-hero-animation/ https://techgrowup.net/flutter-hero-animation/?noamp=mobile#respond Mon, 21 Oct 2024 13:13:42 +0000 https://techgrowup.net/?p=1988 はじめに

Flutterには、画面間で要素をスムーズに遷移させるための強力なツールがいくつか用意されていますが、その中でも特に注目すべきなのがHeroアニメーションです。Heroアニメーションは、画面をまたいでウィジェットが動的に変化するエフェクトを作り、よりインタラクティブで魅力的なUI体験を提供します。ユーザーが次の画面に移動するとき、視覚的に関連する要素がスムーズにアニメーションしながら移動することで、アプリ全体に一貫性のあるデザインを感じさせることができます。

この記事では、FlutterでHeroアニメーションの基本的な使い方と、その実装方法を紹介します。Heroアニメーションを使いこなすことで、アプリの見た目と操作感を大きく向上させることができます。

Heroアニメーションとは

Heroアニメーションとは、Flutterのウィジェット間で滑らかに要素を移動させるアニメーションです。例えば、サムネイル画像をタップして詳細画面に遷移する際、その画像がアニメーションを伴って画面を移動することで、自然なつながりを感じさせます。

Heroアニメーションは、FlutterのHeroウィジェットを使って簡単に実装できます。Heroウィジェットを画面をまたぐ共通の要素として指定することで、アニメーションが自動的に行われます。

主な特徴

  • 滑らかな画面遷移：ユーザーが意識することなく、画面間でのスムーズな遷移が可能。
  • 簡単な実装：Heroウィジェットを使用するだけで、複雑なアニメーションを簡単に実現できます。
  • 視覚的な一貫性：関連するウィジェットがアニメーションでつながることで、画面間の関連性を強調。

Heroアニメーションの基本的な使い方

Heroアニメーションのセットアップ

まず、Heroウィジェットを使って、シンプルなHeroアニメーションを作成します。以下の例では、画像がホーム画面から詳細画面へアニメーションを伴って移動します。

サンプルコード：Heroアニメーションの基本
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailScreen()),
            );
          },
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
              width: 100,
            ),
          ),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
            ),
          ),
        ),
      ),
    );
  }
}

解説

  • Heroウィジェット：Heroウィジェットは、2つの画面で同じtagを持つウィジェットをリンクします。ここでは、tag: 'imageHero'を使い、ホーム画面と詳細画面で同じ画像がアニメーションで遷移します。
  • GestureDetector：タップイベントを検出するためにGestureDetectorを使用し、ユーザーが画像をタップしたときに画面遷移を行います。
  • Navigator.push()：画面遷移の際に、Heroアニメーションが適用されます。Navigator.pop()で元の画面に戻った際にも、アニメーションが適用されます。

Heroアニメーションの詳細設定

カスタムアニメーション

デフォルトでは、Heroアニメーションはスムーズに拡大・縮小されますが、カスタムアニメーションを適用することも可能です。たとえば、アニメーションの曲線（カーブ）や速度をカスタマイズできます。

カスタムアニメーションの実装例
Hero(
  tag: 'imageHero',
  flightShuttleBuilder: (flightContext, animation, flightDirection, fromHeroContext, toHeroContext) {
    return ScaleTransition(
      scale: animation.drive(
        Tween(begin: 0.5, end: 1.0).chain(CurveTween(curve: Curves.easeInOut)),
      ),
      child: toHeroContext.widget,
    );
  },
  child: Image.network(
    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
    width: 100,
  ),
)

解説

  • flightShuttleBuilder：Heroウィジェットのアニメーションをカスタマイズするために使用します。アニメーションの進行中に、どのようにウィジェットを描画するかを定義できます。
  • ScaleTransition：カスタムのスケールアニメーションを適用し、TweenとCurveTweenを組み合わせて、easeInOutのカーブで拡大・縮小を実現しています。

Heroアニメーションのメリット

  1. 視覚的な関連性を強調
    • Heroアニメーションを使うことで、画面遷移時に重要な要素がスムーズに移動し、視覚的な関連性が強調されます。ユーザーが遷移元と遷移先のつながりを認識しやすくなるため、より自然なUXを提供できます。
  2. 簡単に魅力的なアニメーションを実装
    • Heroウィジェットを使うだけで、複雑なアニメーションを簡単に実装できます。コードの手間が少ないため、短時間で視覚的にリッチなUIを構築できます。
  3. ユーザー体験の向上
    • 画面間でのスムーズな遷移は、アプリ全体に統一感を持たせ、ユーザー体験を向上させます。特に、モバイルアプリでは、インタラクティブでリッチな体験を提供することが重要です。

Heroアニメーションの活用シーン

Heroアニメーションは、さまざまなシーンで活用できます。特に以下のような場合に有効です。

  • 画像ギャラリーの画面遷移：サムネイル画像から詳細画面に遷移する際に、Heroアニメーションでスムーズに表示。
  • リストから詳細画面への遷移：リストアイテムをタップした際、詳細画面に同じアイテムを大きく表示するアニメーション。
  • ダッシュボードから詳細情報への移行：主要なデータや情報をダッシュボードから詳細画面にスムーズに遷移させ、視覚的に強調。

まとめ

FlutterのHeroアニメーションを使うことで、アプリの画面遷移を滑らかにし、よりインタラクティブなユーザー体験を提供できます。少ないコードで魅力的なアニメーションを実装でき、視覚的な一貫性を持たせることができるため、アプリ全体のデザインやUXを向上させる手段として非常に有効です。

Flutter開発の際には、ぜひHeroアニメーションを活用して、ユーザーにとって視覚的にも楽しめるアプリを作りましょう。

]]> https://techgrowup.net/flutter-hero-animation/feed/ 0 Flutter開発入門55 CurvedAnimationで滑らかなアニメーションを実現する https://techgrowup.net/flutter-curved-animation/ https://techgrowup.net/flutter-curved-animation/?noamp=mobile#respond Sun, 20 Oct 2024 07:11:24 +0000 https://techgrowup.net/?p=1985 はじめに

Flutterでアニメーションを作成する際、直線的な動きだけではなく、動きに自然な加速・減速を取り入れたい場合があります。そんなときに使えるのが、CurvedAnimationです。CurvedAnimationを使うと、アニメーションの速度や進行に曲線的な変化（イージング）を追加し、より自然で滑らかなアニメーションを実現できます。

この記事では、CurvedAnimationの基本的な概念と使い方について、詳しく解説します。これを学ぶことで、Flutterアプリのアニメーションにリアリスティックな動きを加えることができ、アプリのユーザー体験が向上するでしょう。

CurvedAnimationとは

CurvedAnimationは、Flutterでアニメーションを作成するときに、進行具合をカーブ（曲線）でコントロールするためのクラスです。アニメーションの動きにイージング（加速や減速）を加えることで、より自然な動きを表現できます。**直線的な変化（線形）**ではなく、アニメーションの進行具合を曲線的に変えることで、さまざまな動きを実現できます。

CurvedAnimationの主な特徴

  • イージング効果：アニメーションの加速・減速を簡単に設定できます。
  • 多様なカーブの選択肢：Flutterには、さまざまなプリセットカーブ（Curves）が用意されています。例: Curves.easeIn, Curves.bounceOutなど。
  • 簡単な実装：AnimationControllerにカーブを追加するだけで、複雑な動きが表現可能です。

CurvedAnimationの基本的な使い方

CurvedAnimationを使ったアニメーション

まず、CurvedAnimationを使って、シンプルなアニメーションを作成してみましょう。AnimationControllerにカーブを追加し、アニメーションの進行に加速や減速を加えます。

サンプルコード：CurvedAnimationの基本
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimationExample(),
    );
  }
}

class AnimationExample extends StatefulWidget {
  @override
  _AnimationExampleState createState() => _AnimationExampleState();
}

class _AnimationExampleState extends State<AnimationExample> with TickerProviderStateMixin {
  late AnimationController _controller;
  late CurvedAnimation _curvedAnimation;

  @override
  void initState() {
    super.initState();
    // AnimationControllerを初期化
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    // CurvedAnimationを設定し、イージングカーブを追加
    _curvedAnimation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,  // カーブの種類
    );

    // アニメーションをリピート再生
    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CurvedAnimation Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _curvedAnimation,
          builder: (context, child) {
            return Transform.scale(
              scale: _curvedAnimation.value + 1,  // カーブに基づいてスケールを変更
              child: child,
            );
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

解説

  • AnimationController：アニメーションの進行を管理する基本クラスです。2秒間で0から1まで値を進行させます。
  • CurvedAnimation：AnimationControllerにカーブを適用して、アニメーションの進行を曲線的に変更します。Curves.easeInOutで加速・減速するカーブを設定しています。
  • AnimatedBuilder：アニメーションの値に基づいてウィジェットを再ビルドするためのウィジェットです。Transform.scaleを使って、アニメーションの値に応じて拡大縮小を行います。

Curvesの種類

Flutterでは、カーブの種類としてさまざまなプリセットカーブが用意されています。代表的なものは以下の通りです。

  • Curves.linear：直線的なアニメーション。進行が一定の速度で行われます。
  • Curves.easeIn：アニメーション開始時に加速します。
  • Curves.easeOut：アニメーション終了時に減速します。
  • Curves.easeInOut：開始時に加速し、終了時に減速します（今回使用）。
  • Curves.bounceIn：弾むような動きで開始します。
  • Curves.bounceOut：弾むような動きで終了します。

異なるカーブの適用例

同じアニメーションでも、カーブを変更することで異なる動きを表現できます。例えば、Curves.bounceOutを使用すると、アニメーション終了時に弾むような効果を持たせることができます。

_curvedAnimation = CurvedAnimation(
  parent: _controller,
  curve: Curves.bounceOut,  // 弾むようなカーブ
);

CurvedAnimationのメリット

  1. より自然なアニメーションの実現
    • CurvedAnimationを使うことで、直線的な動きよりも、より自然で視覚的に心地よいアニメーションが実現できます。アプリのユーザー体験を向上させるために、特定のタイミングで加速や減速を取り入れることが可能です。
  2. 多様なアニメーションの作成
    • Flutterにはさまざまなカーブがプリセットされており、それらを組み合わせることで複雑なアニメーションを作成できます。シンプルな加速・減速だけでなく、弾むような動きや、ダイナミックなエフェクトを簡単に取り入れることが可能です。
  3. 簡単な実装
    • CurvedAnimationは非常にシンプルに実装できるため、初心者でも容易に扱えます。AnimationControllerにカーブを適用するだけで、カスタムアニメーションを実現できるのは大きな利点です。

まとめ

CurvedAnimationを使うことで、アプリに自然な加速・減速を加えたアニメーションが実装でき、より魅力的なユーザー体験を提供できます。アニメーションの進行にさまざまなカーブを適用することで、単調な動きから脱却し、複雑でダイナミックな効果を簡単に実現できます。

Flutterでアニメーションを導入する際は、CurvedAnimationを活用して、より洗練された動きを表現してみてください。

]]> https://techgrowup.net/flutter-curved-animation/feed/ 0 Flutter開発入門52 FlutterでAnimationControllerの使い方 https://techgrowup.net/flutter-animation-controller/ https://techgrowup.net/flutter-animation-controller/?noamp=mobile#respond Fri, 18 Oct 2024 04:27:07 +0000 https://techgrowup.net/?p=1975 はじめに

アニメーションは、アプリケーションにインタラクティブ性や視覚的な魅力を加える強力なツールです。Flutterでは、AnimationControllerを使って高度なアニメーションを簡単に作成できます。このチュートリアルでは、AnimationControllerの基本的な使い方を紹介し、シンプルなアニメーションをFlutterで実装する方法を詳しく解説します。

AnimationControllerは、アニメーションの進行状態を管理するために使用され、タイムラインのようにアニメーションを再生・停止・逆再生することが可能です。この記事を読めば、Flutterアプリにアニメーションを加える方法が理解でき、視覚的な要素を強化する手法を身につけることができます。

AnimationControllerとは

AnimationControllerは、Flutterのアニメーションを制御するためのクラスで、アニメーションの進行を管理します。このコントローラーは、指定した期間に渡って0から1までの値を生成し、アニメーションの再生、停止、逆再生、ループなどを制御します。AnimationControllerを使うことで、簡単なアニメーションから複雑なアニメーションまで幅広く作成できます。

主な特徴

  • 制御の自由度：アニメーションの再生、停止、逆再生、リピートなどを自由に制御可能。
  • タイムラインの管理：アニメーションの進行を指定した時間で管理できる。
  • 連携可能：Tweenなどと連携することで、具体的な数値やカラーの変化をアニメーションで表現できる。

AnimationControllerを使ったアニメーションの基本

AnimationControllerのセットアップ

まず、AnimationControllerを使ってシンプルなアニメーションを作成する準備を行います。AnimationControllerは、TickerProviderStateMixinを使用してライフサイクルに合わせて適切に管理します。

基本的なコード例
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimationExample(),
    );
  }
}

class AnimationExample extends StatefulWidget {
  @override
  _AnimationExampleState createState() => _AnimationExampleState();
}

class _AnimationExampleState extends State<AnimationExample> with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,  // TickerProvider
    )..repeat(reverse: true);  // アニメーションの繰り返し
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimationController Example'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Transform.scale(
              scale: _controller.value + 1,  // 値の範囲を1-2にする
              child: child,
            );
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

解説

  • AnimationController：2秒間のアニメーションを設定しています。vsync: thisは、TickerProviderStateMixinを使ってアニメーションのパフォーマンスを最適化しています。
  • repeat(reverse: true)：アニメーションを繰り返し実行し、逆方向にもアニメーションする設定です。
  • AnimatedBuilder：アニメーションの状態に応じてUIを再ビルドします。_controller.valueの値を使用して、四角のサイズが変わるアニメーションを作成しています。
  • Transform.scale：スケール（拡大・縮小）アニメーションを適用し、_controller.valueに基づいてサイズを動的に変更します。

Tweenを使ったアニメーションの強化

次に、Tweenを使って値の範囲を指定することで、アニメーションの動きをさらにカスタマイズする方法を見てみましょう。

Tweenの基本

Tweenを使えば、数値の変化を任意の範囲で制御できます。たとえば、アニメーションの進行に応じて色や位置、サイズなどを変化させることが可能です。

Tweenを使ったサンプルコード

class _AnimationExampleState extends State<AnimationExample> with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    )..repeat(reverse: true);

    _colorAnimation = ColorTween(begin: Colors.blue, end: Colors.red).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Tween Animation Example'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Container(
              width: 100,
              height: 100,
              color: _colorAnimation.value,  // 色をアニメーション
            );
          },
        ),
      ),
    );
  }
}

解説

  • ColorTween：青色から赤色への変化をアニメーションします。beginとendで色の範囲を指定します。
  • _colorAnimation：Tweenによるアニメーションの値を管理します。
  • Containerのcolor：Tweenによってアニメーションされた色を、Containerの色に反映させています。

AnimationControllerを使ったその他の操作

アニメーションの停止・再開

AnimationControllerを使えば、アニメーションの再生や停止も簡単に制御できます。以下のメソッドを使用して、アニメーションをコントロールします。

  • start()：アニメーションを開始する。
  • stop()：アニメーションを一時停止する。
  • reset()：アニメーションの状態をリセットする。
  • forward()：アニメーションを前方向に再生する。
  • reverse()：アニメーションを逆再生する。
FloatingActionButton(
  onPressed: () {
    if (_controller.isAnimating) {
      _controller.stop();
    } else {
      _controller.forward();
    }
  },
  child: Icon(Icons.play_arrow),
)

ループアニメーション

repeat()メソッドを使うことで、アニメーションを無限に繰り返すことができます。また、reverse: trueを指定すれば、逆方向にもアニメーションを実行します。

まとめ

AnimationControllerを使えば、Flutterで高度なアニメーションを簡単に作成できます。今回紹介した基本的なスケーリングアニメーションやTweenによる色の変化は、アプリに動的な要素を加えるための基本的な方法です。

アニメーションは、アプリにインタラクティブなフィードバックを与える強力なツールです。AnimationControllerとTweenを活用して、より洗練されたアニメーションをFlutterアプリに追加してみてください。

]]> https://techgrowup.net/flutter-animation-controller/feed/ 0