在页面视图之间颤动淡入淡出动画答案

【问题标题】：Flutter fade animation between page views在页面视图之间颤动淡入淡出动画
【发布时间】：2020-07-21 08:11:41
【问题描述】：

我正在尝试找出如何在 PageView 页面之间淡入淡出。

这是我的页面视图：

PageView(
                  controller: controller,
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage("assets/image4.jpg"),
                            fit: BoxFit.cover),
                      ),
                      child: Center(
                          child: Text(
                        'myText',
                        style: TextStyle(color: Colors.white, fontSize: 40.0),
                      )),
                    ),
                    Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage("assets/image2.jpg"),
                            fit: BoxFit.cover),
                      ),
                      child: Center(
                          child: Text(
                            'myText',
                            style: TextStyle(color: Colors.white, fontSize: 40.0),
                          )),
                    ),
                    Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage("assets/image3.jpg"),
                            fit: BoxFit.cover),
                      ),
                      child: Center(
                          child: Text(
                            'myText',
                            style: TextStyle(color: Colors.white, fontSize: 40.0),
                          )),
                    ),
                  ],
                ),

是否可以实现淡入淡出过渡？我搜索了堆栈溢出，但我唯一能找到的是这个包： https://pub.dev/packages/transformer_page_view#-readme-tab-

问题是它没有控制器，所以我的 smoothPageIndactor 无法工作。 (https://pub.dev/packages/smooth_page_indicator)

谢谢！

【问题讨论】：

您尝试过 AnimatedOpacity 小部件吗？
我阅读了有关它的信息，但它可以在这个用例中实现吗？因为我似乎找不到与 PageView 结合使用的特定示例/信息

标签： flutter dart

【解决方案1】：

您可以在下面复制粘贴运行完整代码
您可以使用TransformerPageView.children 和TransformerPageController

TransformerPageController controller = TransformerPageController();
...
Expanded(
          flex: 5,
          child: TransformerPageView.children(
            pageController: controller,
            transformer: ScaleAndFadeTransformer(),

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:transformer_page_view/transformer_page_view.dart';

class ScaleAndFadeTransformer extends PageTransformer {
  final double _scale;
  final double _fade;

  ScaleAndFadeTransformer({double fade: 0.3, double scale: 0.8})
      : _fade = fade,
        _scale = scale;

  @override
  Widget transform(Widget item, TransformInfo info) {
    double position = info.position;
    double scaleFactor = (1 - position.abs()) * (1 - _scale);
    double fadeFactor = (1 - position.abs()) * (1 - _fade);
    double opacity = _fade + fadeFactor;
    double scale = _scale + scaleFactor;
    return new Opacity(
      opacity: opacity,
      child: new Transform.scale(
        scale: scale,
        child: item,
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TransformerPageController controller = TransformerPageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              flex: 5,
              child: TransformerPageView.children(
                pageController: controller,
                transformer: ScaleAndFadeTransformer(),
                children: [
                  Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                          image:
                              NetworkImage('https://picsum.photos/250?image=9'),
                          fit: BoxFit.cover),
                    ),
                    child: Center(
                        child: Text(
                      'myText',
                      style: TextStyle(color: Colors.white, fontSize: 40.0),
                    )),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage(
                              'https://picsum.photos/250?image=10'),
                          fit: BoxFit.cover),
                    ),
                    child: Center(
                        child: Text(
                      'myText',
                      style: TextStyle(color: Colors.white, fontSize: 40.0),
                    )),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage(
                              'https://picsum.photos/250?image=11'),
                          fit: BoxFit.cover),
                    ),
                    child: Center(
                        child: Text(
                      'myText',
                      style: TextStyle(color: Colors.white, fontSize: 40.0),
                    )),
                  ),
                ],
              ),
            ),
            Expanded(
              flex: 1,
              child: SmoothPageIndicator(
                controller: controller, // PageController
                count: 3,
                effect: WormEffect(), // your preferred effect
              ),
            )
          ],
        ),
      ),
    );
  }
}

【讨论】：

非常感谢！这就是我正在寻找的。但是是否有可能只使用淡入淡出，因为我不需要浏览量移动，只需要淡入淡出
你的意思是点击页面并调用动画到页面。 onPressed: () { if (_pageController.hasClients) { _pageController.animateToPage( 1, 持续时间: const Duration(毫秒: 400), 曲线: Curves.easeInOut, ); } }

【解决方案2】：

您可以使用AnimatedSwitcher 作为主要小部件的主体：

AnimatedSwitcher(
          transitionBuilder: (Widget child, Animation<double> animation) {
            return FadeTransition(
              child: child,
              opacity: animation,
            );
          },
          duration: const Duration(milliseconds: 600),
          child: _widgetOptions.elementAt(_selectedIndex))

【讨论】：