🐝

【Flutter/Dart】Animation

2022/04/29に公開

Flutter

概要

今回はアニメーション系のWidgetについてまとめていこうと思う

Animation系Widget

Animation系Widgetについて

Animation系のWidgetはざっと書いてもこんなにある.

AnimatedAlign
AnimatedContainer
AnimatedDefaultTextStyle
AnimatedOpacity
AnimatedPadding
AnimatedPhysicalModel
AnimatedPositioned
AnimatedPositionedDirectional
AnimatedTheme
and more...

使い方

今回はAnimatedContainerを見本に見ていきます。

AnimatedContainer(
  duration: const Duration(milliseconds: 1500), //Widgetのアニメーションが完了するまでの時間を指定
  curve: Curve.bounceIn　//アニメーションをどんなモーションにするかを指定
  child: ...
)

基本的には、duration、curveでアニメーションをどうするか指定し、あとは通常のContainerと同じようにすれば簡単にアニメーションを表現できます😀

AnimatedBuilder

AnimatedBuilderについて

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const LogoApp());

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

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

class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
late Animation<double> animation;
late AnimationController controller;

  @override
  void initState() {
    super.initState();
    // 画面描画前にAnimationControllerを設定。
    controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      reverseDuration: const Duration(milliseconds: 500),
      vsync: this,
      value: 0,
    );
  }
  
  @override
  void dispose() {
  　　　// ゴミタスクが残らないように必ずdisposeが必要。
    _controller.dispose();
    super.dispose();
  }

// これで昔はうまく回転していた。
  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
	    animation: _controller,
	    builder: (_, Widget? _child) {
	      return Transform.rotate(
		angle: _controller.value > 0 ? 0 : -pi,
		child: _child,
	      );
	    },
	    child: const Icon(
	      Icons.arrow_upward,
	    ),
	  ),
    );
  }
  
  // 今はうまくい回転しないのでこっちがいいだろう。
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RotationTransition(
            turns: _controller.value > 0
                ? Tween(begin: 0.5, end: 0.0).animate(_controller)
                : Tween(begin: -0.5, end: -1.0).animate(_controller),
            child: const Icon(
              Icons.arrow_upward,
            ),
          ),
    );
  }
}

AnimatedBuilderをやってみて

サイトもメンテされていないところを見ると、新しいflutterのバージョンではサポートされていないのかもしれません😅

そのほかのAnimationについて

https://lottiefiles.com/

https://pub.dev/packages/lottie

ローディング画面とかスプラッシュスクリーン、チュートリアルページなどはlottieを使うのもアリかもしれない。

以上！！！！！