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を活用して、より洗練された動きを表現してみてください。