📺

【Flutter】アニメーション付きチェックマーク試作品

2025/01/20に公開

※自分用メモ: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,
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

// ---- アニメーション ----AnimationControllerduration で指定している milliseconds の値で、アニメーションの時間を調節することができます。

注意点として、この値は「ミリ秒」なので、通常の「秒」に×1000をした値を指定してください。

また、milliseconds ではなく seconds とすることで「秒」のまま値を指定することもできますが、この場合、?.?秒のような小数ではなく、整数しか使えないので、「ミリ秒」で指定するのが無難だと思います。

まとめ

これが、アニメーション付きチェックマークの試作品です。

Discussion