我正在准备我们应用程序的登录屏幕,在其中需要一长串应用程序功能,这些功能会自动从下至上滚动,仅显示3个文本元素。我试图通过遵循以下代码来完成此操作,但是它不起作用。
class FeatureAnimation extends StatefulWidget {
@override
_FeatureAnimationState createState() => _FeatureAnimationState();
}
class _FeatureAnimationState extends State<FeatureAnimation>
with TickerProviderStateMixin {
AnimationController _controller;
Animation<double> _containerMargin; //using this for scrolling the list
Animation<double> _fontSizeIncrement;
Animation<double> _opacity;
@override
void initState() {
_controller =
AnimationController(vsync: this, duration: new Duration(seconds: 5));
_containerMargin = Tween<double>(begin: 0, end: 100.0).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(0.1, 1, curve: Curves.ease),
),
);
_fontSizeIncrement = TweenSequence<double>(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: new Tween<double>(begin: 0, end: 10.0)
.chain(CurveTween(curve: Curves.easeOut)),
weight: 50,
),
TweenSequenceItem<double>(
tween: new Tween<double>(begin: 10.0, end: 0)
.chain(CurveTween(curve: Curves.elasticOut)),
weight: 50.0,
),
],
).animate(
(CurvedAnimation(parent: _controller, curve: Interval(0.1, 1.0))));
_opacity = TweenSequence<double>(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: new Tween<double>(begin: 0, end: 1.0),
weight: 20.0,
),
TweenSequenceItem<double>(
tween: new Tween<double>(begin: 1.0, end: 0),
weight: 80.0,
),
],
).animate((CurvedAnimation(parent: _controller, curve: Interval(0, 1.0,curve: Curves.ease))));
_controller.forward();
}
@override
Widget build(BuildContext context) {
double totalHeight = MediaQuery.of(context).size.height;
double totalWidth = MediaQuery.of(context).size.width;
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Container(
width: totalWidth,
height: 200,
child: Align(
alignment: Alignment.center,
child: Container(
margin: EdgeInsets.only(bottom: _containerMargin.value),
child: Container(
height: 100,
child: Column(
children: <Widget>[
Text(
'Feature 1',
style: TextStyle(
fontSize: 14,
color: Colors.black.withOpacity(
(_opacity.value - 0.4) <= 0.0
? 0.0
: (_opacity.value - 0.4))),
),
Text(
'Feature 2',
style: TextStyle(
fontSize: 14+_fontSizeIncrement.value,
color: Colors.black.withOpacity(_opacity.value)),
),
Text(
'Feature 3',
style: TextStyle(
fontSize: 14,
color: Colors.black.withOpacity(
(_opacity.value - 0.4) <= 0.0
? 0.0
: (_opacity.value - 0.4))),
),
Text(
'Feature 4',
style: TextStyle(
fontSize: 14,
color: Colors.black.withOpacity(
(_opacity.value - 0.4) <= 0.0
? 0.0
: (_opacity.value - 0.4))),
)
],
),
),
),
),
);
},
);
}
}
我以为我可以使用_containerMargin进行滚动,但是我不确定如何在不同的文本小部件上应用相同的动画。