flutter-TweenAnimationBuilder补间动画,(缩放、旋转、平移)
flutter-TweenAnimationBuilder补间动画,(缩放、旋转、平移)
·
TweenAnimationBuilder里需要三个参数:
duration:表示动画时间;
tween:表示动画值;
builder:有三个参数第一个是BuildContext,第二个是value用于接收上面两个参数定义的动画时间与动画值(类型取决于自己要做动画的数据类型),第三个是TweenAnimationBuilder的子组件,用于优化;
把tween最大值加到50;点击程序热重载;
会发现字体是从30开始到50,而不是从50开始;
这是因为这个begin的值只是在程序刚开始执行时有用到;
探索Transform三个构造函数:缩放、旋转、平移;
缩放:Transform.scale:
效果:
代码:
Scaffold(
body: Center(
child: TweenAnimationBuilder(
duration: Duration(seconds: 1),
tween: Tween(begin: 1.0,end: 1.0),
///将动画时间与补间动画值传递给value
builder: (BuildContext context, double value, Widget? child) {
return Container(
width: 250,
height: 250,
color: Colors.green,
child: Center(
///这是一个缩放动画
child: Transform.scale(
///调用value
scale: value,
child: Text(
"flutter",
style: TextStyle(
fontSize: 40
),
),
),
),
);
},
),
),
);
旋转:Transform.rotate
旋转是已π为单位;3.14等于半圈,6.28等于一圈;
效果:
代码:
Scaffold(
body: Center(
child: TweenAnimationBuilder(
duration: Duration(seconds: 1),
tween: Tween(begin: 0.0,end: 6.28),
///将动画时间与补间动画值传递给value
builder: (BuildContext context, double value, Widget? child) {
return Container(
width: 250,
height: 250,
color: Colors.green,
child: Center(
///这是一个旋转动画
child: Transform.rotate(
///调用value
angle: value,
child: Text(
"flutter",
style: TextStyle(
fontSize: 40
),
),
),
),
);
},
),
),
);
平移:Transform.translate
以坐标为单位x、y
效果:
代码:
Scaffold(
body: Center(
child: TweenAnimationBuilder(
duration: Duration(seconds: 1),
tween: Tween(begin: -30.0,end: -30.0),
///将动画时间与补间动画值传递给value
builder: (BuildContext context, double? value, Widget? child) {
return Container(
width: 250,
height: 250,
color: Colors.green,
child: Center(
///这是一个旋转动画
child: Transform.translate(
///调用value
offset: Offset(value!,value),
child: Text(
"flutter",
style: TextStyle(
fontSize: 40
),
),
),
),
);
},
),
),
);
更多推荐
所有评论(0)