Flutter的Animation中Interval的用法
2020-09-14 本文已影响0人
讠纟纟
class _MyHomePageState1 extends State with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animationSize;
Animation<Color> _animationColor;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: Duration(milliseconds: 3000));
_controller.addListener(() {
setState(() {});
});
_animationSize = Tween(begin: 50.0, end: 100.0).animate(
CurvedAnimation(parent: _controller, curve: Interval(0.0, 0.5)));
//动画执行范围[0.0~1.0]
//Interval(0.0, 0.5) 前面一半执行变大动画
_animationColor = ColorTween(begin: Colors.blue, end: Colors.amber)
.animate(CurvedAnimation(parent: _controller, curve: Interval(0.3, 1)));
//Interval(0.3, 1) 0.3开始,执行颜色变化动画
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: InkWell(
onTap: () {
if (_controller.isDismissed) {
_controller.forward();
} else {
_controller.reverse();
}
},
child: Container(
width: _animationSize.value,
height: _animationSize.value,
decoration: BoxDecoration(
shape: BoxShape.circle, color: _animationColor.value),
),
),
),
),
);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
}