📺
【Flutter】アニメーション付きチェックマーク試作品
※自分用メモ:Notionで過去に書いたもの
こんにちは、laughtaoneです。
Flutter学習中に備忘録として書いていますので、正確な情報でない可能性もありますのでご了承ください。
前提
ゲームの完了画面を作っていた際に、チェックマークにアニメーションをつけたいと思って作ったものです。
完成イメージ
コード
import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: CompleteScreen(),
),
));
}
class CompleteScreen extends StatefulWidget {
_CompleteScreenState createState() => _CompleteScreenState();
}
class _CompleteScreenState extends State<CompleteScreen> with TickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _rotationAnimation;
late Animation<double> _scaleAnimation;
void initState() {
super.initState();
// --------------------------- アニメーション ---------------------------
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1000), // アニメーションの時間
);
// 回転アニメーション
_rotationAnimation = Tween<double>(begin: 0.0, end: 2 * 3.14159).animate(
CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
);
// 拡大アニメーション
_scaleAnimation = Tween<double>(begin: 0.1, end: 2).animate(
CurvedAnimation(parent: _controller, curve: Curves.easeOut),
);
// アニメーションを開始
_controller.forward();
// -------------------------------------------------------------------
}
void dispose() {
_controller.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Transform.rotate(
angle: _rotationAnimation.value, // 回転
child: Transform.scale(
scale: _scaleAnimation.value, // 拡大
child: Icon(
Icons.check,
size: 100,
color: Colors.blue,
),
),
);
},
),
),
);
}
}
// ---- アニメーション ----
の AnimationController
の duration
で指定している milliseconds
の値で、アニメーションの時間を調節することができます。
注意点として、この値は「ミリ秒」なので、通常の「秒」に×1000をした値を指定してください。
また、milliseconds
ではなく seconds
とすることで「秒」のまま値を指定することもできますが、この場合、?.?秒のような小数ではなく、整数しか使えないので、「ミリ秒」で指定するのが無難だと思います。
まとめ
これが、アニメーション付きチェックマークの試作品です。
Discussion