在Flutter中,可以使用Tween动画和AnimationController来创建不同持续时间的动画。下面是一个示例代码,演示了如何使用Tween动画和AnimationController来创建不同持续时间的动画。
import 'package:flutter/material.dart';
class CustomAnimationExample extends StatefulWidget {
@override
_CustomAnimationExampleState createState() => _CustomAnimationExampleState();
}
class _CustomAnimationExampleState extends State
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animation1;
Animation _animation2;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds: 2), // 设置总体动画持续时间为2秒
vsync: this,
);
_animation1 = Tween(begin: 0, end: 1).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(0, 0.5), // 从0到0.5的动画持续时间为1秒
),
);
_animation2 = Tween(begin: 0, end: 1).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(0.5, 1), // 从0.5到1的动画持续时间为1秒
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Custom Animation Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedBuilder(
animation: _animation1,
builder: (context, child) {
return Opacity(
opacity: _animation1.value,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
);
},
),
SizedBox(height: 20),
AnimatedBuilder(
animation: _animation2,
builder: (context, child) {
return Opacity(
opacity: _animation2.value,
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
);
},
),
SizedBox(height: 20),
RaisedButton(
child: Text('Start Animation'),
onPressed: () {
_controller.reset();
_controller.forward();
},
),
],
),
),
);
}
}
void main() {
runApp(MaterialApp(
home: CustomAnimationExample(),
));
}
在上面的示例中,我们使用AnimationController来控制整体动画的持续时间为2秒。然后,我们使用Tween动画和CurvedAnimation来创建两个不同持续时间的动画。第一个动画的持续时间为1秒,从0到0.5秒;第二个动画的持续时间也为1秒,从0.5秒到1秒。
在build方法中,我们使用AnimatedBuilder来构建动画的UI。通过监听_animation1和_animation2,我们可以在动画值发生变化时更新UI。在这个示例中,我们使用Opacity小部件来改变容器的透明度,创建一个淡入淡出的动画效果。
最后,在按下按钮时,我们通过调用_controller的reset和forward方法来启动动画。