Support latest version of the characters package (#76)

And add an example to play the animation between 2 markers

CHANGELOG.md

@@ -1,3 +1,25 @@
+## [0.4.0+1]
+- Support latest version of the `characters` package
+
+## [0.4.0]
+- Disable "Merge paths" by default and provide an option to enable them.  
+This is the same behavior as in Lottie-android.  
+Merge paths currently don't work if the the operand shape is entirely contained within the
+first shape. If you need to cut out one shape from another shape, use an even-odd fill type
+instead of using merge paths.
+
+Merge paths can be enabled with:
+```dart
+Lottie.asset('file.json', options: LottieOptions(enableMergePaths: true));
+```
+
+
+## [0.3.6]
+- Export the `Marker` class
+
+## [0.3.5]
+- Fix a bug with a wrongly clipped rectangle. 
+
 ## [0.3.4]
 - Fix a bug with dashed path
 

example/assets/example_with_images/data.json

@@ -0,0 +1,833 @@
+{
+  "v": "5.6.9",
+  "fr": 25,
+  "ip": 0,
+  "op": 75,
+  "w": 1200,
+  "h": 1200,
+  "nm": "Character-side v1",
+  "ddd": 0,
+  "assets": [
+    {
+      "id": "image_0",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_0.png",
+      "e": 0
+    },
+    {
+      "id": "image_1",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_1.png",
+      "e": 0
+    },
+    {
+      "id": "image_2",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_2.png",
+      "e": 0
+    },
+    {
+      "id": "image_3",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_3.png",
+      "e": 0
+    },
+    {
+      "id": "image_4",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_4.png",
+      "e": 0
+    },
+    {
+      "id": "image_5",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_5.png",
+      "e": 0
+    },
+    {
+      "id": "image_6",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_6.png",
+      "e": 0
+    },
+    {
+      "id": "image_7",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_7.png",
+      "e": 0
+    },
+    {
+      "id": "image_8",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_8.png",
+      "e": 0
+    },
+    {
+      "id": "image_9",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_9.png",
+      "e": 0
+    }
+  ],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 2,
+      "ty": 2,
+      "nm": "F ARM Up",
+      "parent": 8,
+      "refId": "image_0",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 1,
+          "k": [
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 0,
+              "s": [
+                0
+              ]
+            },
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 25,
+              "s": [
+                67
+              ]
+            },
+            {
+              "t": 50,
+              "s": [
+                0
+              ]
+            }
+          ],
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            623.019,
+            296.734,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            623.019,
+            296.734,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 3,
+      "ty": 2,
+      "nm": "F ARM Low",
+      "parent": 2,
+      "refId": "image_1",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 1,
+          "k": [
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 0,
+              "s": [
+                43
+              ]
+            },
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 25,
+              "s": [
+                0
+              ]
+            },
+            {
+              "t": 50,
+              "s": [
+                43
+              ]
+            }
+          ],
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            623.019,
+            439.113,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            623.019,
+            439.113,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 4,
+      "ty": 2,
+      "nm": "F Hand",
+      "parent": 3,
+      "refId": "image_2",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 1,
+          "k": [
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 0,
+              "s": [
+                41
+              ]
+            },
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 25,
+              "s": [
+                0
+              ]
+            },
+            {
+              "t": 50,
+              "s": [
+                41
+              ]
+            }
+          ],
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            623.019,
+            584.501,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            623.019,
+            584.501,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 5,
+      "ty": 2,
+      "nm": "F LEG Up",
+      "refId": "image_3",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 90,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            604.854,
+            589.662,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            604.854,
+            589.662,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 6,
+      "ty": 2,
+      "nm": "F LEG Low",
+      "parent": 5,
+      "refId": "image_4",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": -90,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            608.016,
+            829.202,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            608.016,
+            829.202,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 7,
+      "ty": 2,
+      "nm": "F Foot",
+      "parent": 6,
+      "refId": "image_5",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 0,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            608.863,
+            1058.742,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            608.863,
+            1058.742,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 8,
+      "ty": 2,
+      "nm": "Body",
+      "parent": 11,
+      "refId": "image_6",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 0,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            605.434,
+            468.468,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            605.434,
+            468.468,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 9,
+      "ty": 2,
+      "nm": "Head",
+      "parent": 8,
+      "refId": "image_7",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 0,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            623.019,
+            263.511,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            623.019,
+            263.511,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 10,
+      "ty": 2,
+      "nm": "Hair",
+      "parent": 9,
+      "refId": "image_8",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 0,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            600,
+            600,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            600,
+            600,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 11,
+      "ty": 2,
+      "nm": "Waist",
+      "refId": "image_9",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 1,
+          "k": [
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 0,
+              "s": [
+                0
+              ]
+            },
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 25,
+              "s": [
+                -70
+              ]
+            },
+            {
+              "t": 50,
+              "s": [
+                0
+              ]
+            }
+          ],
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            604.854,
+            589.662,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            604.854,
+            589.662,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    }
+  ],
+  "markers": [
+    {
+      "tm": 25,
+      "cm": "9",
+      "dr": 0
+    }
+  ]
+}

