Add errorBuilder

This PR improves some fill performance issues I found with various Lottie animations.
I think the real issue comes down to the render performance of Path.addPath(). The performance issue happens in the Render thread and seems directly related to how large the animation is on-screen. Flutter might be caching pre-rendered textures and running out of memory.

I've changed how Path.addPath() is called and how the path is rendered for fill_content.dart and gradient_fill_content.dart.

Just as an example, the example/assets/Tests/bm.json animation gets ~60 fps with this fix, compared to 34-52 fps with the lottie-flutter 0.6.0 release. (This is on a Pixel 3 XL)

There are a couple of other changes:

- I fixed a bug with the casing of "weather" in pubspec.yaml. Without this fix, the examples don't build on Ubuntu Linux.
The debugging class MeanCalculator wasn't initializing its fields, causing a null pointer exception when debugging.
- I added antiAliasingSuggested to LottieDrawable to allow fill paints to be anti-aliased. It is off by default. It also provides some minor performance improvements without any noticeable loss in quality. It is only applied to fills right now.
- I added PathFactory to create Paths rather than just new-ing them. path_factory.dart allows you to switch out the normal Path creation with a debug logging implementation so you can see all of the Path calls that are performed during a frame. Just create a DebugPath in the factory rather than Path.

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [0.6.0]
+- Runs the animation at the frame rate specified in the json file (ie. An animation encoded with a 20 FPS will only
+  be paint 20 times per seconds even though the AnimationController will invalidate the widget 60 times per seconds).  
+  A new property `frameRate` allows to opt-out this behavior and have the widget to repaint at the device frame rate 
+   (`FrameRate.max`).
+- Automatically add a `RepaintBoundary` around the widget. Since `Lottie` animations are generally complex to paint, a
+   `RepaintBoundary` will separate the animation with the rest of the app and improve performance. A new property `addRepaintBoundary`
+   allows to opt-out this behavior.
+- Fix a bug where we would call `markNeedPaint` when the animation was not changing. This removes unnecessary paints in
+  animations with static periods.
+
+## [0.5.1]
+- Remove direct dependencies on dart:io to support Flutter Web
+
+## [0.5.0]
+- Support loading animation from network in a web app
+- Fix a couple of bugs with the web dev compiler
+
+## [0.4.1]
+- Support color value stored as RGB, not RGBA 
+
 ## [0.4.0+1]
 - Support latest version of the `characters` package
 

README.md

