はじめに

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

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

Heroアニメーションとは
1. 主な特徴
Heroアニメーションの基本的な使い方
1. Heroアニメーションのセットアップ
Heroアニメーションの詳細設定
1. カスタムアニメーション
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アニメーションのメリット

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