example/assets/example_with_images/images/img_0.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFA913;}
+</style>
+<path class="st0" d="M641.59,439.11l7.69-142.38c0-14.5-11.76-26.26-26.26-26.26c-14.5,0-26.26,11.76-26.26,26.26l7.69,142.38
+	c0,10.26,8.31,18.57,18.57,18.57C633.28,457.68,641.59,449.37,641.59,439.11z"/>
+</svg>

example/lib/examples/animate_no_repeat.dart

@@ -5,23 +5,15 @@ void main() async {
   runApp(App());
 }
 
-class App extends StatefulWidget {
+class App extends StatelessWidget {
   const App({Key key}) : super(key: key);
 
-  @override
-  _AppState createState() => _AppState();
-}
-
-class _AppState extends State<App> with TickerProviderStateMixin {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       color: Colors.lightBlue,
       home: Scaffold(
         backgroundColor: Colors.lightBlue,
-        appBar: AppBar(
-          title: Text(''),
-        ),
         body: Center(
           child: SizedBox(
             width: 300,

example/lib/examples/markers.dart

@@ -0,0 +1,122 @@
+import 'package:flutter/material.dart';
+import 'package:lottie/lottie.dart';
+
+/// This example shows how to play the animation between two markers.
+/// It is based on this article for lottie-ios:
+/// https://medium.com/swlh/controlling-lottie-animation-with-markers-5e9035d94623
+void main() async {
+  runApp(App());
+}
+
+class App extends StatefulWidget {
+  const App({Key key}) : super(key: key);
+
+  @override
+  _AppState createState() => _AppState();
+}
+
+class _AppState extends State<App> with TickerProviderStateMixin {
+  Future<LottieComposition> _composition;
+
+  @override
+  void initState() {
+    super.initState();
+    _composition = AssetLottie('assets/TwitterHeartButton.json').load();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      theme: ThemeData.dark(),
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Markers'),
+        ),
+        body: FutureBuilder<LottieComposition>(
+          future: _composition,
+          builder: (context, snapshot) {
+            if (snapshot.hasError) return ErrorWidget(snapshot.error);
+            if (!snapshot.hasData) return CircularProgressIndicator();
+            return _LottieDetails(snapshot.data);
+          },
+        ),
+      ),
+    );
+  }
+}
+
+class _LottieDetails extends StatefulWidget {
+  final LottieComposition composition;
+
+  const _LottieDetails(this.composition, {Key key}) : super(key: key);
+
+  @override
+  _LottieDetailsState createState() => _LottieDetailsState();
+}
+
+class _LottieDetailsState extends State<_LottieDetails>
+    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 ListView(
+      children: [
+        Lottie(
+          composition: widget.composition,
+          controller: _controller,
+          height: 150,
+        ),
+        ListTile(
+          title: Text('Composition start frame'),
+          trailing: Text(widget.composition.startFrame.toStringAsFixed(1)),
+        ),
+        ListTile(
+          title: Text('Composition duration'),
+          trailing: Text(widget.composition.durationFrames.toStringAsFixed(1)),
+        ),
+        RaisedButton(
+          child: Text('touchDownEnd - touchUpCancel'),
+          onPressed: () => _playBetween('touchDownEnd', 'touchUpCancel'),
+        ),
+        RaisedButton(
+          child: Text('touchDownStart - touchDownEnd'),
+          onPressed: () => _playBetween('touchDownStart', 'touchDownEnd'),
+        ),
+        RaisedButton(
+          child: Text('touchDownEnd - touchUpEnd'),
+          onPressed: () => _playBetween('touchDownEnd', 'touchUpEnd'),
+        ),
+        for (var marker in widget.composition.markers)
+          ListTile(
+            title: Text(marker.name),
+            subtitle: Text(
+                '${marker.startFrame.toStringAsFixed(1)} ${marker.durationFrames.toStringAsFixed(1)}'),
+            trailing: Text(
+                '[${marker.start.toStringAsFixed(2)}-${marker.end.toStringAsFixed(2)}]'),
+          ),
+      ],
+    );
+  }
+
+  void _playBetween(String marker1, String marker2) {
+    var start = widget.composition.getMarker(marker1).start;
+    var end = widget.composition.getMarker(marker2).start;
+
+    _controller.value = start;
+    _controller.animateTo(end,
+        duration: widget.composition.duration * (end - start).abs());
+  }
+}

