[移动开发]Flutter控件：内置隐式自发动画控件TweenAnimationBuilder

TweenAnimationBuilder

目录

1. 概要

2.必传参数

2.1 duration

2.2 tween

2.3 builder

3.选传参数

3.1 key

3.2 curve

3.3 onEnd

3.4 child

1. 概要

TweenAnimationBuilder是内置隐式自发动画控件，主要用于自发执行的动画设计。

TweenAnimationBuilder控件参数如下：

{
	Key? key, 
	required Tween<double> tween,
  	required Duration duration, 
	Curve curve = Curves.linear, 
	required Widget Function(BuildContext, double, Widget?) builder, 
	void Function()? onEnd, 
	Widget? child
}

其中duration、tween和builder为必传参数，剩余为选传参数。

2.必传参数

2.1 duration

TweenAnimationBuilder<dynamic>{ 
    duration: Duration(second: nums) 
}

duration是动画时长参数，在Duration方法中设置动画时长，其时间单位如下：

Duration Duration({
    int days = 0, 
    int hours = 0, 
    int minutes = 0, 
    int seconds = 0, 
    int milliseconds = 0, 
    int microseconds = 0
})

2.2 tween

TweenAnimationBuilder<dynamic>{
    tween: Tween<dynamic>(begin:100, end: 200)
}

tween设置动画的值，即从[begin]变化到[end]。如上述代码所示，动画会从100的位置移动到200。其中，[end]非空，[begin]可空，且[begin]为空时，其值等于[end]。此外， [ColorTween] 可为控件设置颜色值。

2.3 builder

TweenAnimationBuilder<dynamic>{
    builder: (BuildContext context, dynamic value, Widget child){
        return [widget]    
    },
}

builder方法内含上下文context，动画值value和子组件child。动画值value每次改动的值和子控件child会一起传递到builder中，然后builder方法根据动画值value去优化子控件child（即builder方法根据传入得动画数据去使子控件具有动画效果）。

3.选传参数

3.1 key

动画控件的key值，可设置动画唯一标识。

3.2 curve

TweenAnimationBuilder<dynamic>{
    curve: Curves.easeOutBack,
}

curve是动画曲线参数，可设置动画效果，具体样式参考：https://blog.csdn.net/weixin_46181984/article/details/119946620

3.3 onEnd

TweenAnimationBuilder<dynamic>{
    onEnd:(){
        /// 具体执行代码    
    }
}

监听函数，动画完成后执行。

3.4 child

TweenAnimationBuilder<dynamic>{
    child:[widget],
}

与布局控件类似，具有子组件child，但与builder内的child参数不同。