如何从每次扑波中开始淡出淡出的过渡动画？

Question

在页面视图中，每当更改页面时，都应更改标头，并且有一个按钮可以执行此操作。有一个名为标题的文本列表，每次按下按钮时，都应使用另一个使用淡出过渡动画更改文本。现在，我真正想实现的目标是，按下按钮时，下一个文本应用0不透明度替换当前文本，并且在一秒钟内，它的不透明度应达到1，并且应在没有任何缺陷的情况下执行，并且每次页面时都会顺利进行。更改。

我正在努力的是，当动画完成而没有对UI的任何副作用时，我无法将动画值设置为0。 P>

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

您可以观看动画通过链接 https://youtube.com/shorts/3aiawjhz2am?feature=share 。。

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);
                  },
                ),
              ),
            ],
          ),
        );
      }),
    );
  }

}

Showcase https：//youtube.com/shorts/3aiawjhz2am?feature=share Share

Answer 1

请使用动画容器，您可以在其中添加动画，然后将视图放入子女

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