Flutter 開発 - アニメーション コア クラス トゥイーン

Tween は Animatable を継承しており、一般にアニメーションの値の範囲は (0.0,1.0) ですが、移動値、透明度、カラー値、サイズ値などの一部のアニメーションでは、値の範囲が (0.0,1.0) ではありません。まで適用可能。このとき、Tweenを使用して範囲を指定することもできます。コード例:

final Tween tween = Tween(begin:0.0,end:100.0);

Tween クラスにはジェネリック型があるため、double 型である必要はありません。色の変化アニメーションを定義する必要がある場合は、ColorTween を使用してそれを実現できます。コードは次のとおりです。

final Tween colorTween = ColorTween(begin:Colors.red,end:Colors.bule);

アニメーションの実行中に、多くの場合、アニメーションの状態を取得する必要があります。ただし、Tween は状態を保存しないため、アニメーションの値を取得するには、evaluate() メソッドを呼び出す必要があります。Tween は、コントローラー オブジェクトを渡すための animate() も提供します。以下は、Tween を使用して実装されたズームイン -> ズームアウトの無限ループのアニメーションです。

import 'package:flutter/material.dart';

class TweenPage extends StatefulWidget {
    
    
  final String title;
  const TweenPage({
    
    Key? key, required this.title}) : super(key: key);

  @override
  State<TweenPage> createState() => _TweenPageState();
}

class _TweenPageState extends State<TweenPage>
    with SingleTickerProviderStateMixin {
    
    
  Animation<double>? _animation;
  AnimationController? _animationController;

  @override
  void initState() {
    
    
    super.initState();
    _animationController =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
    _animation = Tween(begin: 0.0, end: 200.0).animate(_animationController!)
      ..addStatusListener((status) {
    
    
        if (status == AnimationStatus.completed) {
    
    
          _animationController!.reverse();
        } else if (status == AnimationStatus.dismissed) {
    
    
          _animationController!.forward();
        }
      })
      ..addListener(() {
    
    
        setState(() {
    
    });
      });
    _animationController!.forward();
  }

  @override
  void dispose() {
    
    
    _animationController!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SizedBox(
          height: _animation!.value,
          width: _animation!.value,
          child: const FlutterLogo(),
        ),
      ),
    );
  }
}

上記のアニメーションは線形ですが、非線形アニメーションは Curve クラスで実装できます。
まず、補間器を作成する必要があります。コードは次のとおりです。

CurvedAnimation curvedAnimation = CurvedAnimation(parent:controller,curve:Curves.easeInOut);

CurvedAnimation とAnimationController は両方とも、Animation クラスに属します。また、CurvedAnimation パッケージ化を通じて、Curves を Tween.animate() メソッドに設定して、モーション カーブを設定する目的を達成できます。コード例:

import 'package:flutter/material.dart';

class FreeFallPage extends StatefulWidget {
    
    
  final String title;
  const FreeFallPage({
    
    Key? key, required this.title}) : super(key: key);

  @override
  State<FreeFallPage> createState() => _FreeFallPageState();
}

class _FreeFallPageState extends State<FreeFallPage>
    with SingleTickerProviderStateMixin {
    
    
  Animation<double>? _animation;
  AnimationController? _animationController;

  @override
  void initState() {
    
    
    super.initState();
    _animationController =
        AnimationController(duration: const Duration(seconds: 5), vsync: this);
    CurvedAnimation curvedAnimation =
        CurvedAnimation(parent: _animationController!, curve: Curves.bounceOut);
    _animation = Tween(begin: 0.0, end: 600.0).animate(curvedAnimation)
      ..addListener(() {
    
    
        setState(() {
    
    });
      });
    _animationController!.forward();
  }

  @override
  void dispose() {
    
    
    _animationController!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          Positioned(
              left: MediaQuery.of(context).size.width / 2,
              top: _animation!.value,
              child: Container(
                margin: const EdgeInsets.only(right: 10.0),
                width: 20.0,
                height: 20.0,
                decoration: const BoxDecoration(
                    color: Colors.blue, shape: BoxShape.rectangle),
              ))
        ],
      ),
    );
  }
}