Flutter 实现光影变换的立体旋转效果

前言

之前我们提到了 CustomPaint er 的 Paint 可以使用渐变（GradientShader）来填充绘制的图形，本篇我们来介绍使用图片填充，并且配合动画实现“立体”旋转效果，之所以给“立体”加上引号，是因为实际是通过填充图片自身的光影效果旋转后看起来像是立体效果一样。下面是实现的效果图。

ImageShader 简介

ImageShader 的定义如下，我们来看看各个参数的用途。

• image：用于填充的图像，是 Image 类，注意这个 Image 类定义在 dart:ui 库中，并不是我们用于构建图像组件的 Widget 下面的 Image 类。
• tmx：图形在 x 轴的处理方式，即当被填充的宽度与图片宽度不匹配时，在横轴方向如何填充。
• tmy：图形在y 轴的处理方式，即当被填充的高度与图片高度不匹配时，在纵轴方向如何填充。
• matrix4：对填充图像的三维空间的平移、旋转等变换操作。
• filterQuality：当图片尺寸和被填充图形的尺寸不一致时，采样的质量&#