背景
Flutter中我使用的是这个Lottie组件
我在做一个点赞的动画的时候，就是很简单的将like.json放到assets目录下，然后再同一个目录下面创了了一个images文件夹，文件夹下面放着like-fill.png图片
注: 这么做的原因是json文件有下面这段代码:
"assets": [
{
"id": "image_0",
"w": 120,
"h": 120,
"u": "images/",
"p": "like-fill.png",
"e": 0
}
]
然后使用下面这段代码加载lottie动画:
Lottie.asset(
'assets/like.json',
repeat: true,
reverse: true,
animate: true,
),
最终显示结果如下方gif一样：
而正常的结果应该是跟下面这个一样
显然最终的效果是非常不符合预期的，异常点赞的小手变得特别大。那么就得看下lottie组件到底做了什么事情
探究
下面是Lottie时序图以及最终处理的代码
- 创建LottieBuilder对象，
- 通过LottieBuilder对象创建AssetsLottie对象，主要根据生成的key值从cache中获取已经创建的Future<LottieComposition>
- 如果不存在那么先创建一个Future<LottieComposition>，然后加载Assets文件夹下对应的Lottie文件
-
然后在FutureBuilder的build方法通过future获取LottieComposition对象，构建Lottie的Widget
Lottie时序图2.jpg - Lottie 的Widget创建RawLottie，然后创建RenderLottie，创建LottieDrawable, 创建CompositionLayer
- CompositionLayer根据传入的Models创建不同的BaseLayer对象(点赞的图是一个Image类型，所以创建的是ImageLayer)
- 由于RenderLottie是个RenderBox对象，会执行paint方法所以最终会执行ImageLayer的draw方法
下面给出ImageLayer的Draw方法处理逻辑：
@override
void drawLayer(Canvas canvas, Size size, Matrix4 parentMatrix,
{int parentAlpha}) {
var bitmap = getBitmap();
if (bitmap == null) {
return;
}
var density = window.devicePixelRatio;
paint.setAlpha(parentAlpha);
if (_colorFilterAnimation != null) {
paint.colorFilter = _colorFilterAnimation.value;
}
canvas.save();
canvas.transform(parentMatrix.storage);
var src =
Rect.fromLTWH(0, 0, bitmap.width.toDouble(), bitmap.height.toDouble());
var dst = Rect.fromLTWH(
0, 0, bitmap.width * density, bitmap.height.toDouble() * density);
canvas.drawImageRect(bitmap, src, dst, paint);
canvas.restore();
}
很显然从最终绘制的代码看，是调用了getBitmap获取的bitmap，那么getbitmap做了什么操作呢？
Image /*?*/ getBitmap() {
var refId = layerModel.refId;
return lottieDrawable.getImageAsset(refId);
}
ui.Image getImageAsset(String ref) {
var imageAsset = composition.images[ref];
if (imageAsset != null) {
return imageAsset.loadedImage;
} else {
return null;
}
}
从上述代码看，应该是从Composition里面获取的images数组。Composition在哪里设置的呢？其实第一张时序图里面已经给出了地方(就是调用的LottieComposition的fromBytes方法获取的)我们再来看下这个方法的主要逻辑:
static Future<LottieComposition> fromByteData(ByteData data, {String name}) {
return fromBytes(data.buffer.asUint8List(), name: name);
}
static Future<LottieComposition> fromBytes(Uint8List bytes,
{String name}) async {
Archive archive;
if (bytes[0] == 0x50 && bytes[1] == 0x4B) {
archive = ZipDecoder().decodeBytes(bytes);
var jsonFile = archive.files.firstWhere((e) => e.name.endsWith('.json'));
bytes = jsonFile.content as Uint8List;
}
var composition = LottieCompositionParser.parse(
LottieComposition._(name), JsonReader.fromBytes(bytes));
if (archive != null) {
for (var image in composition.images.values) {
var imagePath = p.posix.join(image.dirName, image.fileName);
var found = archive.files.firstWhere(
(f) => f.name.toLowerCase() == imagePath.toLowerCase(),
orElse: () => null);
if (found != null) {
image.loadedImage = await loadImage(
composition, image, MemoryImage(found.content as Uint8List));
}
}
}
return composition;
}
发现是调用了LottieCompositionParser的parse方法获取的，那么可想而知里面的操作应该就是类似乎xml解析一样的根据各种tag获取对应的值。
static final JsonReaderOptions _names = JsonReaderOptions.of([
'w', // 0
'h', // 1
'ip', // 2
'op', // 3
'fr', // 4
'v', // 5
'layers', // 6
'assets', // 7
'fonts', // 8
'chars', // 9
'markers' // 10
]);
static LottieComposition parse(
LottieComposition composition, JsonReader reader) {
...代码省略...
reader.beginObject();
while (reader.hasNext()) {
switch (reader.selectName(_names)) {
...代码省略...
case 7:
_parseAssets(reader, composition, precomps, images);
break;
...代码省略
}
}
...代码省略...
return composition;
}
我们那个点赞的图片like-fill.png其实是在assets的字段中，也就是reader.selectName(_names) == 7的场景。所以会执行_parseAssets方法：
static final JsonReaderOptions _assetsNames = JsonReaderOptions.of([
'id', // 0
'layers', // 1
'w', // 2
'h', // 3
'p', // 4
'u' // 5
]);
static void _parseAssets(JsonReader reader, LottieComposition composition,
Map<String, List<Layer>> precomps, Map<String, LottieImageAsset> images) {
reader.beginArray();
while (reader.hasNext()) {
// For images
var width = 0;
var height = 0;
reader.beginObject();
while (reader.hasNext()) {
switch (reader.selectName(_assetsNames)) {
...代码省略...
case 2:
width = reader.nextInt();
break;
case 3:
height = reader.nextInt();
break;
...代码省略...
}
}
...代码省略...
}
reader.endArray();
}
同样的原理bitmap的width应该就是reader.selectName(_assetsNames) == 2的场景，
height应该就是reader.selectName(_assetsNames) == 3的场景。
所以最终得出的结论是assets里面的w会作为bitmap的宽，h会作为bitmap的高即最终值为120*120。
那我们再回到绘制的那两句代码
ImageLayer#drawLayer方法:
var src =
Rect.fromLTWH(0, 0, bitmap.width.toDouble(), bitmap.height.toDouble());
var dst = Rect.fromLTWH(
0, 0, bitmap.width * density, bitmap.height.toDouble() * density);
canvas.drawImageRect(bitmap, src, dst, paint);
drawImageRect方法可以把图片上的一个矩形部分，以填充至满的形式绘制到另一个矩形中。
而这里dst的宽高是120density（density即为像素密度）
到这里我猜测应该是图片尺寸大于了120120,所以在绘制的时候src只截图了一部分矩形，然后填冲到了一个120 * density的正方形中。这样就放大了点赞的图片。我查看了一下图片的尺寸:
果然尺寸设置成了240*240，难怪会在动画显示的时候放大了两倍。
总结
总的来说问题解决起来不难，将图片缩小到120*120的尺寸即可。
注意事项:经过这次的踩坑问题可以知道，以后在使用Flutter的Lottie组件进行显示lottie动画的时候，如果json文件里面有设置image的图片，那么对应的图片的宽高必须要跟json文件里面设置的image图片的w和h参数保持一致，否则显示出来的图片就会放大或者缩小。
ps: 总算是解决了问题，并且搞清楚了原因。这个地方花费了差不过一天的时间来搞明白。
