页面过渡上带有 SVG 的 Flutter Shader 遮罩

Question

我正在使用着色器蒙版进行页面转换：

transitionsBuilder: (context, animation, secondaryAnimation, child) => TweenAnimationBuilder(
  tween: Tween(begin: 0.0, end: 1.0),
  duration: Duration(milliseconds: 1000),
  curve: Curves.easeIn,
  child: child,
  builder: (BuildContext context, double value, Widget? child)
  {
    return ShaderMask(
      child: child,
      shaderCallback: (rect)
      {
        return RadialGradient(
          colors: [Colors.white, Colors.white, Colors.transparent, Colors.transparent],
          stops: [0.0, 0.25, 0.6, 1.0],
          center: FractionalOffset(.5, .5),
          radius: value * 5,
        ).createShader(rect);
      }
    );
  },
)

我想知道是否可以为 SVG 图像创建着色器。这是具有 2 种颜色的 SVG 示例。内部的白色圆圈应该是新页面的开头。就像上面的径向渐变一样，SVG 应该变大，直到内部白色圆圈填满整个页面。 （蓝色圆圈/环扩大）

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="-300 -300 600 600">
<circle r="100" fill="blue" />
<circle r="50" fill="white" />
</svg>

我已经尝试过

ImageShader()

。要将 Svg 放入图像信息对象：

Future<void> getImageShader(int width, int height) async
{
  final completer = Completer<ImageInfo>();

  ResizeImage(***my svg provider object ***, width: width, height: height)
    .resolve(ImageConfiguration(size: Size(width.toDouble(), height.toDouble())))
    .addListener(ImageStreamListener((info, _) => completer.complete(info)));

  final info = await completer.future;
  return ImageShader(
    info.image,
    TileMode.clamp,
    TileMode.clamp,
    Float64List.fromList(Matrix4.identity().storage),
  );
}

这就是我被困住的地方。

getImageShader

是异步的，对于

transitionsBuilder

的每一帧，我认为它需要重新绘制图像。无法在

ShaderMask

回调函数中使用该函数。

• 提供的 SVG 是一个示例，它可能会更复杂
• 尝试在桌面应用程序中使用此方法。

Answer 1

您可以在

ShaderMask

 上使用 

SvgPicture

ShaderMask(
        shaderCallback: (Rect bounds) {
          return RadialGradient(
            center: Alignment.topLeft,
            radius: 1,
            colors: <Color>[Colors.yellow, Colors.deepOrange.shade900],
            tileMode: TileMode.mirror,
          ).createShader(bounds);
        },
        child: SvgPicture.asset(
          child: 'path/to/image'
            color: Colors.white,
        ),
      ),

您必须将 SvgPicture 的颜色属性设置为

Colors.white