poc

CHANGELOG.md

@@ -1,5 +1,3 @@
-## 2.3.1
-- Fix an assertion for null `ShapeTrimPathType.type`.
 
 ## 2.3.0
 - Fixed a failed assertion (`dirty: is not true`) when calling `setState` inside `onLoaded` callback.

example/assets/issue270.json

@@ -1,243 +0,0 @@
-{
-  "layers": [
-    {
-      "ddd": 0,
-      "ty": 4,
-      "ind": 0,
-      "sr": 1,
-      "ip": 0,
-      "op": 180,
-      "st": 0,
-      "ks": {
-        "a": {
-          "k": [
-            0,
-            0
-          ],
-          "a": 0
-        },
-        "p": {
-          "k": [
-            0,
-            0
-          ],
-          "a": 0
-        },
-        "s": {
-          "k": [
-            100,
-            100
-          ],
-          "a": 0
-        },
-        "r": {
-          "k": 0,
-          "a": 0
-        },
-        "o": {
-          "k": 100,
-          "a": 0
-        },
-        "sk": {
-          "k": 0,
-          "a": 0
-        },
-        "sa": {
-          "k": 0,
-          "a": 0
-        }
-      },
-      "ao": 0,
-      "bm": 0,
-      "shapes": [
-        {
-          "ty": "gr",
-          "it": [
-            {
-              "ty": "sh",
-              "d": 1,
-              "ks": {
-                "k": {
-                  "c": false,
-                  "i": [
-                    [
-                      0,
-                      0
-                    ],
-                    [
-                      32,
-                      -32
-                    ],
-                    [
-                      -64,
-                      -64
-                    ],
-                    [
-                      64,
-                      64
-                    ]
-                  ],
-                  "o": [
-                    [
-                      64,
-                      64
-                    ],
-                    [
-                      -32,
-                      32
-                    ],
-                    [
-                      -64,
-                      64
-                    ],
-                    [
-                      0,
-                      0
-                    ]
-                  ],
-                  "v": [
-                    [
-                      256,
-                      128
-                    ],
-                    [
-                      256,
-                      376
-                    ],
-                    [
-                      256,
-                      256
-                    ],
-                    [
-                      128,
-                      376
-                    ]
-                  ]
-                },
-                "a": 0
-              }
-            },
-            {
-              "ty": "st",
-              "lc": 2,
-              "lj": 2,
-              "ml": 0,
-              "o": {
-                "k": 100,
-                "a": 0
-              },
-              "w": {
-                "k": 5,
-                "a": 0
-              },
-              "c": {
-                "k": [
-                  1,
-                  0,
-                  0,
-                  1
-                ],
-                "a": 0
-              }
-            },
-            {
-              "ty": "tr",
-              "a": {
-                "k": [
-                  0,
-                  0
-                ],
-                "a": 0
-              },
-              "p": {
-                "k": [
-                  0,
-                  0
-                ],
-                "a": 0
-              },
-              "s": {
-                "k": [
-                  100,
-                  100
-                ],
-                "a": 0
-              },
-              "r": {
-                "k": 0,
-                "a": 0
-              },
-              "o": {
-                "k": 100,
-                "a": 0
-              },
-              "sk": {
-                "k": 0,
-                "a": 0
-              },
-              "sa": {
-                "k": 0,
-                "a": 0
-              }
-            }
-          ]
-        },
-        {
-          "ty": "tm",
-          "s": {
-            "k": 0,
-            "a": 0
-          },
-          "e": {
-            "k": 50,
-            "a": 0
-          },
-          "o": {
-            "a": 1,
-            "k": [
-              {
-                "t": 0,
-                "i": {
-                  "x": [
-                    1
-                  ],
-                  "y": [
-                    1
-                  ]
-                },
-                "o": {
-                  "x": [
-                    0
-                  ],
-                  "y": [
-                    0
-                  ]
-                },
-                "s": [
-                  0
-                ],
-                "e": [
-                  360
-                ]
-              },
-              {
-                "t": 180,
-                "s": [
-                  360
-                ]
-              }
-            ]
-          }
-        }
-      ]
-    }
-  ],
-  "v": "5.5.2",
-  "fr": 60,
-  "ip": 0,
-  "op": 180,
-  "w": 968,
-  "h": 1090,
-  "ddd": 0,
-  "assets": []
-}

