📘
Flutter アニメーション：Tween / CurvedAnimation / CurveTween / FadeTransition

2025/08/15に公開
Flutter では Tween、CurvedAnimation、FadeTransition、SlideTransition などを組み合わせることで簡単にアニメーションを作れます。

この記事では、各 Widget・クラスの役割と主要な引数を整理し、コピペで動かせるサンプルコードを紹介します。

 Tween役割

開始値から終了値まで補間(変化)させるためのクラス。
例えばTween<double>(begin:0,end:1)の場合、0.0 -> 1.0へ徐々に変化します。
主な引数

begin: アニメーションの開始値

end: アニメーションの終了値

 CurvedAnimation役割

線形(リニア)ではなく、加速・原則などの動きに曲線的な変化をつけるためのラッパー
主な引数

parent:AnimationControllerを渡す

curve:Curves.easeIn,Curves.easeOutなどカーブタイプ

reverseCurve:逆再生時のカーブ

 CurveTween役割

Tweenと似ていますが、Curveを組み合わせるだけに特化したクラス。

Tweenにanimate()するときに、..chain(CurveTween(curve: Curves.easeIn))のように使用する。
主な引数

curve:Curveを指定する

 FadeTransition役割
Widget の透明度をアニメーションさせる。
主な引数

opacity : Animation<double> を渡す（0.0 完全透明〜1.0 不透明）

child : フェードさせたい Widget

 SlideTransition役割
Widget を位置（オフセット）でアニメーションさせる。
主な引数

position : Animation<Offset> を渡す（例: Offset(0, 1) → 下から上へ）

child : スライドさせたい Widget

 サンプルコードimport 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: AnimationExample(),
    );
  }
}

class AnimationExample extends StatefulWidget {
  const AnimationExample({super.key});

  @override
  State<AnimationExample> createState() => _AnimationExampleState();
}

class _AnimationExampleState extends State<AnimationExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _fadeAnimation;
  late Animation<Offset> _slideAnimation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    // Fade用 (0.0 → 1.0)
    _fadeAnimation = Tween(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeIn),
    );

    // Slide用 (下から上へ)
    _slideAnimation = Tween(begin: const Offset(0, 1), end: Offset.zero).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeOut),
    );

    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Fade + Slide Animation")),
      body: Center(
        child: FadeTransition(
          opacity: _fadeAnimation,
          child: SlideTransition(
            position: _slideAnimation,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: const Center(
                child: Text(
                  "Hello!",
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
Tween

CurvedAnimation

CurveTween

FadeTransition

SlideTransition

サンプルコード

Discussion
