こんにちは、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 | ランダムに点滅して登場 | ホラー・ハッカー・緊急感を演出したい場合 |
まとめ
テキストアニメーションは、小さいながらもUI体験を大きく左右する要素です。
animated_text_kit
を使えば、シンプルなコードで「意味のある演出」を加えることができます。
今回は Typewriter
によるAI風生成表現を中心に、各アニメーションの活用シーンをまとめました。
目的に応じた最適なアニメーションを選んで、あなたのFlutterアプリにさらなる魅力を加えてみてください!