背景
Flutter中我使用的是這個(gè)Lottie組件
我在做一個(gè)點(diǎn)贊的動(dòng)畫(huà)的時(shí)候，就是很簡(jiǎn)單的將like.json放到assets目錄下，然后再同一個(gè)目錄下面創(chuàng)了了一個(gè)images文件夾，文件夾下面放著like-fill.png圖片
注: 這么做的原因是json文件有下面這段代碼:
"assets": [
{
"id": "image_0",
"w": 120,
"h": 120,
"u": "images/",
"p": "like-fill.png",
"e": 0
}
]
然后使用下面這段代碼加載lottie動(dòng)畫(huà):
Lottie.asset(
'assets/like.json',
repeat: true,
reverse: true,
animate: true,
),
最終顯示結(jié)果如下方gif一樣：
而正常的結(jié)果應(yīng)該是跟下面這個(gè)一樣
顯然最終的效果是非常不符合預(yù)期的，異常點(diǎn)贊的小手變得特別大。那么就得看下lottie組件到底做了什么事情
探究
下面是Lottie時(shí)序圖以及最終處理的代碼
- 創(chuàng)建LottieBuilder對(duì)象，
- 通過(guò)LottieBuilder對(duì)象創(chuàng)建AssetsLottie對(duì)象，主要根據(jù)生成的key值從cache中獲取已經(jīng)創(chuàng)建的Future<LottieComposition>
- 如果不存在那么先創(chuàng)建一個(gè)Future<LottieComposition>，然后加載Assets文件夾下對(duì)應(yīng)的Lottie文件
-
然后在FutureBuilder的build方法通過(guò)future獲取LottieComposition對(duì)象，構(gòu)建Lottie的Widget
Lottie時(shí)序圖2.jpg - Lottie 的Widget創(chuàng)建RawLottie，然后創(chuàng)建RenderLottie，創(chuàng)建LottieDrawable, 創(chuàng)建CompositionLayer
- CompositionLayer根據(jù)傳入的Models創(chuàng)建不同的BaseLayer對(duì)象(點(diǎn)贊的圖是一個(gè)Image類型，所以創(chuàng)建的是ImageLayer)
- 由于RenderLottie是個(gè)RenderBox對(duì)象，會(huì)執(zhí)行paint方法所以最終會(huì)執(zhí)行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();
}
很顯然從最終繪制的代碼看，是調(diào)用了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;
}
}
從上述代碼看，應(yīng)該是從Composition里面獲取的images數(shù)組。Composition在哪里設(shè)置的呢？其實(shí)第一張時(shí)序圖里面已經(jīng)給出了地方(就是調(diào)用的LottieComposition的fromBytes方法獲取的)我們?cè)賮?lái)看下這個(gè)方法的主要邏輯:
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;
}
發(fā)現(xiàn)是調(diào)用了LottieCompositionParser的parse方法獲取的，那么可想而知里面的操作應(yīng)該就是類似乎xml解析一樣的根據(jù)各種tag獲取對(duì)應(yīng)的值。
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;
}
我們那個(gè)點(diǎn)贊的圖片like-fill.png其實(shí)是在assets的字段中，也就是reader.selectName(_names) == 7的場(chǎng)景。所以會(huì)執(zhí)行_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應(yīng)該就是reader.selectName(_assetsNames) == 2的場(chǎng)景，
height應(yīng)該就是reader.selectName(_assetsNames) == 3的場(chǎng)景。
所以最終得出的結(jié)論是assets里面的w會(huì)作為bitmap的寬，h會(huì)作為bitmap的高即最終值為120*120。
那我們?cè)倩氐嚼L制的那兩句代碼
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方法可以把圖片上的一個(gè)矩形部分，以填充至滿的形式繪制到另一個(gè)矩形中。
而這里dst的寬高是120density（density即為像素密度）
到這里我猜測(cè)應(yīng)該是圖片尺寸大于了120120,所以在繪制的時(shí)候src只截圖了一部分矩形，然后填沖到了一個(gè)120 * density的正方形中。這樣就放大了點(diǎn)贊的圖片。我查看了一下圖片的尺寸:
果然尺寸設(shè)置成了240*240，難怪會(huì)在動(dòng)畫(huà)顯示的時(shí)候放大了兩倍。
總結(jié)
總的來(lái)說(shuō)問(wèn)題解決起來(lái)不難，將圖片縮小到120*120的尺寸即可。
注意事項(xiàng):經(jīng)過(guò)這次的踩坑問(wèn)題可以知道，以后在使用Flutter的Lottie組件進(jìn)行顯示lottie動(dòng)畫(huà)的時(shí)候，如果json文件里面有設(shè)置image的圖片，那么對(duì)應(yīng)的圖片的寬高必須要跟json文件里面設(shè)置的image圖片的w和h參數(shù)保持一致，否則顯示出來(lái)的圖片就會(huì)放大或者縮小。
ps: 總算是解決了問(wèn)題，并且搞清楚了原因。這個(gè)地方花費(fèi)了差不過(guò)一天的時(shí)間來(lái)搞明白。
