Add FrameRate and improve performance (#93)

- Run the animation at the exported frame rate
- Wrap the animation in a RepaintBoundary
- Don't paint during "static" periods

CHANGELOG.md

@@ -1,3 +1,21 @@
+## [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 
 

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:
@@ -35,7 +35,7 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.0"
+    version: "1.1.0-nullsafety"
   charcode:
     dependency: transitive
     description:
@@ -56,7 +56,7 @@ packages:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.14.12"
+    version: "1.15.0-nullsafety"
   convert:
     dependency: transitive
     description:
@@ -108,14 +108,14 @@ packages:
       name: golden_toolkit
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.5.1"
+    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,21 +143,21 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.4.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:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.8"
+    version: "1.3.0-nullsafety"
   path:
     dependency: transitive
     description:
@@ -199,7 +199,7 @@ packages:
       name: pedantic
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.9.0"
+    version: "1.9.2"
   platform:
     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,21 +267,21 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.16"
+    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.3.0-nullsafety"
   vector_math:
     dependency: transitive
     description:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.8"
+    version: "2.1.0-nullsafety"
   xdg_directories:
     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-18.0 <2.9.0"
   flutter: ">=1.12.13+hotfix.5 <2.0.0"

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();