如何使用AnimatedBuilder小部件为"颜色"设置动画?颤振

Question

我正在尝试使用Flutter中的AnimatedBuilder小部件为颜色设置动画

我可以使用这个生成器小部件通过返回Transform对象来设置缩放、平移和旋转的动画。但我迷失了如何做到这一点，以动画色彩。

注意，我可以使用AnimatedContainer小部件制作颜色动画，但我希望能够使用Intervals制作更复杂的动画(例如，在这种情况下，淡入颜色，等待一段时间，然后淡出(。

这可能吗？

谢谢！

class _AnimatedColorState extends State<AnimatedColor>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<Color?> _animFadeIn, _animFadeOut;
@override
void initState() {
_controller = AnimationController(
duration: Duration(milliseconds: 1000),
vsync: this,
);
_animFadeIn = ColorTween(begin: Colors.pinkAccent, end: Colors.green)
.animate(CurvedAnimation(
parent: _controller,
curve: Interval(0, 0.20, curve: Curves.fastOutSlowIn)));
_animFadeOut = ColorTween(begin: Colors.green, end: Colors.pinkAccent)
.animate(CurvedAnimation(
parent: _controller,
curve: Interval(0.80, 1.0, curve: Curves.fastOutSlowIn)));
_controller.forward();
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Container(
height: 300,
width: 100,
decoration: BoxDecoration(
color: // animate color here?
));
});
}
}

Answer 1

您可以在Color上使用.lrep((方法从animationController中指定两种颜色和一个值。

https://api.flutter.dev/flutter/dart-ui/Color/lerp.html