Flutter如何为翻转动画中的卡片添加弧度以实现仿真翻页效果

可行性结论 #

该需求完全可以实现，无需额外引入第三方弧度组件，基于Flutter自带的路径裁剪能力配合现有翻转动画逻辑即可完成。

核心实现思路 #

• 硬质书页翻折时的中心弧度本质是翻折侧产生弧形形变，曲率随翻折角度变化：翻折角度越接近90度弧度越明显，完全展开/闭合时弧度消失
• 在现有Transform外层嵌套ClipPath，随动画进度动态更新裁剪路径模拟弧形弯曲
• 弧度方向根据当前展示的是正面/背面、翻折方向自动调整

修改后完整实现代码 #

Widget __transitionBuilder(Widget widget, Animation<double> animation) {
  final rotateAnim = Tween(begin: pi, end: 0.0).animate(animation);
  return AnimatedBuilder(
    animation: rotateAnim,
    child: widget,
    builder: (context, widget) {
      final isUnder = (ValueKey(_showFrontSide) != widget.key);
      var tilt = ((animation.value - 0.5).abs() - 0.5) * 0.003;
      tilt *= isUnder ? -1.0 : 1.0;
      final value = isUnder ? min(rotateAnim.value, pi / 2) : rotateAnim.value;
      // 计算当前弧度曲率，动画到中间翻折位置时曲率最大
      final curveValue = (animation.value - 0.5).abs() * 2;
      final bendRadius = 12 * (1 - curveValue); // 12为最大弯曲深度，可自行调整
      
      return ClipPath(
        // 动态生成带弧度的裁剪路径
        clipper: _PageBendClipper(
          isUnder: isUnder, 
          bendDepth: bendRadius,
          animationProgress: animation.value
        ),
        child: Transform(
          transform: Matrix4.rotationY(value)..setEntry(3, 0, tilt),
          child: widget,
          alignment: Alignment.center,
        ),
      );
    },
  );
}

// 自定义裁剪类，实现书页弯曲效果
class _PageBendClipper extends CustomClipper<Path> {
  final bool isUnder;
  final double bendDepth;
  final double animationProgress;

  _PageBendClipper({
    required this.isUnder,
    required this.bendDepth,
    required this.animationProgress,
  });

  @override
  Path getClip(Size size) {
    final path = Path();
    final isLeftSide = animationProgress > 0.5;
    // 弯曲深度极小时直接返回矩形，减少不必要绘制
    if (bendDepth < 0.1) {
      path.addRect(Rect.fromLTWH(0, 0, size.width, size.height));
      return path;
    }

    path.moveTo(0, 0);
    if (isLeftSide) {
      // 向左翻折时左侧带弧度
      path.lineTo(size.width, 0);
      path.quadraticBezierTo(size.width, size.height/2, size.width, size.height);
      path.lineTo(0, size.height);
      path.quadraticBezierTo(bendDepth, size.height/2, 0, 0);
    } else {
      // 向右翻折时右侧带弧度
      path.lineTo(size.width - bendDepth, 0);
      path.quadraticBezierTo(size.width, size.height/2, size.width - bendDepth, size.height);
      path.lineTo(0, size.height);
      path.lineTo(0, 0);
    }
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant _PageBendClipper oldClipper) {
    return oldClipper.bendDepth != bendDepth || 
        oldClipper.isUnder != isUnder || 
        oldClipper.animationProgress != animationProgress;
  }
}

效果优化建议 #

• 可调整代码中最大弯曲深度参数（默认12）匹配硬质书页质感：数值越大弯曲越明显，数值越小书页越硬
• 如需更逼真的效果，可在弯曲侧叠加一层随动画变化的半透明灰色遮罩，模拟书页弯折处的阴影效果

内容的提问来源于stack exchange，提问作者swamper