モバイルアプリのUI/UXにおいて、アニメーションはユーザー体験を大きく向上させる重要な要素です。特にアイコンのアニメーションは、ユーザーの操作に対する視覚的なフィードバックを提供し、アプリの洗練度を高めてくれます。しかし、Flutterでクオリティの高いアイコンアニメーションを実装するのは、意外と手間がかかるものです。
- 自前でアニメーションを実装すると複雑で時間がかかる
- 既存のアニメーションはカスタマイズ性に欠ける
- プラットフォーム間の一貫性を保つのが難しい
こうした課題を解決してくれるのが、今回紹介する「rive_animated_icon」です。
rive_animated_iconとは？
rive_animated_icon は、Riveのパワフルなアニメーション機能を活用した、美しくインタラクティブなアイコンをFlutterアプリに簡単に組み込めるパッケージです。
主な特徴：
- 高品質なプリセットアニメーションアイコンのコレクション
- シンプルなAPIでの実装
- 状態変化に応じたスムーズなアニメーション
- カスタムRiveアニメーションの使用も可能
- 軽量かつパフォーマンスに優れた実装
このパッケージを使えば、ボタンやナビゲーションバー、インタラクションポイントなど、アプリのさまざまな箇所で魅力的なアニメーションアイコンを簡単に導入できます。
インストール方法
まずは pubspec.yaml に依存関係を追加します。
dependencies:
rive_animated_icon: ^1.0.2 # 最新版は pub.dev を確認
rive: ^0.11.0 # Riveエンジンの依存関係
その後、ターミナルで依存関係を取得します：
flutter pub get
基本的な使い方
1. シンプルなアニメーションアイコンの表示
import 'package:flutter/material.dart';
import 'package:rive_animated_icon/rive_animated_icon.dart';
class AnimatedIconDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Riveアニメーションアイコン')),
body: Center(
child: RiveAnimatedIcon.menu_arrow(
size: 50,
// デフォルトでは非アクティブ状態で表示
),
),
);
}
}
これだけで、Riveで作成された美しいメニューアイコンが表示されます。
2. インタラクティブなアイコンの実装
アイコンの状態を切り替えることで、アニメーションを再生できます：
class InteractiveIconDemo extends StatefulWidget {
@override
_InteractiveIconDemoState createState() => _InteractiveIconDemoState();
}
class _InteractiveIconDemoState extends State<InteractiveIconDemo> {
bool _isActive = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('インタラクティブアイコン')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RiveAnimatedIcon.play_pause(
size: 80,
// アクティブ状態を切り替え
isActive: _isActive,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
setState(() {
_isActive = !_isActive;
});
},
child: Text(_isActive ? '停止' : '再生'),
),
],
),
),
);
}
}
ボタンを押すたびに、再生アイコンと停止アイコンがスムーズに切り替わります。
3. 利用可能なプリセットアイコン
rive_animated_iconには、様々なプリセットアイコンが用意されています：
// メニュー⇔戻るアイコン
RiveAnimatedIcon.menu_arrow(size: 50, isActive: isActive)
// 再生⇔一時停止
RiveAnimatedIcon.play_pause(size: 50, isActive: isActive)
// ハンバーガーメニュー⇔閉じる
RiveAnimatedIcon.menu_close(size: 50, isActive: isActive)
// 追加⇔閉じる
RiveAnimatedIcon.add_close(size: 50, isActive: isActive)
// チェックマーク⇔閉じる
RiveAnimatedIcon.check_close(size: 50, isActive: isActive)
// お気に入り⇔お気に入り解除
RiveAnimatedIcon.favorite(size: 50, isActive: isActive)
// 表示⇔非表示
RiveAnimatedIcon.visibility(size: 50, isActive: isActive)
// 検索⇔閉じる
RiveAnimatedIcon.search_close(size: 50, isActive: isActive)
// 通知オン⇔オフ
RiveAnimatedIcon.notification(size: 50, isActive: isActive)
高度な使い方
カスタムRiveファイルを使用する
独自にデザインしたRiveアニメーションを使用することも可能です：
RiveAnimatedIcon(
riveFileName: 'assets/animations/my_custom_icon.riv',
riveStateMachineName: 'State Machine 1',
activeTrigger: 'active',
inactiveTrigger: 'inactive',
size: 60,
isActive: _isActive,
)
このためには、自作のRiveアニメーションファイルをアセットとして追加し、pubspec.yamlに定義する必要があります：
flutter:
assets:
- assets/animations/my_custom_icon.riv
アニメーション完了のコールバック
アニメーション完了時に処理を行いたい場合は、コールバックを設定できます：
RiveAnimatedIcon.menu_close(
size: 60,
isActive: _isActive,
onActivationComplete: () {
print('メニューが開きました');
// 何か処理を実行
},
onDeactivationComplete: () {
print('メニューが閉じました');
// 何か処理を実行
},
)
アニメーション速度の調整
アニメーション速度をカスタマイズすることも可能です：
RiveAnimatedIcon.favorite(
size: 60,
isActive: _isActive,
animationSpeed: 1.5, // 標準の1.5倍速で再生
)
実装例：ボトムナビゲーションバーのアニメーションアイコン
アプリのボトムナビゲーションバーにRiveアニメーションアイコンを実装する例を見てみましょう：
class AnimatedNavBarDemo extends StatefulWidget {
@override
_AnimatedNavBarDemoState createState() => _AnimatedNavBarDemoState();
}
class _AnimatedNavBarDemoState extends State<AnimatedNavBarDemo> {
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('アニメーションナビゲーションバー')),
body: Center(
child: Text('選択中: $_selectedIndex', style: TextStyle(fontSize: 24)),
),
bottomNavigationBar: Container(
height: 80,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 4,
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildNavItem(0, RiveAnimatedIcon.home(
size: 32,
isActive: _selectedIndex == 0,
)),
_buildNavItem(1, RiveAnimatedIcon.search_close(
size: 32,
isActive: _selectedIndex == 1,
)),
_buildNavItem(2, RiveAnimatedIcon.notification(
size: 32,
isActive: _selectedIndex == 2,
)),
_buildNavItem(3, RiveAnimatedIcon.favorite(
size: 32,
isActive: _selectedIndex == 3,
)),
],
),
),
);
}
Widget _buildNavItem(int index, Widget icon) {
return GestureDetector(
onTap: () {
setState(() {
_selectedIndex = index;
});
},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: _selectedIndex == index ? Colors.blue.withOpacity(0.1) : Colors.transparent,
borderRadius: BorderRadius.circular(16),
),
child: icon,
),
);
}
}
カスタムアイコンの作成ガイド
独自のRiveアニメーションアイコンを作成する手順も簡単です：
- Riveでアカウントを作成（無料プランあり）
- 新規ファイルを作成し、アイコンをデザイン
- ステートマシンを追加し、アクティブ/非アクティブ状態のトリガーを設定
- アニメーションをエクスポートして、プロジェクトの
assetsフォルダに配置 pubspec.yamlにアセットを登録- カスタムアイコンとして使用
パフォーマンスのヒント
- アイコンのサイズが大きすぎないように注意（50〜60pxが適切）
- 必要なアイコンだけを読み込み、不要なものはプリロードしない
- アニメーション完了後のコールバックで重い処理を行わない
- 同時に多数のアイコンをアニメーションさせないよう注意
まとめ
rive_animated_iconは、Flutterアプリにプロフェッショナルなアニメーションアイコンを簡単に導入できるパッケージです。
このパッケージが特に役立つケース：
- アプリのナビゲーション要素に視覚的なフィードバックを追加したい
- 状態変化をユーザーに直感的に伝えたい
- アプリの洗練度とブランド価値を高めたい
- デザイナーが作成したRiveアニメーションを効率的に実装したい
美しいアニメーションでユーザー体験を向上させ、アプリの魅力を高めたいなら、ぜひrive_animated_iconを試してみてください。わずか数行のコードで、プロフェッショナルなアニメーション効果をアプリに取り入れることができます。