example/lib/src/all_files.g.dart

@@ -1,6 +1,7 @@
 // Generated from tool/generate_file_list.dart
 final files = [
   'assets/14595-thumbs-up.json',
+  'assets/17297-fireworks.json',
   'assets/AndroidWave.json',
   'assets/DynamicGradient.json',
   'assets/HamburgerArrow.json',
@@ -106,6 +107,10 @@ final files = [
   'assets/Tests/dalek_converted.json',
   'assets/Tests/hd.json',
   'assets/Tests/map.zip',
+  'assets/TwitterHeartButton.json',
+  'assets/_loading_indicator.json',
+  'assets/bluetoothscanning.json',
+  'assets/example_with_images/data.json',
   'assets/lf20_w2Afea.json',
   'assets/lottiefiles/100_percent.json',
   'assets/lottiefiles/Plane.json',
@@ -340,4 +345,11 @@ final files = [
   'assets/lottiefiles/xuanwheel_logo.json',
   'assets/lottiefiles/yoga_carpet.json',
   'assets/lottiefiles/youtube_icon_reveal.json',
+  'assets/playing.json',
+  'assets/weather/_hurricane.json',
+  'assets/weather/fog.json',
+  'assets/weather/hurricane.json',
+  'assets/weather/thunder-storm.json',
+  'assets/weather/tornado.json',
+  'assets/weather/windy.json',
 ];

example/macos/Podfile.lock

@@ -20,7 +20,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   FlutterMacOS: 15bea8a44d2fa024068daa0140371c020b4b6ff9
   path_provider: e0848572d1d38b9a7dd099e79cf83f5b7e2cde9f
-  path_provider_macos: adb94ae6c253c45ef2aac146fbf1f4504d74b0f8
+  path_provider_macos: a0a3fd666cb7cd0448e936fb4abad4052961002b
 
 PODFILE CHECKSUM: d8ba9b3e9e93c62c74a660b46c6fcb09f03991a7
 

example/pubspec.lock

@@ -35,7 +35,7 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.5.0"
+    version: "1.0.0"
   charcode:
     dependency: transitive
     description:
@@ -43,6 +43,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.1.3"
+  clock:
+    dependency: transitive
+    description:
+      name: clock
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.1"
   collection:
     dependency: transitive
     description:
@@ -63,7 +70,21 @@ packages:
       name: crypto
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.4"
+    version: "2.1.5"
+  fake_async:
+    dependency: transitive
+    description:
+      name: fake_async
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
+  file:
+    dependency: transitive
+    description:
+      name: file
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.1.0"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -87,7 +108,7 @@ packages:
       name: golden_toolkit
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.3.2"
+    version: "0.4.0"
   http:
     dependency: "direct main"
     description:
@@ -102,13 +123,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.1.4"
-  image:
+  intl:
     dependency: transitive
     description:
-      name: image
+      name: intl
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.12"
+    version: "0.16.1"
   logging:
     dependency: transitive
     description:
@@ -122,7 +143,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.3.4"
+    version: "0.4.0+1"
   matcher:
     dependency: transitive
     description:
@@ -143,21 +164,28 @@ packages:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.6.4"
+    version: "1.7.0"
   path_provider:
     dependency: "direct main"
     description:
       name: path_provider
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.6.8"
+    version: "1.6.10"
+  path_provider_linux:
+    dependency: transitive
+    description:
+      name: path_provider_linux
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.0.1+1"
   path_provider_macos:
     dependency: transitive
     description:
       name: path_provider_macos
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.0.4+2"
+    version: "0.0.4+3"
   path_provider_platform_interface:
     dependency: transitive
     description:
@@ -172,13 +200,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.9.0"
-  petitparser:
-    dependency: transitive
-    description:
-      name: petitparser
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.4.0"
   platform:
     dependency: transitive
     description:
@@ -193,13 +214,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.2"
-  quiver:
+  process:
     dependency: transitive
     description:
-      name: quiver
+      name: process
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.3"
+    version: "3.0.13"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -261,13 +282,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.8"
-  xml:
+  xdg_directories:
     dependency: transitive
     description:
-      name: xml
+      name: xdg_directories
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.6.1"
+    version: "0.1.0"
 sdks:
   dart: ">=2.7.0 <3.0.0"
   flutter: ">=1.12.13+hotfix.5 <2.0.0"

example/pubspec.yaml

@@ -35,6 +35,8 @@ flutter:
     - assets/Images/
     - assets/Images/WeAccept/
     - assets/Weather/
+    - assets/example_with_images/
+    - assets/example_with_images/images/
 
   fonts:
     - family: Comic Neue

lib/lottie.dart

@@ -4,6 +4,8 @@ export 'src/lottie_builder.dart' show LottieBuilder;
 export 'src/lottie_delegates.dart' show LottieDelegates;
 export 'src/lottie_drawable.dart' show LottieDrawable, LottieFontStyle;
 export 'src/lottie_image_asset.dart' show LottieImageAsset;
+export 'src/model/marker.dart' show Marker;
+export 'src/options.dart' show LottieOptions;
 export 'src/providers/asset_provider.dart' show AssetLottie;
 export 'src/providers/file_provider.dart' show FileLottie;
 export 'src/providers/lottie_provider.dart' show LottieProvider;

lib/src/lottie.dart

@@ -5,6 +5,7 @@ import 'package:flutter/widgets.dart';
 import '../lottie.dart';
 import 'l.dart';
 import 'lottie_builder.dart';
+import 'options.dart';
 import 'providers/load_image.dart';
 
 /// A widget to display a loaded [LottieComposition].
@@ -25,6 +26,7 @@ class Lottie extends StatefulWidget {
     bool repeat,
     bool reverse,
     this.delegates,
+    this.options,
   })  : animate = animate ?? true,
         reverse = reverse ?? false,
         repeat = repeat ?? true,
@@ -37,6 +39,7 @@ class Lottie extends StatefulWidget {
           bool repeat,
           bool reverse,
           LottieDelegates delegates,
+          LottieOptions options,
           void Function(LottieComposition) onLoaded,
           LottieImageProviderFactory imageProviderFactory,
           Key key,
@@ -54,6 +57,7 @@ class Lottie extends StatefulWidget {
         repeat: repeat,
         reverse: reverse,
         delegates: delegates,
+        options: options,
         imageProviderFactory: imageProviderFactory,
         onLoaded: onLoaded,
         key: key,
@@ -74,6 +78,7 @@ class Lottie extends StatefulWidget {
     bool repeat,
     bool reverse,
     LottieDelegates delegates,
+    LottieOptions options,
     LottieImageProviderFactory imageProviderFactory,
     void Function(LottieComposition) onLoaded,
     Key key,
@@ -90,6 +95,7 @@ class Lottie extends StatefulWidget {
         repeat: repeat,
         reverse: reverse,
         delegates: delegates,
+        options: options,
         imageProviderFactory: imageProviderFactory,
         onLoaded: onLoaded,
         key: key,
@@ -108,6 +114,7 @@ class Lottie extends StatefulWidget {
     bool repeat,
     bool reverse,
     LottieDelegates delegates,
+    LottieOptions options,
     LottieImageProviderFactory imageProviderFactory,
     void Function(LottieComposition) onLoaded,
     Key key,
@@ -124,6 +131,7 @@ class Lottie extends StatefulWidget {
         repeat: repeat,
         reverse: reverse,
         delegates: delegates,
+        options: options,
         imageProviderFactory: imageProviderFactory,
         onLoaded: onLoaded,
         key: key,
@@ -142,6 +150,7 @@ class Lottie extends StatefulWidget {
     bool repeat,
     bool reverse,
     LottieDelegates delegates,
+    LottieOptions options,
     LottieImageProviderFactory imageProviderFactory,
     void Function(LottieComposition) onLoaded,
     Key key,
@@ -158,6 +167,7 @@ class Lottie extends StatefulWidget {
         repeat: repeat,
         reverse: reverse,
         delegates: delegates,
+        options: options,
         imageProviderFactory: imageProviderFactory,
         onLoaded: onLoaded,
         key: key,
@@ -229,13 +239,17 @@ class Lottie extends StatefulWidget {
   ///    relative to text direction.
   final AlignmentGeometry alignment;
 
-  /// A group of options to further customize the lottie animation.
+  /// A group of callbacks to further customize the lottie animation.
   /// - A [text] delegate to dynamically change some text displayed in the animation
   /// - A value callback to change the properties of the animation at runtime.
   /// - A text style factory to map between a font family specified in the animation
   ///   and the font family in your assets.
   final LottieDelegates delegates;
 
+  /// Some options to enable/disable some feature of Lottie
+  /// - enableMergePaths: Enable merge path support
+  final LottieOptions options;
+
   static bool get traceEnabled => L.traceEnabled;
   static set traceEnabled(bool enabled) {
     L.traceEnabled = enabled;
@@ -295,6 +309,7 @@ class _LottieState extends State<Lottie> with TickerProviderStateMixin {
       builder: (context, _) => RawLottie(
         composition: widget.composition,
         delegates: widget.delegates,
+        options: widget.options,
         progress: _progressAnimation.value,
         width: widget.width,
         height: widget.height,

lib/src/lottie_builder.dart

@@ -40,6 +40,7 @@ class LottieBuilder extends StatefulWidget {
     this.reverse,
     this.repeat,
     this.delegates,
+    this.options,
     this.onLoaded,
     this.frameBuilder,
     this.width,
@@ -58,6 +59,7 @@ class LottieBuilder extends StatefulWidget {
     this.reverse,
     this.repeat,
     this.delegates,
+    this.options,
     LottieImageProviderFactory imageProviderFactory,
     this.onLoaded,
     Key key,
@@ -87,6 +89,7 @@ class LottieBuilder extends StatefulWidget {
     this.reverse,
     this.repeat,
     this.delegates,
+    this.options,
     LottieImageProviderFactory imageProviderFactory,
     this.onLoaded,
     Key key,
@@ -106,6 +109,7 @@ class LottieBuilder extends StatefulWidget {
     this.reverse,
     this.repeat,
     this.delegates,
+    this.options,
     LottieImageProviderFactory imageProviderFactory,
     this.onLoaded,
     Key key,
@@ -130,6 +134,7 @@ class LottieBuilder extends StatefulWidget {
     this.reverse,
     this.repeat,
     this.delegates,
+    this.options,
     LottieImageProviderFactory imageProviderFactory,
     this.onLoaded,
     Key key,
@@ -180,6 +185,10 @@ class LottieBuilder extends StatefulWidget {
   ///   and the font family in your assets.
   final LottieDelegates delegates;
 
+  /// Some options to enable/disable some feature of Lottie
+  /// - enableMergePaths: Enable merge path support
+  final LottieOptions options;
+
   /// A builder function responsible for creating the widget that represents
   /// this lottie animation.
   ///
@@ -379,6 +388,7 @@ class _LottieBuilderState extends State<LottieBuilder> {
           reverse: widget.reverse,
           repeat: widget.repeat,
           delegates: widget.delegates,
+          options: widget.options,
           width: widget.width,
           height: widget.height,
           fit: widget.fit,

lib/src/lottie_drawable.dart

@@ -15,10 +15,13 @@ class LottieDrawable {
   final Size size;
   LottieDelegates _delegates;
   bool _isDirty = true;
+  final bool enableMergePaths;
 
-  LottieDrawable(this.composition, {LottieDelegates delegates})
+  LottieDrawable(this.composition,
+      {LottieDelegates delegates, bool enableMergePaths})
       : size = Size(composition.bounds.width.toDouble(),
-            composition.bounds.height.toDouble()) {
+            composition.bounds.height.toDouble()),
+        enableMergePaths = enableMergePaths ?? false {
     this.delegates = delegates;
     _compositionLayer = CompositionLayer(
         this, LayerParser.parse(composition), composition.layers, composition);

lib/src/model/content/merge_paths.dart

@@ -1,5 +1,6 @@
 import '../../animation/content/content.dart';
 import '../../animation/content/merge_paths_content.dart';
+import '../../logger.dart';
 import '../../lottie_drawable.dart';
 import '../layer/base_layer.dart';
 import 'content_model.dart';
@@ -15,6 +16,10 @@ class MergePaths implements ContentModel {
 
   @override
   Content /*?*/ toContent(LottieDrawable drawable, BaseLayer layer) {
+    if (!drawable.enableMergePaths) {
+      logger.warning('Animation contains merge paths but they are disabled.');
+      return null;
+    }
     return MergePathsContent(this);
   }
 

lib/src/model/marker.dart

@@ -1,26 +1,23 @@
 import 'package:meta/meta.dart';
+import '../../lottie.dart';
 
 class Marker {
-  static const String _carriageReturn = '\r';
+  final LottieComposition _composition;
-
   final String name;
   final double startFrame;
   final double durationFrames;
 
-  Marker(this.name, {@required this.startFrame, @required this.durationFrames});
+  Marker(this._composition, this.name,
+      {@required this.startFrame, @required this.durationFrames});
 
   bool matchesName(String name) {
-    if (this.name.toLowerCase() == name.toLowerCase()) {
+    return this.name.trim().toLowerCase() == name.toLowerCase();
-      return true;
   }
 
-    // It is easy for a designer to accidentally include an extra newline which will cause the name to not match what they would
+  double get start =>
-    // expect. This is a convenience to precent unneccesary confusion.
+      (startFrame - _composition.startFrame) / _composition.durationFrames;
-    if (this.name.endsWith(_carriageReturn) &&
+
-        this.name.substring(0, this.name.length - 1).toLowerCase() ==
+  double get end =>
-            name.toLowerCase()) {
+      (startFrame + durationFrames - _composition.startFrame) /
-      return true;
+      _composition.durationFrames;
-    }
-    return false;
-  }
 }

lib/src/options.dart

@@ -0,0 +1,11 @@
+class LottieOptions {
+  /// Enable merge path support.
+  ///
+  /// Merge paths currently don't work if the the operand shape is entirely contained within the
+  /// first shape. If you need to cut out one shape from another shape, use an even-odd fill type
+  /// instead of using merge paths.
+  final bool enableMergePaths;
+
+  LottieOptions({bool enableMergePaths})
+      : enableMergePaths = enableMergePaths ?? false;
+}

lib/src/parser/content_model_parser.dart

@@ -85,6 +85,8 @@ class ContentModelParser {
         break;
       case 'mm':
         model = MergePathsParser.parse(reader);
+        composition.addWarning('Animation contains merge paths. '
+            'Merge paths must be manually enabled by settings enableMergePaths.');
         break;
       case 'rp':
         model = RepeaterParser.parse(reader, composition);

lib/src/parser/layer_parser.dart

@@ -122,6 +122,7 @@ class LayerParser {
           if (layerTypeInt < LayerType.unknown.index) {
             layerType = LayerType.values[layerTypeInt];
           } else {
+            print('Unknown $layerTypeInt');
             layerType = LayerType.unknown;
           }
           break;

lib/src/parser/lottie_composition_parser.dart

@@ -254,8 +254,8 @@ class LottieCompositionParser {
         }
       }
       reader.endObject();
-      markers.add(
+      markers.add(Marker(composition, comment,
-          Marker(comment, startFrame: frame, durationFrames: durationFrames));
+          startFrame: frame, durationFrames: durationFrames));
     }
     reader.endArray();
   }

lib/src/raw_lottie.dart

@@ -13,6 +13,7 @@ class RawLottie extends LeafRenderObjectWidget {
     Key key,
     this.composition,
     this.delegates,
+    this.options,
     double progress,
     this.width,
     this.height,
@@ -28,6 +29,8 @@ class RawLottie extends LeafRenderObjectWidget {
   /// Allows to modify the Lottie animation at runtime
   final LottieDelegates delegates;
 
+  final LottieOptions options;
+
   /// The progress of the Lottie animation (between 0.0 and 1.0).
   final double progress;
 
@@ -71,6 +74,7 @@ class RawLottie extends LeafRenderObjectWidget {
     return RenderLottie(
       composition: composition,
       delegates: delegates,
+      enableMergePaths: options?.enableMergePaths,
       progress: progress,
       width: width,
       height: height,
@@ -82,7 +86,10 @@ class RawLottie extends LeafRenderObjectWidget {
   @override
   void updateRenderObject(BuildContext context, RenderLottie renderObject) {
     renderObject
-      ..setComposition(composition, progress: progress, delegates: delegates)
+      ..setComposition(composition,
+          progress: progress,
+          delegates: delegates,
+          enableMergePaths: options?.enableMergePaths)
       ..width = width
       ..height = height
       ..alignment = alignment

lib/src/render_lottie.dart

@@ -11,6 +11,7 @@ class RenderLottie extends RenderBox {
   RenderLottie({
     LottieComposition composition,
     LottieDelegates delegates,
+    bool enableMergePaths,
     double progress = 0.0,
     double width,
     double height,
@@ -19,7 +20,7 @@ class RenderLottie extends RenderBox {
   })  : assert(alignment != null),
         assert(progress != null && progress >= 0.0 && progress <= 1.0),
         _drawable = composition != null
-            ? (LottieDrawable(composition)
+            ? (LottieDrawable(composition, enableMergePaths: enableMergePaths)
               ..setProgress(progress)
               ..delegates = delegates)
             : null,
@@ -32,7 +33,11 @@ class RenderLottie extends RenderBox {
   LottieComposition get composition => _drawable?.composition;
   LottieDrawable _drawable;
   void setComposition(LottieComposition composition,
-      {@required double progress, @required LottieDelegates delegates}) {
+      {@required double progress,
+      @required LottieDelegates delegates,
+      bool enableMergePaths}) {
+    enableMergePaths ??= false;
+
     var needsLayout = false;
     var needsPaint = false;
     if (composition == null) {
@@ -40,8 +45,11 @@ class RenderLottie extends RenderBox {
       needsPaint = true;
       needsLayout = true;
     } else {
-      if (_drawable?.composition != composition) {
+      if (_drawable == null ||
-        _drawable = LottieDrawable(composition);
+          _drawable.composition != composition ||
+          _drawable.enableMergePaths != enableMergePaths) {
+        _drawable =
+            LottieDrawable(composition, enableMergePaths: enableMergePaths);
         needsLayout = true;
         needsPaint = true;
       }

lib/src/utils.dart

@@ -34,28 +34,20 @@ extension Matrix4Extension on Matrix4 {
   }
 
   Rect mapRect(Rect rect) {
-    var topLeft = Vector3(rect.left, rect.top, 0.0)..applyMatrix4(this);
+    return MatrixUtils.transformRect(this, rect);
-    var topRight = Vector3(rect.right, rect.top, 0.0)..applyMatrix4(this);
-    var bottomLeft = Vector3(rect.left, rect.bottom, 0.0)..applyMatrix4(this);
-    var bottomRight = Vector3(rect.right, rect.bottom, 0.0)..applyMatrix4(this);
-
-    var newLeft = min(topLeft.x, bottomLeft.x);
-    var newTop = min(topLeft.y, topRight.y);
-    var newRight = max(topRight.x, bottomRight.x);
-    var newBottom = max(bottomLeft.y, bottomRight.y);
-
-    return Rect.fromLTRB(newLeft, newTop, newRight, newBottom);
   }
 
   /// Apply this matrix to the array of 2D points, and write the transformed points back into the
   /// array
   ///
   /// @param pts The array [x0, y0, x1, y1, ...] of points to transform.
-  void mapPoints(List<double> array, [int offset]) {
+  void mapPoints(List<double> array) {
     for (var i = 0; i < array.length; i += 2) {
-      final v = Vector3(array[i], array[i + 1], 0.0)..applyMatrix4(this);
+      final v =
-      array[i] = v.storage[0];
+          MatrixUtils.transformPoint(this, Offset(array[i], array[i + 1]));
-      array[i + 1] = v.storage[1];
+
+      array[i] = v.dx;
+      array[i + 1] = v.dy;
     }
   }
 

pubspec.lock

@@ -7,14 +7,14 @@ packages:
       name: _fe_analyzer_shared
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.0.0"
+    version: "4.0.0"
   analyzer:
     dependency: "direct dev"
     description:
       name: analyzer
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.39.8"
+    version: "0.39.10"
   archive:
     dependency: "direct main"
     description:
@@ -49,7 +49,7 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.5.0"
+    version: "1.0.0"
   charcode:
     dependency: "direct main"
     description:
@@ -57,6 +57,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.1.3"
+  clock:
+    dependency: transitive
+    description:
+      name: clock
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.1"
   collection:
     dependency: "direct main"
     description:
@@ -77,7 +84,7 @@ packages:
       name: crypto
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.4"
+    version: "2.1.5"
   csslib:
     dependency: transitive
     description:
@@ -92,6 +99,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.3.6"
+  fake_async:
+    dependency: transitive
+    description:
+      name: fake_async
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -116,20 +130,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.14.0+3"
-  image:
-    dependency: transitive
-    description:
-      name: image
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.1.12"
   js:
     dependency: transitive
     description:
       name: js
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.6.1+1"
+    version: "0.6.2"
   logging:
     dependency: "direct main"
     description:
@@ -185,7 +192,7 @@ packages:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.6.4"
+    version: "1.7.0"
   pedantic:
     dependency: transitive
     description:
@@ -193,13 +200,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.9.0"
-  petitparser:
-    dependency: transitive
-    description:
-      name: petitparser
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.4.0"
   pub_semver:
     dependency: transitive
     description:
@@ -207,13 +207,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.4.4"
-  quiver:
-    dependency: transitive
-    description:
-      name: quiver
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.1.3"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -282,13 +275,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.9.7+15"
-  xml:
-    dependency: transitive
-    description:
-      name: xml
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "3.6.1"
   yaml:
     dependency: "direct dev"
     description:

pubspec.yaml

@@ -1,6 +1,6 @@
 name: lottie
 description: Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.
-version: 0.3.4
+version: 0.4.0+1
 homepage: https://github.com/xvrh/lottie-flutter
 
 environment:
@@ -10,7 +10,7 @@ dependencies:
   flutter:
     sdk: flutter
   archive: ^2.0.0
-  characters: ^0.5.0
+  characters: '>=0.5.0 <2.0.0'
   charcode: ^1.0.0
   collection: ^1.14.0
   logging: ^0.11.0