用实例展现Flutter小说阅读器改版的翻页动画技巧

2023-09-22 08:45:04

页面背后的玄机

想象一下，你捧着一本心爱的书，轻轻翻阅着它的页面，指尖掠过书页的边缘，滑过书脊。这看似简单的动作背后，却隐藏着复杂的原理，让这本书栩栩如生。让我们深入探索一下页面背后的秘密吧！

书脊的奥秘

当你把书合上时，中间折起的部分形成了一个完美的立方体。然而，随着你翻开书页，这个立方体会不断变形，呈现出不同的形状。在这个过程中，页面背后的部分被巧妙地隐藏起来，但又留下了一丝线索——书脊。

打造书脊

要实现书脊效果，我们可以借助 Flutter 的 Stack 组件。将页面放置在 Stack 的上方，并添加一个额外的 SizedBox，使用透明颜色填充页面的一半宽度，即可形成书脊。

Stack(
  children: [
    Page(),
    Positioned(
      left: MediaQuery.of(context).size.width / 2,
      child: SizedBox(
        width: MediaQuery.of(context).size.width / 2,
        height: double.infinity,
        color: Colors.transparent,
      ),
    ),
  ],
)

书脊的优化

最初的书脊可能会出现边缘线条和位置变化的问题。为了解决这些问题，我们可以使用一个白色背景将其包裹并添加圆角，以隐藏线条。

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(20.0),
  ),
  child: Stack(
    children: [
      Page(),
      Positioned(
        left: MediaQuery.of(context).size.width / 2,
        child: SizedBox(
          width: MediaQuery.of(context).size.width / 2,
          height: double.infinity,
          color: Colors.transparent,
        ),
      ),
    ],
  ),
)

翻页的魔法

有了书脊，我们就可以实现翻页效果了。通过控制页面的透明度，可以营造出翻页的错觉。

AnimationController controller = AnimationController(
  duration: Duration(milliseconds: 300),
  vsync: this,
);
Animation<double> opacityAnimation = Tween(
  begin: 1.0,
  end: 0.0,
).animate(controller);