Prepare version 0.3.3 (#37)

CHANGELOG.md

@@ -1,44 +1,50 @@
-## [0.3.1] - 2020-03-05
+## [0.3.3]
+- Fix a bug with rounded rectangle shape
+
+## [0.3.2]
+- Fix a bug with "repeater" content
+
+## [0.3.1]
 - Support dashed path
 
-## [0.3.0+1] - 2020-03-05
+## [0.3.0+1]
 - Specify a version range for the dependency on `characters`.
 
-## [0.3.0] - 2020-03-05
+## [0.3.0]
 - Add `LottieDelegates` a group of options to customize the lottie animation at runtime.
   ie: Dynamically modify color, position, size, text... of every elements of the animation.
 - Correctly display Linear and Radial Gradients
 - Integrate latest changes from Lottie-android
 
-## [0.2.2] - 2020-02-21
+## [0.2.2]
 - Add a [repeat] parameter to specify if the automatic animation should loop.
 - Add the [animate], [reverse], [repeat] properties on `LottieBuilder`
 - Fix bug with `onLoaded` callback when the `LottieProvider` is changed
 
-## [0.2.1] - 2020-02-11
+## [0.2.1]
 - Fix a big bug in the path transformation code. A lot more animations look correct now.
 
-## [0.2.0+1] - 2020-02-04
+## [0.2.0+1]
 - Improve readme
 - (internal) Add golden tests
 
-## [0.2.0] - 2020-02-02
+## [0.2.0]
 - Support loading the animation and its images from a zip file
 - Breaking: `LottieComposition.fromBytes` and `fromByteData` are now asynchronous.
 
-## [0.1.4] - 2020-02-02
+## [0.1.4]
 - Support images in animation
 - Basic support for text in animation (work in progress)
 
-## [0.1.3] - 2020-02-01
+## [0.1.3]
 - Support Polystar shape
 - Reorganize examples.
 
-## [0.1.2] - 2020-01-31
+## [0.1.2]
 - Implement `Lottie.network`, `Lottie.file` and `Lottie.memory`
 
-## [0.1.1] - 2020-01-31
+## [0.1.1]
 - Fix analysis lints
 
-## [0.1.0] - 2020-01-31
+## [0.1.0]
 - Initial conversion of [lottie-android](https://github.com/airbnb/lottie-android) to Dart/Flutter

README.md

@@ -82,8 +82,8 @@ class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
       home: Scaffold(
         body: ListView(
           children: [
-            Lottie.network(
+            Lottie.asset(
-              'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/C.json',
+              'assets/LottieLogo1.json',
               controller: _controller,
               onLoaded: (composition) {
                 // Configure the AnimationController with the duration of the
@@ -182,14 +182,13 @@ class CustomDrawer extends StatelessWidget {
 }
 
 class _Painter extends CustomPainter {
-  final LottieComposition composition;
+  final LottieDrawable drawable;
 
-  _Painter(this.composition);
+  _Painter(LottieComposition composition)
+      : drawable = LottieDrawable(composition);
 
   @override
   void paint(Canvas canvas, Size size) {
-    var drawable = LottieDrawable(composition);
-
     var frameCount = 40;
     var columns = 10;
     for (var i = 0; i < frameCount; i++) {
@@ -219,22 +218,22 @@ class _Animation extends StatelessWidget {
     return Lottie.asset(
       'assets/Tests/Shapes.json',
       delegates: LottieDelegates(
-          text: (initialText) => translate(initialText),
+        text: (initialText) => '**$initialText**',
-          values: [
+        values: [
-            ValueDelegate.color(
+          ValueDelegate.color(
-              const ['Shape Layer 1', 'Rectangle', 'Fill 1'],
+            const ['Shape Layer 1', 'Rectangle', 'Fill 1'],
-              value: Colors.red,
+            value: Colors.red,
-            ),
+          ),
-            ValueDelegate.opacity(
+          ValueDelegate.opacity(
-              const ['Shape Layer 1', 'Rectangle'],
+            const ['Shape Layer 1', 'Rectangle'],
-              callback: (frameInfo) =>
+            callback: (frameInfo) => (frameInfo.overallProgress * 100).round(),
-                  (frameInfo.overallProgress * 100).round(),
+          ),
-            ),
+          ValueDelegate.position(
-            ValueDelegate.position(
+            const ['Shape Layer 1', 'Rectangle', '**'],
-              const ['Shape Layer 1', 'Rectangle'],
+            relative: Offset(100, 200),
-              relative: Offset(100, 200),
+          ),
-            ),
+        ],
-          ]),
+      ),
     );
   }
 }

example/lib/examples/animation_controller.dart

@@ -30,8 +30,8 @@ class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
       home: Scaffold(
         body: ListView(
           children: [
-            Lottie.network(
+            Lottie.asset(
-              'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/C.json',
+              'assets/LottieLogo1.json',
               controller: _controller,
               onLoaded: (composition) {
                 // Configure the AnimationController with the duration of the

example/lib/examples/custom_draw.dart

@@ -69,14 +69,13 @@ class CustomDrawer extends StatelessWidget {
 }
 
 class _Painter extends CustomPainter {
-  final LottieComposition composition;
+  final LottieDrawable drawable;
 
-  _Painter(this.composition);
+  _Painter(LottieComposition composition)
+      : drawable = LottieDrawable(composition);
 
   @override
   void paint(Canvas canvas, Size size) {
-    var drawable = LottieDrawable(composition);
-
     var frameCount = 40;
     var columns = 10;
     for (var i = 0; i < frameCount; i++) {

example/lib/examples/simple_dynamic_properties.dart

@@ -16,8 +16,6 @@ class MyApp extends StatelessWidget {
   }
 }
 
-String translate(String input) => '**$input**';
-
 //--- example
 class _Animation extends StatelessWidget {
   @override
@@ -25,22 +23,22 @@ class _Animation extends StatelessWidget {
     return Lottie.asset(
       'assets/Tests/Shapes.json',
       delegates: LottieDelegates(
-          text: (initialText) => translate(initialText),
+        text: (initialText) => '**$initialText**',
-          values: [
+        values: [
-            ValueDelegate.color(
+          ValueDelegate.color(
-              const ['Shape Layer 1', 'Rectangle', 'Fill 1'],
+            const ['Shape Layer 1', 'Rectangle', 'Fill 1'],
-              value: Colors.red,
+            value: Colors.red,
-            ),
+          ),
-            ValueDelegate.opacity(
+          ValueDelegate.opacity(
-              const ['Shape Layer 1', 'Rectangle'],
+            const ['Shape Layer 1', 'Rectangle'],
-              callback: (frameInfo) =>
+            callback: (frameInfo) => (frameInfo.overallProgress * 100).round(),
-                  (frameInfo.overallProgress * 100).round(),
+          ),
-            ),
+          ValueDelegate.position(
-            ValueDelegate.position(
+            const ['Shape Layer 1', 'Rectangle', '**'],
-              const ['Shape Layer 1', 'Rectangle'],
+            relative: Offset(100, 200),
-              relative: Offset(100, 200),
+          ),
-            ),
+        ],
-          ]),
+      ),
     );
   }
 }

example/pubspec.lock

@@ -7,28 +7,28 @@ packages:
       name: archive
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.11"
+    version: "2.0.13"
   args:
     dependency: transitive
     description:
       name: args
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.5.2"
+    version: "1.6.0"
   async:
     dependency: transitive
     description:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.4.0"
+    version: "2.4.1"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.5"
+    version: "2.0.0"
   characters:
     dependency: transitive
     description:
@@ -42,14 +42,14 @@ packages:
       name: charcode
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.2"
+    version: "1.1.3"
   collection:
     dependency: transitive
     description:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.14.11"
+    version: "1.14.12"
   convert:
     dependency: transitive
     description:
@@ -63,7 +63,7 @@ packages:
       name: crypto
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.3"
+    version: "2.1.4"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -94,7 +94,7 @@ packages:
       name: image
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.4"
+    version: "2.1.12"
   logging:
     dependency: transitive
     description:
@@ -108,7 +108,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.3.1"
+    version: "0.3.3"
   matcher:
     dependency: transitive
     description:
@@ -150,7 +150,7 @@ packages:
       name: quiver
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.5"
+    version: "2.1.3"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -162,7 +162,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.5.5"
+    version: "1.7.0"
   stack_trace:
     dependency: transitive
     description:
@@ -218,7 +218,7 @@ packages:
       name: xml
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.5.0"
+    version: "3.6.1"
 sdks:
   dart: ">=2.7.0 <3.0.0"
   flutter: ">=1.5.4 <2.0.0"

example/test/dynamic_properties_test.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/painting.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:lottie/lottie.dart';
+import 'utils.dart';
 
 void main() {
   LottieComposition composition;
@@ -290,4 +291,54 @@ void main() {
                 .round()),
         progress: progress);
   }
+
+  testWidgets('warningShimmer', (tester) async {
+    var size = Size(500, 400);
+    tester.binding.window.physicalSizeTestValue = size;
+    tester.binding.window.devicePixelRatioTestValue = 1.0;
+
+    var composition = await LottieComposition.fromBytes(
+        File('test/data/warningShimmer.json').readAsBytesSync());
+
+    var delegates = <String, List<ValueDelegate>>{
+      '1': [
+        for (var i in ['1', '2', '5'])
+          ValueDelegate.color(['Layer $i Outlines', '**'], value: Colors.red),
+        for (var i in ['3', '4'])
+          ValueDelegate.color(['Layer $i Outlines', '**'],
+              value: Colors.greenAccent),
+      ],
+      '2': [
+        for (var i in ['1', '2', '5'])
+          ValueDelegate.color(['Layer $i Outlines', 'Group 1', '*'],
+              value: Colors.red),
+        for (var i in ['3', '4'])
+          ValueDelegate.color(['Layer $i Outlines', 'Group 1', '*'],
+              value: Colors.greenAccent),
+      ],
+      '3': [
+        for (var i in ['1', '2', '5'])
+          ValueDelegate.color(['Layer $i Outlines', 'Group 1', 'Fill 1'],
+              value: Colors.red),
+        for (var i in ['3', '4'])
+          ValueDelegate.color(['Layer $i Outlines', 'Group 1', 'Fill 1'],
+              value: Colors.greenAccent),
+      ],
+    };
+
+    for (var variant in delegates.entries) {
+      await tester.pumpWidget(
+        FilmStrip(
+          composition,
+          size: size,
+          delegates: LottieDelegates(
+            values: variant.value,
+          ),
+        ),
+      );
+
+      await expectLater(find.byType(FilmStrip),
+          matchesGoldenFile('goldens/warningShimmer_${variant.key}.png'));
+    }
+  });
 }

example/test/fireworks_test.dart

@@ -0,0 +1,23 @@
+import 'dart:io';
+import 'dart:ui';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:lottie/lottie.dart';
+import 'package:path/path.dart' as p;
+import 'utils.dart';
+
+void main() {
+  testWidgets('Animations with stroke', (tester) async {
+    var size = Size(500, 400);
+    tester.binding.window.physicalSizeTestValue = size;
+    tester.binding.window.devicePixelRatioTestValue = 1.0;
+
+    var composition = await LottieComposition.fromBytes(
+        File('assets/17297-fireworks.json').readAsBytesSync());
+
+    await tester.pumpWidget(FilmStrip(composition, size: size));
+
+    await expectLater(find.byType(FilmStrip),
+        matchesGoldenFile(p.join('goldens/fireworks.png')));
+  });
+}

example/test/stroke_test.dart

@@ -23,6 +23,7 @@ void main() {
       'assets/lottiefiles/little_girl_jumping_-_loader.json',
       'assets/lottiefiles/playing.json',
       'assets/lottiefiles/win_result_2.json',
+      'test/data/loading_indicator.json',
     ]) {
       var composition =
           await LottieComposition.fromBytes(File(asset).readAsBytesSync());

example/test/utils.dart

@@ -3,30 +3,35 @@ import 'package:lottie/lottie.dart';
 
 class FilmStrip extends StatelessWidget {
   final LottieComposition composition;
+  final LottieDelegates delegates;
   final Size size;
 
-  const FilmStrip(this.composition, {Key key, @required this.size})
+  const FilmStrip(this.composition,
+      {Key key, @required this.size, this.delegates})
       : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return CustomPaint(
       size: size,
-      painter: _CustomerPainter(composition),
+      painter: _CustomerPainter(this),
     );
   }
 }
 
 class _CustomerPainter extends CustomPainter {
   static const _columns = 5;
-  final LottieComposition composition;
+  final FilmStrip parent;
 
-  _CustomerPainter(this.composition);
+  _CustomerPainter(this.parent);
 
   @override
   void paint(Canvas canvas, Size size) {
     var thumbSize = Size(size.width / _columns, size.width / _columns);
-    var drawable = LottieDrawable(composition);
+    var drawable = LottieDrawable(parent.composition);
+    if (parent.delegates != null) {
+      drawable.delegates = parent.delegates;
+    }
 
     var index = 0;
     for (var progress = 0.0; progress <= 1; progress += 0.05) {

lib/src/animation/content/rectangle_content.dart

@@ -1,5 +1,6 @@
 import 'dart:math';
 import 'dart:ui';
+import 'package:vector_math/vector_math_64.dart';
 import '../../lottie_drawable.dart';
 import '../../lottie_property.dart';
 import '../../model/content/rectangle_shape.dart';
@@ -95,13 +96,13 @@ class RectangleContent implements KeyPathElementContent, PathContent {
 
     if (radius > 0) {
       _path.arcTo(
-          Rect.fromLTWH(
+          Rect.fromLTRB(
               position.dx + halfWidth - 2 * radius,
               position.dy + halfHeight - 2 * radius,
               position.dx + halfWidth,
               position.dy + halfHeight),
           0,
-          90,
+          radians(90),
           false);
     }
 
@@ -109,13 +110,13 @@ class RectangleContent implements KeyPathElementContent, PathContent {
 
     if (radius > 0) {
       _path.arcTo(
-          Rect.fromLTWH(
+          Rect.fromLTRB(
               position.dx - halfWidth,
               position.dy + halfHeight - 2 * radius,
               position.dx - halfWidth + 2 * radius,
               position.dy + halfHeight),
-          90,
+          radians(90),
-          90,
+          radians(90),
           false);
     }
 
@@ -123,13 +124,13 @@ class RectangleContent implements KeyPathElementContent, PathContent {
 
     if (radius > 0) {
       _path.arcTo(
-          Rect.fromLTWH(
+          Rect.fromLTRB(
               position.dx - halfWidth,
               position.dy - halfHeight,
               position.dx - halfWidth + 2 * radius,
               position.dy - halfHeight + 2 * radius),
-          180,
+          radians(180),
-          90,
+          radians(90),
           false);
     }
 
@@ -137,13 +138,13 @@ class RectangleContent implements KeyPathElementContent, PathContent {
 
     if (radius > 0) {
       _path.arcTo(
-          Rect.fromLTWH(
+          Rect.fromLTRB(
               position.dx + halfWidth - 2 * radius,
               position.dy - halfHeight,
               position.dx + halfWidth,
               position.dy - halfHeight + 2 * radius),
-          270,
+          radians(270),
-          90,
+          radians(90),
           false);
     }
     _path.close();

lib/src/animation/content/repeater_content.dart

@@ -71,10 +71,8 @@ class RepeaterContent
     var newContents = <Content>[];
     while (index >= 0) {
       var content = contents[index];
-      if (content is PathContent) {
+      newContents.add(content);
-        newContents.add(content);
+      contents.removeAt(index);
-        contents.removeAt(index);
-      }
       --index;
     }
     newContents = newContents.reversed.toList();

lib/src/animation/keyframe/transform_keyframe_animation.dart

@@ -158,23 +158,25 @@ class TransformKeyframeAnimation {
   Matrix4 getMatrixForRepeater(double amount) {
     final position = _position?.value;
     final scale = _scale?.value;
-    final rotation = _rotation?.value;
 
     _matrix.setIdentity();
 
     if (position != null) {
-      _matrix.translate(position.dx, position.dy);
+      _matrix.translate(position.dx * amount, position.dy * amount);
     }
 
     if (scale != null) {
-      _matrix.scale(scale.dx, scale.dy);
+      _matrix.scale(
+          pow(scale.dx, amount).toDouble(), pow(scale.dy, amount).toDouble());
     }
 
-    if (rotation != null) {
+    if (_rotation != null) {
-      final anchorPoint = _anchorPoint?.value ?? Offset.zero;
+      var rotation = _rotation.value;
-      _matrix.translate(anchorPoint.dx, anchorPoint.dy);
+      var anchorPoint = _anchorPoint?.value;
-      _matrix.rotateZ(rotation * pi / 180.0);
+      _matrix.rotate(
-      _matrix.translate(-anchorPoint.dx, -anchorPoint.dy);
+          Vector3(anchorPoint == null ? 0.0 : anchorPoint.dx,
+              anchorPoint == null ? 0.0 : anchorPoint.dy, 1.0),
+          radians(rotation * amount));
     }
 
     return _matrix;

lib/src/parser/animatable_transform_parser.dart

@@ -158,7 +158,7 @@ class AnimatableTransformParser {
 
   static bool isPositionIdentity(AnimatableValue<Offset, Offset> position) {
     return position == null ||
-        (!(position is AnimatableSplitDimensionPathValue) &&
+        (position is! AnimatableSplitDimensionPathValue &&
             position.isStatic &&
             position.keyframes.first.startValue == Offset.zero);
   }

pubspec.lock

@@ -21,28 +21,28 @@ packages:
       name: archive
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.11"
+    version: "2.0.13"
   args:
     dependency: transitive
     description:
       name: args
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.5.2"
+    version: "1.6.0"
   async:
     dependency: transitive
     description:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.4.0"
+    version: "2.4.1"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.5"
+    version: "2.0.0"
   characters:
     dependency: "direct main"
     description:
@@ -56,14 +56,14 @@ packages:
       name: charcode
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.2"
+    version: "1.1.3"
   collection:
     dependency: transitive
     description:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.14.11"
+    version: "1.14.12"
   convert:
     dependency: transitive
     description:
@@ -77,7 +77,7 @@ packages:
       name: crypto
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.3"
+    version: "2.1.4"
   csslib:
     dependency: transitive
     description:
@@ -122,7 +122,7 @@ packages:
       name: image
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.4"
+    version: "2.1.12"
   js:
     dependency: transitive
     description:
@@ -213,7 +213,7 @@ packages:
       name: quiver
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.5"
+    version: "2.1.3"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -225,7 +225,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.5.5"
+    version: "1.7.0"
   stack_trace:
     dependency: transitive
     description:
@@ -288,7 +288,7 @@ packages:
       name: xml
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.5.0"
+    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.1
+version: 0.3.3
 homepage: https://github.com/xvrh/lottie-flutter
 
 environment: