如何运行淡出过渡动画从开始每次在扑动?

Question

在页面视图中，有一个标题应该在页面更改时更改，并且有一个按钮来执行此操作。有一个名为header的文本列表，每次按下按钮时，文本都应该与另一个带有渐变过渡动画的文本一起更改。现在我真正想要实现的是，当按钮被按下时，下一个文本应该取代当前文本的不透明度为0，在一秒钟内，它的不透明度应该上升到1，它应该执行没有任何缺陷，并且每次页面更改时都很顺利。

我正在努力的是，当动画完成时，我不能将动画值设置为0而不会对UI产生任何副作用，它不应该是明显的

简而言之，我希望每次按下按钮时动画值都从零开始。

你可以通过链接https://youtube.com/shorts/3aIAWjhZ2AM?feature=share观看动画是如何工作的。

controller.forward(from: 0);不像预期的那样工作…

下面是我的业务逻辑:

class AnnouncementController extends ChangeNotifier { 
late AnimationController controller;
late Tween<double> tween;
late Animation<double> opacityAnimation;
PageController pageController = PageController();

List<String> headers = [
'Welcome back, Jasurbek',
'What do you offer?',
'What kind of accommodation do you have?',
'Tell the guests about the advantages of your dwelling',
'Add photos of the property',
'Let's think of a bright title',
'Let's set the price',
];
navigate(int index){
currentPageIndex = index;
notifyListeners();
controller.forward(from: 0);
pageController.animateToPage(
index,
duration: const Duration(milliseconds: 500),
curve: Curves.ease,
);
}
}

这是我的主类:

class _AnnouncementState extends State<Announcement> with SingleTickerProviderStateMixin {
final AnnouncementController viewModel = AnnouncementController();
@override
void initState() {
viewModel.controller = AnimationController(vsync: this, duration: const Duration(seconds: 1));
viewModel.tween = Tween(begin: 0.0, end: 1.0);
viewModel.opacityAnimation = viewModel.tween.animate(viewModel.controller);
viewModel.controller.forward();
super.initState();
}


@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (BuildContext context) => viewModel,
child: Consumer<AnnouncementController>(builder: (ctx, model, index) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
height: 250,
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.all(20),
child: FadeTransition(
opacity: viewModel.opacityAnimation,
child: Text(
viewModel.headers[viewModel.currentPageIndex],
style: TextStyle(
color: Colors.black,
fontSize: 26.sp,
fontWeight: FontWeight.bold,
),
),
)
),
Expanded(
child: PageView(
controller: viewModel.pageController,
physics: const NeverScrollableScrollPhysics(),
children: [
FirstPage(viewModel: viewModel),
SecondPage(viewModel: viewModel),
ThirdPage(viewModel: viewModel),
FourthPage(viewModel: viewModel),
FifthPage(viewModel: viewModel),
],
onPageChanged: (int index) {
viewModel.navigate(index);
},
),
),
],
),
);
}),
);
}
}

展示https://youtube.com/shorts/3aIAWjhZ2AM?feature=share

Answer 1

请使用animated container，您可以在其中添加动画并将视图作为child放在其中

文档链接- https://docs.flutter.dev/cookbook/animation/animated-container