こんにちは、PentagonでFlutterアプリ開発を担当している川崎です。

チャットUIやローディング画面など、ちょっとしたテキストアニメーションでUIがグッと印象的になる場面ってありますよね。

今回は、Flutter向けの人気パッケージanimated_text_kit を使って、AI風ローディング表現を作ってみた経験をベースに、各種アニメーションの特徴と効果的な使いどころを紹介します。

【こんな人に読んでほしい】

  • チャットUIや読み込み中のUIをもう少し「映える」ものにしたい
  • animated_text_kitが気になっているが、どれを使うか迷っている
  • 軽量かつシンプルにできるアニメーション手段を探している

【この記事を読むメリット】

  • Typewriterを活用した「AIが喋っている感」の演出方法
  • 全9種類のアニメーションの使いどころと特徴を簡潔に把握できる
  • どの表現がどんな場面に適しているかを整理して選択できる

【結論】 animated_text_kitは、わずかなコードで強い印象を与えるアニメーションを実現できる便利なパッケージです。

【この記事の前提】 使用環境：Flutter 3.27.3 + animated_text_kit: ^4.2.3

チャットボットUIにおけるローディング演出を想定

表示文字列は動的に変わる想定

※この記事は、筆者の実際の開発体験をもとに一部生成AIで執筆しております。

animated_text_kitの実装例(Typewriter)

AnimatedTextKit(
  animatedTexts: [
    TypewriterAnimatedText(
      'AI is generating a response...',
      textStyle: const TextStyle(fontSize: 20),
      speed: const Duration(milliseconds: 80),
    ),
  ],
  repeatForever: true,
  pause: const Duration(milliseconds: 500),
);

実装例の結果↓

このコードのプロパティ解説

animatedTexts

表示するアニメーション付きテキストのリスト。ここでは TypewriterAnimatedText を使って、文字が1文字ずつ打たれていくような演出を行っています。

speed

1文字ずつ表示される間隔を表します。Duration(milliseconds: 80) は比較的ゆっくりめのタイプ速度です。

repeatForever

アニメーションを無限に繰り返します。常時ループ再生させたい場面に使用します。

pause

アニメーションが1セット終わったあとに次のループまでの待機時間を設定します。

その他によく使われるプロパティ一覧

プロパティ名型説明
totalRepeatCountint指定した回数だけアニメーションを繰り返します。repeatForeverとの併用不可。
isRepeatingAnimationbooltrue で繰り返し再生。totalRepeatCount が指定されていない場合の代替手段。
displayFullTextOnTapboolユーザーがタップしたときに、アニメーションをスキップして全テキストを即表示します。
stopPauseOnTapboolタップ時にpauseをスキップして、すぐ次のアニメーションへ進みます。
onTapVoidCallback?アニメーション全体がタップされたときに呼ばれるコールバック関数です。

各アニメーションの特徴と使いどころまとめ

アニメーション概要効果的な場面
Rotateテキストが切り替わりながら回転複数ワードをテンポ良く見せたい場合（例: スローガンやタグ）
Fadeフェードイン・アウトで切り替え落ち着いた雰囲気でのメッセージ提示、ナビゲーション案内
Typer打ち込み風、Typewriterより早め軽快なチャット演出やブログ風演出に
TypewriterゆっくりタイプしていくAI・SF・ナレーション感を出したい場合に最適
Scaleテキストが拡大・縮小しながら登場見出しやCTA（Call to Action）などの強調に
Colorizeグラデーションがアニメーション派手で目立つ見出しやロゴに（少しレトロ）
TextLiquidFillテキスト内に波が流れるロゴ的演出、起動画面でのアイキャッチにおすすめ
Wavy波打つように1文字ずつ動く楽しい印象、子ども向け・カジュアルUIに最適
Flickerランダムに点滅して登場ホラー・ハッカー・緊急感を演出したい場合

まとめ

テキストアニメーションは、小さいながらもUI体験を大きく左右する要素です。

animated_text_kit を使えば、シンプルなコードで「意味のある演出」を加えることができます。

今回は Typewriter によるAI風生成表現を中心に、各アニメーションの活用シーンをまとめました。

目的に応じた最適なアニメーションを選んで、あなたのFlutterアプリにさらなる魅力を加えてみてください！