xvrh / lottie-flutter

Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.
https://pub.dev/packages/lottie
MIT License
1.13k stars 197 forks source link

Strange lottie animation effect #360

Open bruce3x opened 1 month ago

bruce3x commented 1 month ago

I don't know why the animation was spinning inexplicably in Flutter. But its preview on the web is normal and as expected.

❌ Preview lottie in Flutter: https://github.com/xvrh/lottie-flutter/assets/15318754/3e227f4d-6f9a-40bc-8dad-ac143838e4b4

✅ Preview lottie in Web:

https://github.com/xvrh/lottie-flutter/assets/15318754/eb84b155-0131-4913-aafb-a048ea5d88ed

Versions:

Flutter 3.19.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 300451adae (3 months ago) • 2024-03-27 21:54:07 -0500
Engine • revision e76c956498
Tools • Dart 3.3.3 • DevTools 2.31.1

pubspec.lock

lottie:
  dependency: "direct main"
  description:
    name: lottie
    sha256: "6a24ade5d3d918c306bb1c21a6b9a04aab0489d51a2582522eea820b4093b62b"
    url: "https://pub.dev"
  source: hosted
  version: "3.1.2"

Code:

SizedBox(
  width: 400,
  height: 400,
  child: AspectRatio(
    aspectRatio: 1.0,
    child: Lottie.asset(
      "assets/lottie/cloud_bird.json",
      repeat: true,
      animate: true,
      fit: BoxFit.fitWidth,
    ),
  ),
),

Lottie file: cloud_bird.json