Tween

AnimationController对象值的范围是[0.0，1.0]。如果我们需要构建UI的动画值在不同的范围或不同的数据类型，则可以使用Tween来添加映射以生成不同的范围或数据类型的值。

Tween是一个无状态的对象，它只包含begin和end值。

构造函数：

Tween({
    this.begin,//可以为负值
    this.end,
  });

Tween生成[680.0，400.0]的值：

final Tween doubleTween = Tween<double>(begin: 680.0, end: 400.0);

根据上一章我们个球弹跳创建一个 Tween 动画，使用 Tween 对象，需要调用其animate()方法，然后传入一个控制器对象。

···
 _animation = Tween<double>(begin:600 ,end: 400).animate(curvedAnimation);
···

使用Tween来实现一个动画方法效果

`Tween`的类型

Tween有很多不同类型的实现，它们都继承自Animatable。

AlignmentGeometryTween
AlignmentTween

Tween<AlignmentGeometry>(
begin: Alignment.bottomLeft,
end: Alignment.topRight
)

BorderRadiusTween
BorderTween
BoxConstraintsTween
ColorTween

ColorTween(begin: Colors.transparent, end: Colors.black54);

例子：ColorTween实现颜色过渡动画效果

import 'package:flutter/material.dart';
class TweenPage extends StatefulWidget {
  const TweenPage({Key? key}) : super(key: key);
  @override
  State<TweenPage> createState() => _TweenPageState();
}
class _TweenPageState extends State<TweenPage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation  _animation;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //创建动画控制器
    _controller =  AnimationController(
      duration: const Duration(seconds: 5),
      vsync: this
    );
    _controller.addListener(() {
      //监听插值变化
      setState(() {
        print(_animation.value);
      });
    });
    //添加动画状态监听
    _controller.addStatusListener((status) {
      //获取动画执行状态
      AnimationStatus status = _controller.status;
      //动画正向执行完成状态
      if(status == AnimationStatus.completed){
        //反向开启动画
        _controller.reverse();
      }else if(status == AnimationStatus.dismissed){
        //动画反向执行完成时，正向开始执行动画
        _controller.forward();
      }
    });
    //颜色动画变化
    _animation = ColorTween(begin: Colors.green,end:Colors.blue).animate(_controller);
    Future.delayed(Duration.zero,(){
      _controller.forward();
    });

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ColorTween'),),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          color: _animation.value,
        ),
      ),
    );
  }
}

效果：

ConstantTween
DecorationTween

DecorationTween(
      // beginning values (color, shape, boxShadow, border)
      begin: BoxDecoration(
          color: Colors.yellow,
          shape: BoxShape.circle,
          boxShadow: const [
            BoxShadow(offset: Offset(0, 0), blurRadius: 30, spreadRadius: 0)
          ],
          border: Border.all(width: 10, color: Colors.orange)),
      // ending values
      end: BoxDecoration(
          color: Colors.purple,
          shape: BoxShape.circle,
          boxShadow: const [
            BoxShadow(offset: Offset(20, 20), blurRadius: 30, spreadRadius: 0)
          ],
          border: Border.all(width: 50, color: Colors.red)));

EdgeInsetsGeometryTween
EdgeInsetsTween
FractionalOffsetTween
IntTween

IntTween(begin: 0, end: 255)

MaterialPointArcTween
Matrix4TweenRectTween
RelativeRectTween \RectTween

RelativeRectTween(
  begin: const RelativeRect.fromLTRB(100.0, 100.0, 100.0, 100.0),
  end:const RelativeRect.fromLTRB(20.0, 20.0, 20.0, 20.0)
);

ReverseTween
ShapeBorderTween
SizeTween

SizeTween(begin: const Size(20,20),end: const Size(30,30)).animate(controller);

StepTween
TextStyleTween

TextStyleTween(
  begin: const TextStyle(fontSize: 50,color: Colors.blue,fontWeight: FontWeight.w800),
  end: const TextStyle(fontSize: 50,color: Colors.red,fontWeight: FontWeight.w100)
);

ThemeDataTween

flutter3.0学习笔记

Tween

Tween

Tween的类型

`Tween`的类型