@@ -3,12 +3,12 @@
 [![](https://github.com/xvrh/lottie-flutter/workflows/Lottie%20Flutter/badge.svg?branch=master)](https://github.com/xvrh/lottie-flutter)
 [![pub package](https://img.shields.io/pub/v/lottie.svg)](https://pub.dev/packages/lottie)
 
-Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) 
+Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](https://www.adobe.com/products/aftereffects.html) 
 animations exported as json with [Bodymovin](https://github.com/airbnb/lottie-web) and renders them natively on mobile!
 
 This repository is a unofficial conversion of the [Lottie-android](https://github.com/airbnb/lottie-android) library in pure Dart. 
 
-It works on Android, iOS and macOS. ([Web support is coming](https://github.com/xvrh/lottie-flutter#flutter-web))
+It works on Android, iOS and macOS and web.
 
 ## Usage
 
@@ -122,13 +122,14 @@ Lottie.asset(
 animation.
 
 ### Custom loading
-This example shows how to load and parse a Lottie composition from a json file.  
-
 The `Lottie` widget has several convenient constructors (`Lottie.asset`, `Lottie.network`, `Lottie.memory`) to load, parse and
 cache automatically the json file.
 
 Sometime you may prefer to have full control over the loading of the file. Use `LottieComposition.fromByteData` to 
 parse the file from a list of bytes.
+
+This example shows how to load and parse a Lottie composition from a json file.  
+
 ```dart
 class MyWidget extends StatefulWidget {
   @override
@@ -245,17 +246,13 @@ class _Animation extends StatelessWidget {
 ````
 
 ## Limitations
-This is a new library so usability, documentation and performance are still work in progress.
-
 Only the [supported features of Lottie Android](https://airbnb.io/lottie/#/supported-features)
 are supported in this port.
 
 ## Flutter Web
 Run the app with `flutter run -d Chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release`
 
-The performance are not great and some features are missing.
-
 See a preview here: https://xvrh.github.io/lottie-flutter/index.html
 
-## Complete example
+## More examples
-See the Sample app (in the `example` folder) for a complete example of the various possibilities.
+See the `example` folder for more code samples of the various possibilities.

README.template.md

@@ -3,12 +3,12 @@
 [![](https://github.com/xvrh/lottie-flutter/workflows/Lottie%20Flutter/badge.svg?branch=master)](https://github.com/xvrh/lottie-flutter)
 [![pub package](https://img.shields.io/pub/v/lottie.svg)](https://pub.dev/packages/lottie)
 
-Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) 
+Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](https://www.adobe.com/products/aftereffects.html) 
 animations exported as json with [Bodymovin](https://github.com/airbnb/lottie-web) and renders them natively on mobile!
 
 This repository is a unofficial conversion of the [Lottie-android](https://github.com/airbnb/lottie-android) library in pure Dart. 
 
-It works on Android, iOS and macOS. ([Web support is coming](https://github.com/xvrh/lottie-flutter#flutter-web))
+It works on Android, iOS and macOS and web.
 
 ## Usage
 
@@ -17,7 +17,7 @@ This example shows how to display a Lottie animation in the simplest way.
 The `Lottie` widget will load the json file and run the animation indefinitely.
 
 ```dart
-import 'example/lib/examples/main.dart';
+import 'example/lib/main.dart';
 ```
 
 ### Specify a custom `AnimationController`
@@ -48,13 +48,14 @@ Lottie.asset(
 animation.
 
 ### Custom loading
-This example shows how to load and parse a Lottie composition from a json file.  
-
 The `Lottie` widget has several convenient constructors (`Lottie.asset`, `Lottie.network`, `Lottie.memory`) to load, parse and
 cache automatically the json file.
 
 Sometime you may prefer to have full control over the loading of the file. Use `LottieComposition.fromByteData` to 
 parse the file from a list of bytes.
+
+This example shows how to load and parse a Lottie composition from a json file.  
+
 ```dart
 import 'example/lib/examples/custom_load.dart#example';
 ```
@@ -77,17 +78,13 @@ import 'example/lib/examples/simple_dynamic_properties.dart#example';
 ````
 
 ## Limitations
-This is a new library so usability, documentation and performance are still work in progress.
-
 Only the [supported features of Lottie Android](https://airbnb.io/lottie/#/supported-features)
 are supported in this port.
 
 ## Flutter Web
 Run the app with `flutter run -d Chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release`
 
-The performance are not great and some features are missing.
-
 See a preview here: https://xvrh.github.io/lottie-flutter/index.html
 
-## Complete example
+## More examples
-See the Sample app (in the `example` folder) for a complete example of the various possibilities.
+See the `example` folder for more code samples of the various possibilities.

example/lib/examples/main.dart

@@ -1,27 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:lottie/lottie.dart';
-
-void main() => runApp(MyApp());
-
-class MyApp extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      home: Scaffold(
-        body: ListView(
-          children: [
-            // Load a Lottie file from your assets
-            Lottie.asset('assets/LottieLogo1.json'),
-
-            // Load a Lottie file from a remote url
-            Lottie.network(
-                'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),
-
-            // Load an animation and its images from a zip file
-            Lottie.asset('assets/lottiefiles/angel.zip'),
-          ],
-        ),
-      ),
-    );
-  }
-}

example/lib/main.dart

@@ -1,157 +1,24 @@
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'package:logging/logging.dart';
 import 'package:lottie/lottie.dart';
-import 'src/all_files.g.dart';
 
-void main() {
+void main() => runApp(MyApp());
-  Logger.root
-    ..level = Level.ALL
-    ..onRecord.listen(print);
-  Lottie.traceEnabled = true;
-  runApp(App());
-}
 
-class App extends StatelessWidget {
+class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      //showPerformanceOverlay: true,
       home: Scaffold(
-        appBar: AppBar(
+        body: ListView(
-          title: Text('Lottie Flutter'),
-        ),
-        body: GridView.builder(
-          itemCount: files.length,
-          gridDelegate:
-              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
-          itemBuilder: (context, index) {
-            var assetName = files[index];
-            return GestureDetector(
-              child: _Item(
-                child: Lottie.asset(
-                  assetName,
-                  frameBuilder: (context, child, composition) {
-                    return AnimatedOpacity(
-                      child: child,
-                      opacity: composition == null ? 0 : 1,
-                      duration: const Duration(seconds: 1),
-                      curve: Curves.easeOut,
-                    );
-                  },
-                ),
-              ),
-              onTap: () {
-                Navigator.of(context).push(MaterialPageRoute<void>(
-                    builder: (context) => Detail(assetName)));
-              },
-            );
-          },
-        ),
-      ),
-    );
-  }
-}
-
-class _Item extends StatelessWidget {
-  final Widget child;
-
-  const _Item({Key key, this.child}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.all(8.0),
-      child: Container(
-        decoration: BoxDecoration(
-            color: Colors.white,
-            borderRadius: BorderRadius.all(Radius.circular(10)),
-            boxShadow: [
-              BoxShadow(
-                  color: Colors.black.withOpacity(0.1),
-                  offset: Offset(2, 2),
-                  blurRadius: 5)
-            ]),
-        child: child,
-      ),
-    );
-  }
-}
-
-class Detail extends StatefulWidget {
-  final String assetName;
-
-  const Detail(this.assetName, {Key key}) : super(key: key);
-
-  @override
-  _DetailState createState() => _DetailState();
-}
-
-class _DetailState extends State<Detail> with TickerProviderStateMixin {
-  AnimationController _controller;
-
-  @override
-  void initState() {
-    super.initState();
-
-    _controller = AnimationController(vsync: this);
-  }
-
-  @override
-  void dispose() {
-    _controller.dispose();
-
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text('${widget.assetName}'),
-      ),
-      body: SingleChildScrollView(
-        child: Column(
           children: [
-            Center(
+            // Load a Lottie file from your assets
-              child: Lottie.asset(
+            Lottie.asset('assets/LottieLogo1.json'),
-                widget.assetName,
+
-                controller: _controller,
+            // Load a Lottie file from a remote url
-                onLoaded: (composition) {
+            Lottie.network(
-                  _controller.duration = composition.duration;
+                'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),
-                  _controller.repeat();
+
-                },
+            // Load an animation and its images from a zip file
-              ),
+            Lottie.asset('assets/lottiefiles/angel.zip'),
-            ),
-            AnimatedBuilder(
-              animation: _controller,
-              builder: (context, _) => Row(
-                children: <Widget>[
-                  Expanded(
-                    child: Slider(
-                      value: _controller.value,
-                      onChanged: (newValue) {
-                        _controller.value = newValue;
-                      },
-                    ),
-                  ),
-                  IconButton(
-                    icon: Icon(_controller.isAnimating
-                        ? Icons.stop
-                        : Icons.play_arrow),
-                    onPressed: () {
-                      setState(() {
-                        if (_controller.isAnimating) {
-                          _controller.stop();
-                        } else {
-                          _controller.repeat();
-                        }
-                      });
-                    },
-                  ),
-                ],
-              ),
-            ),
           ],
         ),
       ),

example/lib/main_app.dart

@@ -0,0 +1,160 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:logging/logging.dart';
+import 'package:lottie/lottie.dart';
+import 'src/all_files.g.dart';
+
+void main() {
+  Logger.root
+    ..level = Level.ALL
+    ..onRecord.listen(print);
+  Lottie.traceEnabled = true;
+  runApp(App());
+}
+
+class App extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      //showPerformanceOverlay: true,
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Lottie Flutter'),
+        ),
+        body: GridView.builder(
+          itemCount: files.length,
+          gridDelegate:
+              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
+          itemBuilder: (context, index) {
+            var assetName = files[index];
+            return GestureDetector(
+              child: _Item(
+                child: Lottie.asset(
+                  assetName,
+                  frameBuilder: (context, child, composition) {
+                    return AnimatedOpacity(
+                      child: child,
+                      opacity: composition == null ? 0 : 1,
+                      duration: const Duration(seconds: 1),
+                      curve: Curves.easeOut,
+                    );
+                  },
+                ),
+              ),
+              onTap: () {
+                Navigator.of(context).push(MaterialPageRoute<void>(
+                    builder: (context) => Detail(assetName)));
+              },
+            );
+          },
+        ),
+      ),
+    );
+  }
+}
+
+class _Item extends StatelessWidget {
+  final Widget child;
+
+  const _Item({Key key, this.child}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Container(
+        decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.all(Radius.circular(10)),
+            boxShadow: [
+              BoxShadow(
+                  color: Colors.black.withOpacity(0.1),
+                  offset: Offset(2, 2),
+                  blurRadius: 5)
+            ]),
+        child: child,
+      ),
+    );
+  }
+}
+
+class Detail extends StatefulWidget {
+  final String assetName;
+
+  const Detail(this.assetName, {Key key}) : super(key: key);
+
+  @override
+  _DetailState createState() => _DetailState();
+}
+
+class _DetailState extends State<Detail> with TickerProviderStateMixin {
+  AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(vsync: this);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('${widget.assetName}'),
+      ),
+      body: SingleChildScrollView(
+        child: Column(
+          children: [
+            Center(
+              child: Lottie.asset(
+                widget.assetName,
+                controller: _controller,
+                onLoaded: (composition) {
+                  _controller.duration = composition.duration;
+                  _controller.repeat();
+                },
+              ),
+            ),
+            AnimatedBuilder(
+              animation: _controller,
+              builder: (context, _) => Row(
+                children: <Widget>[
+                  Expanded(
+                    child: Slider(
+                      value: _controller.value,
+                      onChanged: (newValue) {
+                        _controller.value = newValue;
+                      },
+                    ),
+                  ),
+                  IconButton(
+                    icon: Icon(_controller.isAnimating
+                        ? Icons.stop
+                        : Icons.play_arrow),
+                    onPressed: () {
+                      setState(() {
+                        if (_controller.isAnimating) {
+                          _controller.stop();
+                        } else {
+                          _controller.repeat();
+                        }
+                      });
+                    },
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/macos/Podfile.lock

@@ -5,13 +5,13 @@ PODS:
     - FlutterMacOS
 
 DEPENDENCIES:
-  - FlutterMacOS (from `Flutter/ephemeral/.symlinks/flutter/darwin-x64`)
+  - FlutterMacOS (from `Flutter/ephemeral/.symlinks/flutter/darwin-x64-profile`)
   - path_provider (from `Flutter/ephemeral/.symlinks/plugins/path_provider/macos`)
   - path_provider_macos (from `Flutter/ephemeral/.symlinks/plugins/path_provider_macos/macos`)
 
 EXTERNAL SOURCES:
   FlutterMacOS:
-    :path: Flutter/ephemeral/.symlinks/flutter/darwin-x64
+    :path: Flutter/ephemeral/.symlinks/flutter/darwin-x64-profile
   path_provider:
     :path: Flutter/ephemeral/.symlinks/plugins/path_provider/macos
   path_provider_macos:

example/pubspec.lock

@@ -21,7 +21,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.4.1"
+    version: "2.4.2"
   boolean_selector:
     dependency: transitive
     description:
@@ -56,7 +56,7 @@ packages:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.14.12"
+    version: "1.14.13"
   convert:
     dependency: transitive
     description:
@@ -84,7 +84,7 @@ packages:
       name: file
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "5.1.0"
+    version: "5.2.1"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -108,14 +108,14 @@ packages:
       name: golden_toolkit
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.0"
+    version: "0.6.0"
   http:
     dependency: "direct main"
     description:
       name: http
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.1"
+    version: "0.12.2"
   http_parser:
     dependency: transitive
     description:
@@ -143,14 +143,14 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.4.0+1"
+    version: "0.6.0"
   matcher:
     dependency: transitive
     description:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.6"
+    version: "0.12.8"
   meta:
     dependency: transitive
     description:
@@ -171,14 +171,14 @@ packages:
       name: path_provider
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.6.10"
+    version: "1.6.14"
   path_provider_linux:
     dependency: transitive
     description:
       name: path_provider_linux
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.0.1+1"
+    version: "0.0.1+2"
   path_provider_macos:
     dependency: transitive
     description:
@@ -192,7 +192,7 @@ packages:
       name: path_provider_platform_interface
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.2"
+    version: "1.0.3"
   pedantic:
     dependency: transitive
     description:
@@ -239,7 +239,7 @@ packages:
       name: stack_trace
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.9.3"
+    version: "1.9.5"
   stream_channel:
     dependency: transitive
     description:
@@ -267,14 +267,14 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.15"
+    version: "0.2.17"
   typed_data:
     dependency: transitive
     description:
       name: typed_data
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.6"
+    version: "1.2.0"
   vector_math:
     dependency: transitive
     description:
@@ -290,5 +290,5 @@ packages:
     source: hosted
     version: "0.1.0"
 sdks:
-  dart: ">=2.7.0 <3.0.0"
+  dart: ">=2.9.0-14.0.dev <3.0.0"
   flutter: ">=1.12.13+hotfix.5 <2.0.0"

example/pubspec.yaml

@@ -34,7 +34,7 @@ flutter:
     - assets/Logo/
     - assets/Images/
     - assets/Images/WeAccept/
-    - assets/Weather/
+    - assets/weather/
     - assets/example_with_images/
     - assets/example_with_images/images/
 

example/test/dynamic_properties_test.dart

@@ -33,6 +33,7 @@ void main() {
           composition: composition,
           controller: animation,
           delegates: LottieDelegates(values: [delegate]),
+          addRepaintBoundary: false,
         ),
       );
       await tester.pump();
@@ -45,6 +46,7 @@ void main() {
             composition: composition,
             controller: animation,
             delegates: LottieDelegates(values: []),
+            addRepaintBoundary: false,
           ),
         );
         await tester.pump();