⭐

Flutterでクルクル回るアニメーションを作る

2023/06/27に公開

Flutter

tech

概要

Flutterでアニメーション機能を使ってみたいなと思い、星のiconがクルクル回る機能を作ってみました。

記事の対象者
- Flutterで回転するアニメーションのやり方を知りたい人
- AI任せに書いて分からない人

こちらがデモ

以下に、Flutterで星がクルクル回るアニメーションを作成するためのサンプルコードを提供します。ここでは、Transform.rotateとAnimatedBuilderを使用してアニメーションを作成します。

以下のコードは、星のアイコンを回転させるアニメーションを作成します。AnimationControllerを使用してアニメーションの持続時間と範囲を定義し、AnimatedBuilderを使用してアニメーションの値が変化するたびにウィジェットを再描画します。

サンプルコード

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: const Center(
          child: RotatingStar(),
        ),
      ),
    );
  }
}

class RotatingStar extends StatefulWidget {
  const RotatingStar({Key? key}) : super(key: key);

  @override
  _RotatingStarState createState() => _RotatingStarState();
}

class _RotatingStarState extends State<RotatingStar>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    )..repeat();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (_, child) {
        return Transform.rotate(
          angle: _controller.value * 2 * 3.14,
          child: child,
        );
      },
      child: const Icon(
        Icons.star,
        size: 100,
      ),
    );
  }
}

Flutter公式のウイルスのアイコンが回転するものも作ってみました。こちらのサイトに使用したマテリアルアイコンのデザインが紹介されております。

Icon Name
coronavirus — material icon named "coronavirus".

上のアイコンを取り替えただけ!

Icon(
      Icons.coronavirus,
      color: Colors.green,
      size: 100.0,
    ),

実行結果

回転するアニメーションを作る方法

私も真似して作ってるので、数学の知識入りそうなアニメーションは分かりませんが、Flutter公式のルールに従えば「回転するアニメーション」は作れます。

手順

RotatingCoronavirusというStatefulWidgetを継承したクラスを作ります。Stateクラスの方（クラスの中にあるクラス）にwith(mixin)を使用して、SingleTickerProviderStateMixinを多重継承させます。これがないと作れない。

class RotatingCoronavirus extends StatefulWidget {
  const RotatingCoronavirus({super.key});

  @override
  State<RotatingCoronavirus> createState() => _RotatingCoronavirusState();
}

class _RotatingCoronavirusState extends State<RotatingCoronavirus> with SingleTickerProviderStateMixin {

初期化されていないAnimationControllerを定義する。

class _RotatingCoronavirusState extends State<RotatingCoronavirus> with SingleTickerProviderStateMixin {
  // ここに定義する。
  late final AnimationController _controller;

initStateの{}の中に、Widgetが呼び出された時に実行する。AnimationControllerの設定を記述します。vsync thisですがこれは何を参照してるのかというと、上に書いたwith SingleTickerProviderStateMixinです。公式にも解説があった。

durationは実行時間ですね。何秒か指定してます。

AnimationControllerは使用した後は破棄しないとメモリリークの原因になるの破棄する必要があります。disposeの中にAnimationControllerを破棄する設定をしましょう。

@override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

UIにアニメーションを描画するには、AnimatedBuilderを使用します。書き方が決まってるのでそのまま書いて回転する設定を後に追加します。Transform.rotateを記述してangleプロパティに内部実装の解説によると、「引数 angle には、時計回りのラジアン単位で回転角を指定します。」を設定。_controller.value * 2.0 * 3.1415926535897932を追加。　2.0のところを変更すると書いてするスピードが速くなります。angle: _controller.value * 6.0 * 3.1415926535897932,と修正するとクルクル回るスピードが速くなった(^_^;)

 @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(animation: _controller, builder: (_, child) {
      return Transform.rotate(
        angle: _controller.value * 2.0 * 3.1415926535897932,
        child: child,
      );
    }, child: Icon(
      Icons.coronavirus,
      color: Colors.green,
      size: 100.0,
    ),
    );
  }

まとめ

Flutterで回転するアニメーションを作りたいときは、AnimationControllerを定義して、AnimatedBuilderの中に、Transform.rotateを追加して回転するスピードとIconなどのWidgetを記述すると、クルクル回る星やウイルスが作れます。

AIに任せた方が簡単なのですが、分からずに使ってるとよくないですし上からソースコード読んで何度か作れば回転のアニメーションぐらいなら理解できると思うので練習してみてください。

概要

回転するアニメーションを作る方法

まとめ

Discussion