🐝

【Flutter/Dart】Animation

2022/04/29に公開約2,800字

概要

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

Animation系Widget

Animation系Widgetについて

https://www.youtube.com/watch?v=LKKgYpC-EPQ

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: ...
)

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

AnimatedBuilder

AnimatedBuilderについて

https://www.youtube.com/watch?v=N-RiyZlv8v8

https://docs.flutter.dev/development/ui/animations/tutorial
main.dart
import 'package:flutter/material.dart';

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

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

  
  _LogoAppState createState() => _LogoAppState();
}

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

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

// これで昔はうまく回転していた。
  
  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,
	    ),
	  ),
    );
  }
  
  // 今はうまくい回転しないのでこっちがいいだろう。
  
  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をやってみて

https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html

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

そのほかのAnimationについて

https://lottiefiles.com/

https://pub.dev/packages/lottie

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

以上!!!!!

Discussion

ログインするとコメントできます