animated_text_kitでテキストアニメーションを実現してみた

2025 7/04

2025.07.04

こんにちは、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セット終わったあとに次のループまでの待機時間を設定します。

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

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

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

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