example/lib/examples/cache_frames.dart

@@ -0,0 +1,332 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart' hide Image;
+import 'package:flutter/material.dart' as material;
+import 'package:lottie/lottie.dart';
+
+void main() {
+  runApp(const App());
+}
+
+class App extends StatelessWidget {
+  const App({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const MaterialApp(
+      showPerformanceOverlay: true,
+      home: Scaffold(body: _App()),
+    );
+  }
+}
+
+class _App extends StatefulWidget {
+  const _App({super.key});
+
+  @override
+  State<_App> createState() => __AppState();
+}
+
+class __AppState extends State<_App> {
+  static final _animation = AssetLottie('assets/LottieLogo1.json');
+  static final _size = const Size(500, 500);
+  CachedPictures? _cachedPictures;
+  CachedImages? _cachedImages;
+
+  @override
+  Widget build(BuildContext context) {
+    var cachedPictures = _cachedPictures;
+    var cachedImages = _cachedImages;
+    Widget animation;
+    if (cachedPictures != null) {
+      animation = PicturesPlayer(pictures: cachedPictures);
+    } else if (cachedImages != null) {
+      animation = ImagesPlayer(images: cachedImages);
+    } else {
+      animation = LottieBuilder(
+        lottie: _animation,
+        width: _size.width,
+        height: _size.height,
+      );
+    }
+
+    return ListView(
+      children: [
+        ElevatedButton(
+          onPressed: () async {
+            var watch = Stopwatch()..start();
+
+            var composition = await _animation.load();
+
+            var pictures = buildLottiePictures(composition, _size);
+            setState(() {
+              _cachedPictures = pictures;
+            });
+            print('Build cache in ${watch.elapsed}');
+          },
+          child: const Text('Create cached pictures'),
+        ),
+        ElevatedButton(
+          onPressed: () async {
+            var watch = Stopwatch()..start();
+            var composition = await _animation.load();
+
+            var images = buildLottiePictures(composition, _size).toImages();
+            setState(() {
+              _cachedImages = images;
+            });
+            print('Build cache in ${watch.elapsed}');
+          },
+          child: const Text('Create cached pictures'),
+        ),
+        ElevatedButton(
+          onPressed: () {
+            setState(() {
+              _cachedPictures = null;
+              _cachedImages = null;
+            });
+          },
+          child: Text('Clear cache'),
+        ),
+        Container(
+          height: 300,
+          child: Stack(
+            children: [
+              for (var i = 0; i < 100; i++)
+                Positioned(left: i * 2.0, child: animation),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+/*class CachedLottie extends StatefulWidget {
+  final LottieProvider provider;
+
+  const CachedLottie({super.key, required this.provider});
+
+  @override
+  State<CachedLottie> createState() => _CachedLottieState();
+}
+
+class _CachedLottieState extends State<CachedLottie>
+    with TickerProviderStateMixin {
+  AnimationController? _controller;
+  late Future<LottieComposition> _composition;
+
+  @override
+  void initState() {
+    super.initState();
+    _composition = widget.provider.load();
+  }
+
+  @override
+  void didUpdateWidget(covariant CachedLottie oldWidget) {
+    if (oldWidget.provider != widget.provider) {
+      _controller = null;
+      _composition = widget.provider.load();
+    }
+    super.didUpdateWidget(oldWidget);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder<LottieComposition>(
+      future: _composition,
+      builder: (context, snapshot) {
+        if (snapshot.connectionState != ConnectionState.done) {
+          // TODO: Loading placeholder
+          return const SizedBox();
+        } else {
+          if (snapshot.hasError) return ErrorWidget(snapshot.error!);
+
+          var composition = snapshot.requireData;
+          var controller = _controller ??= AnimationController(vsync: this)
+            ..duration = composition.duration
+            ..repeat();
+          return _CachedLottie(
+            composition,
+            controller,
+            key: ValueKey(composition),
+          );
+        }
+      },
+    );
+  }
+}
+
+class _CachedLottie extends StatefulWidget {
+  final LottieComposition composition;
+  final AnimationController controller;
+
+  const _CachedLottie(this.composition, this.controller, {super.key});
+
+  @override
+  State<_CachedLottie> createState() => __CachedLottieState();
+}
+
+class __CachedLottieState extends State<_CachedLottie> {
+  late LottieDrawable _drawable;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _drawable = LottieDrawable(widget.composition);
+
+    _drawable.draw(canvas, rect);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(builder: (context, constraints) {});
+  }
+}*/
+
+class PicturesPlayer extends StatefulWidget {
+  final CachedPictures pictures;
+
+  PicturesPlayer({
+    super.key,
+    required this.pictures,
+  });
+
+  @override
+  State<PicturesPlayer> createState() => _PicturesPlayerState();
+}
+
+class _PicturesPlayerState extends State<PicturesPlayer>
+    with TickerProviderStateMixin {
+  late final _controller = AnimationController(
+      vsync: this, duration: widget.pictures.composition.duration)
+    ..repeat();
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, _) {
+        var picture = widget.pictures.pictureAt(_controller.value);
+        return CustomPaint(
+          size: widget.pictures.size,
+          painter: _PicturePainter(picture),
+        );
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+}
+
+class _PicturePainter extends CustomPainter {
+  final Picture picture;
+
+  _PicturePainter(this.picture);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.drawPicture(picture);
+  }
+
+  @override
+  bool shouldRepaint(covariant _PicturePainter oldDelegate) {
+    return picture != oldDelegate.picture;
+  }
+}
+
+class ImagesPlayer extends StatefulWidget {
+  final CachedImages images;
+
+  ImagesPlayer({
+    super.key,
+    required this.images,
+  });
+
+  @override
+  State<ImagesPlayer> createState() => _ImagesPlayerState();
+}
+
+class _ImagesPlayerState extends State<ImagesPlayer>
+    with TickerProviderStateMixin {
+  late final _controller = AnimationController(
+      vsync: this, duration: widget.images.composition.duration)
+    ..repeat();
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, _) {
+        var image = widget.images.imageAt(_controller.value);
+        return material.RawImage(
+          image: image,
+          width: widget.images.size.width,
+          height: widget.images.size.height,
+        );
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+}
+
+class CachedPictures {
+  final Size size;
+  final LottieComposition composition;
+  final List<Picture> pictures;
+
+  CachedPictures(this.size, this.composition, this.pictures)
+      : assert(pictures.length == composition.durationFrames.ceil());
+
+  Picture pictureAt(double progress) {
+    return pictures[(pictures.length * progress).round() % pictures.length];
+  }
+
+  CachedImages toImages() => CachedImages(
+      size,
+      composition,
+      pictures
+          .map((p) => p.toImageSync(size.width.round(), size.height.round()))
+          .toList());
+}
+
+class CachedImages {
+  final Size size;
+  final LottieComposition composition;
+  final List<Image> images;
+
+  CachedImages(this.size, this.composition, this.images)
+      : assert(images.length == composition.durationFrames.ceil());
+
+  Image imageAt(double progress) {
+    return images[(images.length * progress).round() % images.length];
+  }
+}
+
+CachedPictures buildLottiePictures(LottieComposition composition, Size size) {
+  assert(composition.startFrame <= composition.endFrame);
+  var drawable = LottieDrawable(composition);
+
+  var pictures = <Picture>[];
+  for (var i = composition.startFrame; i < composition.endFrame; i++) {
+    drawable.setProgress(i / composition.durationFrames);
+
+    var recorder = PictureRecorder();
+    var canvas = Canvas(recorder);
+
+    drawable.draw(canvas, Offset.zero & size);
+    var picture = recorder.endRecording();
+    pictures.add(picture);
+  }
+  return CachedPictures(size, composition, pictures);
+}

example/lib/main_app.dart

@@ -19,7 +19,6 @@ class App extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      //showPerformanceOverlay: true,
       home: Scaffold(
         appBar: AppBar(
           title: const Text('Lottie Flutter'),

example/macos/Podfile.lock

@@ -16,7 +16,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   FlutterMacOS: 8f6f14fa908a6fb3fba0cd85dbd81ec4b251fb24
-  path_provider_foundation: 37748e03f12783f9de2cb2c4eadfaa25fe6d4852
+  path_provider_foundation: c68054786f1b4f3343858c1e1d0caaded73f0be9
 
 PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7
 

example/pubspec.lock

@@ -169,7 +169,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.3.1"
+    version: "2.3.0"
   matcher:
     dependency: transitive
     description:

lib/src/parser/shape_trim_path_parser.dart

@@ -43,7 +43,7 @@ class ShapeTrimPathParser {
 
     return ShapeTrimPath(
         name: name,
-        type: type ?? ShapeTrimPathType.simultaneously,
+        type: type!,
         start: start!,
         end: end!,
         offset: offset!,

pubspec.lock

@@ -5,18 +5,18 @@ packages:
     dependency: transitive
     description:
       name: _fe_analyzer_shared
-      sha256: a36ec4843dc30ea6bf652bf25e3448db6c5e8bcf4aa55f063a5d1dad216d8214
+      sha256: e440ac42679dfc04bbbefb58ed225c994bc7e07fccc8a68ec7d3631a127e5da9
       url: "https://pub.dev"
     source: hosted
-    version: "58.0.0"
+    version: "54.0.0"
   analyzer:
     dependency: "direct dev"
     description:
       name: analyzer
-      sha256: cc4242565347e98424ce9945c819c192ec0838cb9d1f6aa4a97cc96becbc5b27
+      sha256: "2c2e3721ee9fb36de92faa060f3480c81b23e904352b087e5c64224b1a044427"
       url: "https://pub.dev"
     source: hosted
-    version: "5.10.0"
+    version: "5.6.0"
   archive:
     dependency: "direct main"
     description:
@@ -93,10 +93,10 @@ packages:
     dependency: "direct dev"
     description:
       name: dart_style
-      sha256: "6d691edde054969f0e0f26abb1b30834b5138b963793e56f69d3a9a4435e6352"
+      sha256: "7a03456c3490394c8e7665890333e91ae8a49be43542b616e414449ac358acd4"
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.0"
+    version: "2.2.4"
   fake_async:
     dependency: transitive
     description:
@@ -199,10 +199,10 @@ packages:
     dependency: transitive
     description:
       name: pointycastle
-      sha256: c3120a968135aead39699267f4c74bc9a08e4e909e86bc1b0af5bfd78691123c
+      sha256: db7306cf0249f838d1a24af52b5a5887c5bf7f31d8bb4e827d071dc0939ad346
       url: "https://pub.dev"
     source: hosted
-    version: "3.7.2"
+    version: "3.6.2"
   pub_semver:
     dependency: transitive
     description:
@@ -297,5 +297,5 @@ packages:
     source: hosted
     version: "3.1.1"
 sdks:
-  dart: ">=2.19.0 <3.0.0"
+  dart: ">=2.18.0 <3.0.0"
   flutter: ">=3.3.0"

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: 2.3.1
+version: 2.3.0
 repository: https://github.com/xvrh/lottie-flutter
 
 environment: