Antialiasing issues about lottie-flutter

[wzono]

In fill_content.dart I modify draw func,if is iOS and hasCircle use drawCircle instead of drawPath.

// canvas.drawPath(_path, _paint);
if(Platform.isIOS){
  if(hasCircle){
    var rect = _path.getBounds();
    canvas.drawCircle(rect.center,rect.width / 2,_paint);
  }else{
    canvas.drawPath(_path, _paint);
  }
}else{
  canvas.drawPath(_path, _paint);
}

It is not very well solution,but can solve my problem.Hope it can help you.

How do I know about hasCircle?

[binqiiyuenan]

I had the same problem with my iPhone 11Pro, which worked well on Android

[kkizlaitis]

I also saw that it doesn't matter what the size of the animation is. My device was iPhone X (not a simulator).

[binqiiyuenan]

Yes, it has nothing to do with size. Have you found a solution later

[kkizlaitis]

Not yet, for now I left it like that... Input from @xvrh would be greatly appreciated 😊

[binqiiyuenan]

I covered the serrate with a line of the same color to solve this problem on the iPhone, I hope it helps you.

[AndrewsXc]

I encountered the same aliasing problem on iPhone 11 devices with lottie 0.7.0+1.
And I found that this happens only in iOS 14.

[lifelikejuly]

I have same problem.but it cant find in Android.
I see circle draw use path to do will have Antialiasing.

[lifelikejuly]

In fill_content.dart I modify draw func,if is iOS and hasCircle use drawCircle instead of drawPath.

// canvas.drawPath(_path, _paint);
if(Platform.isIOS){
  if(hasCircle){
    var rect = _path.getBounds();
    canvas.drawCircle(rect.center,rect.width / 2,_paint);
  }else{
    canvas.drawPath(_path, _paint);
  }
}else{
  canvas.drawPath(_path, _paint);
}

It is not very well solution,but can solve my problem.Hope it can help you.

[lifelikejuly]

In fill_content.dart I modify draw func,if is iOS and hasCircle use drawCircle instead of drawPath.

// canvas.drawPath(_path, _paint);
if(Platform.isIOS){
  if(hasCircle){
    var rect = _path.getBounds();
    canvas.drawCircle(rect.center,rect.width / 2,_paint);
  }else{
    canvas.drawPath(_path, _paint);
  }
}else{
  canvas.drawPath(_path, _paint);
}

It is not very well solution,but can solve my problem.Hope it can help you.

How do I know about hasCircle?

Find CircleShape and you can see EllipseContent.
If fill_content has EllipseContent mean have circle.

[eggfly]

if(Platform.isIOS){
  final hasCircle = _path.any((path) {
    return path is EllipseContent;
  });
  if(hasCircle){
    var rect = _path.getBounds();
    canvas.drawCircle(rect.center,rect.width / 2,_paint);
  }else{
    canvas.drawPath(_path, _paint);
  }
}else{
  canvas.drawPath(_path, _paint);
}

This code may work but it needs some more tests