xvrh / lottie-flutter Goto Github PK

View Code? Open in Web Editor NEW

1.1K 9.0 195.0 65.09 MB

Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.

Home Page: https://pub.dev/packages/lottie

License: MIT License

Dart 99.19% Kotlin 0.02% Swift 0.19% Objective-C 0.01% HTML 0.03% Ruby 0.39% C++ 0.02% C 0.04% CMake 0.11%

flutter lottie lottie-animation widget flutter-widget dart lottie-android flutter-web

lottie-flutter's Introduction

Lottie for Flutter

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

This repository is an unofficial conversion of the Lottie-android library in pure Dart.

It works on Android, iOS, macOS, linux, windows and web.

Usage

Simple animation

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.

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @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'),
          ],
        ),
      ),
    );
  }
}

Specify a custom `AnimationController`

This example shows how to take full control over the animation by providing your own AnimationController.

With a custom AnimationController you have a rich API to play the animation in various ways: start and stop the animation when you want, play forward or backward, loop between specifics points...

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            Lottie.asset(
              'assets/LottieLogo1.json',
              controller: _controller,
              onLoaded: (composition) {
                // Configure the AnimationController with the duration of the
                // Lottie file and start the animation.
                _controller
                  ..duration = composition.duration
                  ..forward();
              },
            ),
          ],
        ),
      ),
    );
  }
}

See this file for a more comprehensive example.

Control the size of the Widget

The Lottie widget takes the same arguments and have the same behavior as the Image widget in term of controlling its size.

Lottie.asset(
  'assets/LottieLogo1.json',
  width: 200,
  height: 200,
  fit: BoxFit.fill,
)

width and height are optionals and fallback on the size imposed by the parent or on the intrinsic size of the lottie animation.

Custom loading

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 AssetLottie (or NetworkLottie, MemoryLottie) to load a lottie composition from a json file.

This example shows how to load and parse a Lottie composition from a json file.

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late final Future<LottieComposition> _composition;

  @override
  void initState() {
    super.initState();

    _composition = AssetLottie('assets/LottieLogo1.json').load();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<LottieComposition>(
      future: _composition,
      builder: (context, snapshot) {
        var composition = snapshot.data;
        if (composition != null) {
          return Lottie(composition: composition);
        } else {
          return const Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}

Custom drawing

This example goes low level and shows you how to draw a LottieComposition on a custom Canvas at a specific frame in a specific position and size.

class CustomDrawer extends StatelessWidget {
  final LottieComposition composition;

  const CustomDrawer(this.composition, {super.key});

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _Painter(composition),
      size: const Size(400, 400),
    );
  }
}

class _Painter extends CustomPainter {
  final LottieDrawable drawable;

  _Painter(LottieComposition composition)
      : drawable = LottieDrawable(composition);

  @override
  void paint(Canvas canvas, Size size) {
    var frameCount = 40;
    var columns = 10;
    for (var i = 0; i < frameCount; i++) {
      var destRect = Offset(i % columns * 50.0, i ~/ 10 * 80.0) & (size / 5);
      drawable
        ..setProgress(i / frameCount)
        ..draw(canvas, destRect);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Modify properties at runtime

This example shows how to modify some properties of the animation at runtime. Here we change the text, the color, the opacity and the position of some layers. For each ValueDelegate we can either provide a static value or a callback to compute a value for a each frame.

class _Animation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Lottie.asset(
      'assets/Tests/Shapes.json',
      delegates: LottieDelegates(
        text: (initialText) => '**$initialText**',
        values: [
          ValueDelegate.color(
            const ['Shape Layer 1', 'Rectangle', 'Fill 1'],
            value: Colors.red,
          ),
          ValueDelegate.opacity(
            const ['Shape Layer 1', 'Rectangle'],
            callback: (frameInfo) => (frameInfo.overallProgress * 100).round(),
          ),
          ValueDelegate.position(
            const ['Shape Layer 1', 'Rectangle', '**'],
            relative: const Offset(100, 200),
          ),
        ],
      ),
    );
  }
}

Frame rate

By default, the animation is played at the frame rate exported by AfterEffect. This is the most power-friendly as generally the animation is exported at 10 or 30 FPS compared to the phone's 60 or 120 FPS. If the result is not good, you can change the frame rate

Lottie.asset('anim.json',
  // Use the device frame rate (up to 120FPS)
  frameRate: FrameRate.max,
  // Use the exported frame rate (default)
  frameRate: FrameRate.composition,
  // Specific frame rate
  frameRate: FrameRate(10),
)

Telegram Stickers (.tgs) and DotLottie (.lottie)

TGS file can be loaded by providing a special decoder

Widget build(BuildContext context) {
  return ListView(
    children: [
      Lottie.network(
        'https://telegram.org/file/464001484/1/bzi7gr7XRGU.10147/815df2ef527132dd23',
        decoder: LottieComposition.decodeGZip,
      ),
      Lottie.asset(
        'assets/LightningBug_file.tgs',
        decoder: LottieComposition.decodeGZip,
      ),
    ],
  );
}

You can select the correct .json file from a dotlottie (.lottie) archive by providing a custom decoder

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return Lottie.asset(
      'assets/cat.lottie',
      decoder: customDecoder,
    );
  }
}

Future<LottieComposition?> customDecoder(List<int> bytes) {
  return LottieComposition.decodeZip(bytes, filePicker: (files) {
    return files.firstWhereOrNull(
        (f) => f.name.startsWith('animations/') && f.name.endsWith('.json'));
  });
}

Performance or excessive CPU/GPU usage

Version v3.0 introduced the renderCache parameter to help reduce an excessive energy consumption.

In this mode, the frames of the animation are rendered lazily in an offscreen cache. Subsequent runs of the animation are cheaper to render. It helps reduce the power usage of the application at the cost of an increased memory usage.

Limitations

This port supports the same feature set as Lottie Android.

Flutter Web

Run the app with flutter run -d chrome --web-renderer canvaskit

See a preview here: https://xvrh.github.io/lottie-flutter-web/

More examples

See the example folder for more code samples of the various possibilities.

lottie-flutter's People

Contributors

Stargazers

Watchers

Forkers

thevinhluong mduccc sultanmyrza tchigher emreakcadag wasabia lengzds greatpie xq-life fluttertop100 hugolrf debugksir muzihuowei rishli iptton blaizechuang vitor-bukovitz rodrigobusata olegas viogull zaze8736 derplak fluttercodes sshyran sudoferraz smartquark rekor-dev kimshepherd dsyrstad liuyangwork desire0420 monkeyer tiantang1991 yongle-fu manoylok joe-coffee skela morristech jasonhungrd emaame anwaralrabee mjxchina allenymt popeveryday dunm165913 shengjiegeng arnemolland androidlgf flutter-mx eggfly tonyreet honkevin abdelrahmanashraaf wxyforgithub xingfu0809 kriskev muhleder sandrapg85 silexcorp rayku-chans developer-taher rikaramu quweifan libsvg roy-xr rogasciences metubeapp yinhangfeng sunsiha young-heo garawaa ketanvishwakarma wesleyyps jinkg ucoon jackinelon chriswoodcn jianinghe mencomao madhoma hosseinyousefi rayat69 frankswu naveed-dev30 mjserrato zxenonx ghostwalker562 sulaemansantoso farickmenacode73 strogo plx-tech rahmathulla messnotrace pritiyadav888 xhao7-ford z244370114 tanay-gupta ajaykrishnan-augusta ddemyanova bestandroider

lottie-flutter's Issues

animations disappear and reappear when using 2 animations - bad state no element

I'm using Lottie animations in CustomScrollView. When I use single animation it's working fine but when using 2 animations, they are disappearing and reappearing.

Error:
════════ Exception caught by rendering library ════════════════════════════════════════ Bad state: No element The relevant error-causing widget was Container ════════════════════════════════════════

my 2nd Lottie animation:
return SliverToBoxAdapter( child: Container( height: 180.0, child: Lottie.asset(ANIMATION_LOADING_DATA), ), );

Insert input for Text Delegates

Hi, I'm migrating from Lottie Android and I noticed the Flutter version doesn't have the option to insert input for changing texts dynamically.

In Kotlin, this is possible

textDelegate.setText("1", "new text 1")
textDelegate.setText("2", "new text 2")

However in Flutter, any text we change is automatically applied to all inputs since we're just using a single state to modify

LottieDelegates(
    text: (initialText) => newText, // dynamic text
);

Hide after animation completes

How can I hide lottie after the animation completes?

Performance issue

Hello,
I've face some performance issue with lottie.
App structure:
-Column
- Text
- Image
- Image
- Lottie.network
- GridView
When I scroll down lottie widget delay the scoll.
Hope you understand my problem.

How do you make the animation run only once?

      Lottie.asset("assets/anim.zip", repeat: false, animate: true)

This way the animation is never executed once.

      Lottie.asset("assets/anim.zip",
                    controller: instance.controller,
                    onLoaded: (composition) {
                        instance.controller..duration = composition.duration
                                                     ..forward();
                    })

This is also

Delayed restart repeat

Is it possible to implement a delayed property to specify a Duration to restart the lottie animation?

Something like that:

Lottie.asset("assets/lottie.json", repeat: true, animate: true, delayedRestart: Duration(seconds: 3), )

ValueDelegate Position Offset

Hello! I am having a problem with size control. How can I change the state for two controllers with one slider? Thank!

var _sizeShape = Offset(100, 100);

ValueDelegate.rectangleSize(['Shape Layer 1', '**'], relative: _sizeShape)

Slider( value: _sizeShape, onChanged: (newValue) { setState(() { _sizeShape = newValue; }); }, ),

[Feature] Change image at run time, just like Lottie-Android

Hey! Thanks for this plugin.
I can't find any way to replace image at runtime through this plugin.

On Android it can be done as:

// First I converted the png I wanted to see at runtime to a bitmap:

Bitmap bitmapImage = BitmapFactory.decodeResource(getResources(), R.drawable.imageBlah);

// I used the lambda: 

lottieAnimationView.setImageAssetDelegate( lottieImageAsset -> bitmapImage);

Did this plugin support this? If not then can I see this feature in the near future?

Unknown mask mode f. Defaulting to Add.

Hi. When run my json, I got some log:

flutter: [WARNING] lottie: splash: Unknown mask mode f. Defaulting to Add.
flutter: [WARNING] lottie: splash: Unknown mask mode f. Defaulting to Add.
flutter: [WARNING] lottie: splash: Unknown mask mode f. Defaulting to Add.
flutter: [WARNING] lottie: splash: Unknown mask mode f. Defaulting to Add.
flutter: [WARNING] lottie: splash: Unknown mask mode f. Defaulting to Add.
flutter: [WARNING] lottie: splash: Unknown mask mode f. Defaulting to Add.
flutter: [WARNING] lottie: splash: Unknown mask mode f. Defaulting to Add.

And this my json.

{"v":"5.6.5","fr":60,"ip":0,"op":150,"w":375,"h":812,"nm":"00_01_スプラッシュ_トップ","ddd":0,"assets":[{"id":"image_0","w":375,"h":812,"u":"images/","p":"img_0.png","e":0},{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":1,"nm":"暗いブルー 平面 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-23,"ix":10},"p":{"a":0,"k":[187.5,362.5,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.826,0.803,0.667],"y":[0.412,0.561,1]},"o":{"x":[0.534,1,0.333],"y":[0,0,0]},"t":10,"s":[-208,0,100]},{"i":{"x":[0.38,0.283,0.667],"y":[0.81,0.798,1]},"o":{"x":[0.583,0.214,0.333],"y":[0.313,0.876,0]},"t":27,"s":[-232.883,99.253,100]},{"t":37,"s":[-325.151,133.715,100]}],"ix":6}},"ao":0,"sw":375,"sh":812,"sc":"#1a2139","ip":10,"op":480,"st":10,"bm":0}]},{"id":"comp_1","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"nomura","refId":"comp_2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":50,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":60,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":121,"s":[100]},{"t":131,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[188,760,0],"ix":2},"a":{"a":0,"k":[80,20,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":160,"h":40,"ip":50,"op":3650,"st":50,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"text","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":375,"h":812,"ip":-12,"op":3586,"st":-14,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"jsonbg_splush","refId":"comp_6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":375,"h":812,"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"30_02_04_資産状況_保有の銘柄一覧_取引メニュー","refId":"comp_9","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":375,"h":812,"ip":0,"op":3600,"st":0,"bm":0}]},{"id":"comp_2","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"パス 8475","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[69.949,24.728,0],"ix":2},"a":{"a":0,"k":[1.445,2.38,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[1.754,0],[0,4.759],[2.238,4.759],[2.889,2.967]],"c":true},"ix":2},"nm":"パス 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"パス 8475","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"パス 8474","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[79.552,20.564,0],"ix":2},"a":{"a":0,"k":[42.322,7.054,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[0,0],[0,13.427],[2.345,13.427],[2.345,4.408],[9.586,13.427],[11.558,13.427],[11.558,0],[9.325,0],[9.325,7.402],[3.313,0]],"c":true},"ix":2},"nm":"パス 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[75.868,0],[70.366,13.427],[72.742,13.427],[74.259,9.736],[79.254,9.736],[80.789,13.427],[84.644,13.427],[79.086,0]],"c":true},"ix":2},"nm":"パス 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[75.026,7.807],[76.747,3.6],[78.47,7.807]],"c":true},"ix":2},"nm":"パス 3","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":0,"k":{"i":[[0,0],[1.377,-0.46],[0.636,0.255],[0.237,0.235],[0.017,0.627],[0,0],[0,0],[0,0],[-0.798,-0.989],[-2.033,0.251],[-0.888,0.928],[-0.11,0.87],[0,0.525],[0,0],[0,0],[0,0]],"o":[[-0.063,1.243],[-0.613,0.203],[-0.304,-0.124],[-0.458,-0.452],[0,0],[0,0],[0,0],[0.034,1.229],[1.372,1.697],[1.263,-0.157],[0.614,-0.641],[0.064,-0.505],[0,0],[0,0],[0,0],[0,0]],"v":[[53.713,8.884],[52.176,11.817],[49.798,11.761],[49.066,11.297],[48.41,9.256],[48.41,0],[44.871,0],[44.871,8.884],[45.9,12.335],[51.82,14.023],[55.079,12.52],[56.185,9.998],[56.259,8.884],[56.259,0],[53.712,0],[53.712,8.884]],"c":true},"ix":2},"nm":"パス 4","mn":"ADBE Vector Shape - Group","hd":false},{"ind":4,"ty":"sh","ix":5,"ks":{"a":0,"k":{"i":[[0,0],[-0.674,-1.603],[0.619,-0.611],[0.977,-0.083],[0,0],[0,0],[0,0],[0.096,2.099],[2.198,0],[0,0],[0,0],[0,0]],"o":[[1.548,0],[0.266,0.633],[-0.738,0.727],[0,0],[0,0],[0,0],[1.952,-0.681],[-0.105,-2.266],[0,0],[0,0],[0,0],[0,0]],"v":[[62.137,1.893],[65.897,3.234],[65.561,5.916],[62.715,6.796],[66.325,13.427],[70.026,13.427],[66.752,7.514],[69.524,3.636],[65.301,0],[58.639,0],[58.639,13.427],[62.137,13.427]],"c":true},"ix":2},"nm":"パス 5","mn":"ADBE Vector Shape - Group","hd":false},{"ind":5,"ty":"sh","ix":6,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[39.262,13.427],[34.02,0],[31.267,0],[26.175,13.427],[28.646,13.427],[32.073,4.353],[35.555,13.427]],"c":true},"ix":2},"nm":"パス 6","mn":"ADBE Vector Shape - Group","hd":false},{"ind":6,"ty":"sh","ix":7,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[39.457,0],[36.573,0],[35.693,2.296],[36.947,5.51],[37.397,4.353],[40.786,13.427],[44.701,13.427]],"c":true},"ix":2},"nm":"パス 7","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"パス 8474","np":9,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"パス 8473","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[57.117,20.309,0],"ix":2},"a":{"a":0,"k":[6.799,7.309,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-3.755,0],[0,-4.871],[3.755,0],[0,4.902]],"o":[[0,-4.871],[3.755,0],[0,4.879],[-3.755,0],[0,0]],"v":[[0,7.309],[6.799,0],[13.597,7.309],[6.799,14.617],[0,7.309]],"c":false},"ix":2},"nm":"パス 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0,3.523],[1.852,0],[0,-3.49],[-1.854,0]],"o":[[1.852,0],[0,-3.49],[-1.853,0],[-0.001,3.5],[0,0]],"v":[[6.799,12.765],[10.153,7.308],[6.799,1.852],[3.444,7.308],[6.799,12.765]],"c":false},"ix":2},"nm":"パス 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"パス 8473","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":3600,"st":0,"bm":0}]},{"id":"comp_3","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"logo","td":1,"refId":"comp_4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":375,"h":812,"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"pattern_text","tt":1,"refId":"comp_5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-90,"ix":10},"p":{"a":0,"k":[195.5,397,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[68,68,100],"ix":6}},"ao":0,"tm":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":14,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":52,"s":[1.3]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":193,"s":[2.983]},{"t":3600,"s":[60]}],"ix":2},"w":375,"h":812,"ip":0,"op":3600,"st":0,"bm":0}]},{"id":"comp_4","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"NOMURA DIGITAL 2アウトライン","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.642,404.798,0],"ix":2},"a":{"a":0,"k":[1.5,-13,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-132.568,-23.562],[-118.84,-3.63],[-118.774,-3.63],[-118.774,-23.562],[-116.53,-23.562],[-116.53,0],[-119.038,0],[-132.766,-19.932],[-132.832,-19.932],[-132.832,0],[-135.076,0],[-135.076,-23.562]],"c":true},"ix":2},"nm":"N","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7490234375,0.654907226563,0.423522949219,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.948},"o":{"x":0.333,"y":0},"t":45,"s":[-20,0],"to":[2.333,0],"ti":[-3.333,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.434},"t":52,"s":[-6,0],"to":[3.333,0],"ti":[-1,0]},{"t":77,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"N","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.341,-1.243],[-0.715,-0.979],[-1.122,-0.594],[-1.562,0],[-1.111,0.594],[-0.715,0.979],[-0.341,1.243],[0,1.276],[0.341,1.232],[0.715,0.979],[1.111,0.594],[1.562,0],[1.122,-0.594],[0.715,-0.979],[0.341,-1.232],[0,-1.298]],"o":[[0.341,1.243],[0.715,0.979],[1.122,0.594],[1.562,0],[1.111,-0.594],[0.715,-0.979],[0.341,-1.243],[0,-1.298],[-0.341,-1.232],[-0.715,-0.979],[-1.111,-0.594],[-1.562,0],[-1.122,0.594],[-0.715,0.979],[-0.341,1.232],[0,1.276]],"v":[[-110.712,-8.003],[-109.128,-4.669],[-106.373,-2.31],[-102.347,-1.419],[-98.337,-2.31],[-95.598,-4.669],[-94.014,-8.003],[-93.503,-11.781],[-94.014,-15.576],[-95.598,-18.893],[-98.337,-21.252],[-102.347,-22.143],[-106.373,-21.252],[-109.128,-18.893],[-110.712,-15.576],[-111.224,-11.781]],"c":true},"ix":2},"nm":"O","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-0.462,1.474],[-0.924,1.133],[-1.397,0.671],[-1.848,0],[-1.386,-0.671],[-0.924,-1.133],[-0.462,-1.474],[0,-1.628],[0.462,-1.474],[0.924,-1.122],[1.386,-0.671],[1.848,0],[1.397,0.671],[0.924,1.122],[0.462,1.474],[0,1.628]],"o":[[0.462,-1.474],[0.924,-1.133],[1.397,-0.671],[1.848,0],[1.386,0.671],[0.924,1.133],[0.462,1.474],[0,1.628],[-0.462,1.474],[-0.924,1.122],[-1.386,0.671],[-1.848,0],[-1.397,-0.671],[-0.924,-1.122],[-0.462,-1.474],[0,-1.628]],"v":[[-112.775,-16.434],[-110.696,-20.344],[-107.214,-23.051],[-102.347,-24.057],[-97.496,-23.051],[-94.031,-20.344],[-91.952,-16.434],[-91.259,-11.781],[-91.952,-7.128],[-94.031,-3.234],[-97.496,-0.544],[-102.347,0.462],[-107.214,-0.544],[-110.696,-3.234],[-112.775,-7.128],[-113.468,-11.781]],"c":true},"ix":2},"nm":"O","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"パスを結合 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7490234375,0.654907226563,0.423522949219,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.947},"o":{"x":0.333,"y":0},"t":45,"s":[-16,0],"to":[1.833,0],"ti":[-2.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.417},"t":52,"s":[-5,0],"to":[2.667,0],"ti":[-0.833,0]},{"t":77,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"O","np":5,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-88.213,-23.562],[-88.213,0],[-85.969,0],[-85.969,-20.361],[-85.903,-20.361],[-78.148,0],[-76.036,0],[-67.984,-20.361],[-67.918,-20.361],[-67.918,0],[-65.674,0],[-65.674,-23.562],[-68.974,-23.562],[-77.092,-2.904],[-84.913,-23.562]],"c":true},"ix":2},"nm":"M","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7490234375,0.654907226563,0.423522949219,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.947},"o":{"x":0.333,"y":0},"t":45,"s":[-13,0],"to":[1.5,0],"ti":[-2.167,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.423},"t":52,"s":[-4,0],"to":[2.167,0],"ti":[-0.667,0]},{"t":77,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"M","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-0.308,-0.957],[-0.594,-0.605],[-0.858,-0.275],[-1.078,0],[-0.858,0.275],[-0.594,0.605],[-0.308,0.957],[0,1.364],[0,0],[0,0],[0,0],[0.341,-1.089],[0.737,-0.814],[1.155,-0.473],[1.65,0],[1.155,0.473],[0.737,0.814],[0.341,1.089],[0,1.21],[0,0]],"o":[[0,0],[0,1.364],[0.308,0.957],[0.594,0.605],[0.858,0.275],[1.1,0],[0.858,-0.275],[0.594,-0.605],[0.308,-0.957],[0,0],[0,0],[0,0],[0,1.21],[-0.341,1.089],[-0.737,0.814],[-1.155,0.473],[-1.628,0],[-1.155,-0.473],[-0.737,-0.814],[-0.341,-1.089],[0,0],[0,0]],"v":[[-59.427,-23.562],[-59.427,-8.976],[-58.965,-5.495],[-57.612,-3.152],[-55.434,-1.831],[-52.53,-1.419],[-49.593,-1.831],[-47.415,-3.152],[-46.062,-5.495],[-45.6,-8.976],[-45.6,-23.562],[-43.356,-23.562],[-43.356,-8.481],[-43.868,-5.033],[-45.485,-2.178],[-48.323,-0.247],[-52.53,0.462],[-56.705,-0.247],[-59.543,-2.178],[-61.16,-5.033],[-61.671,-8.481],[-61.671,-23.562]],"c":true},"ix":2},"nm":"U","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7490234375,0.654907226563,0.423522949219,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.948},"o":{"x":0.333,"y":0},"t":45,"s":[-10,0],"to":[1.167,0],"ti":[-1.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.434},"t":52,"s":[-3,0],"to":[1.667,0],"ti":[-0.5,0]},{"t":77,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"U","np":3,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-0.616,0.209],[-0.462,0.396],[-0.275,0.561],[0,0.726],[0.836,0.836],[1.716,0],[0,0],[0,0]],"o":[[0.682,0],[0.616,-0.209],[0.462,-0.396],[0.275,-0.561],[0,-1.452],[-0.836,-0.836],[0,0],[0,0],[0,0]],"v":[[-28.665,-12.375],[-26.718,-12.689],[-25.101,-13.596],[-23.995,-15.031],[-23.583,-16.962],[-24.837,-20.394],[-28.665,-21.648],[-37.047,-21.648],[-37.047,-12.375]],"c":true},"ix":2},"nm":"R","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[-0.869,-0.242],[-0.649,-0.495],[-0.385,-0.781],[0,-1.056],[0.77,-1.1],[1.518,-0.308],[0,0],[-0.506,-0.297],[-0.319,-0.462],[-0.143,-0.605],[-0.044,-0.704],[-0.022,-0.572],[-0.066,-0.583],[-0.143,-0.517],[-0.242,-0.286],[0,0],[0.077,0.319],[0.033,0.341],[0.022,0.33],[0.022,0.242],[0.099,0.825],[0.319,0.649],[0.605,0.396],[1.056,-0.044],[0,0],[0,0],[0,0],[0,0]],"o":[[0.968,0],[0.869,0.242],[0.649,0.495],[0.385,0.781],[0,1.496],[-0.77,1.1],[0,0],[0.77,0.11],[0.506,0.297],[0.319,0.462],[0.143,0.605],[0.022,0.396],[0.022,0.572],[0.066,0.583],[0.143,0.517],[0,0],[-0.132,-0.22],[-0.077,-0.319],[-0.033,-0.341],[-0.022,-0.33],[-0.044,-0.836],[-0.099,-0.825],[-0.319,-0.649],[-0.605,-0.396],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-28.5,-23.562],[-25.744,-23.199],[-23.467,-22.094],[-21.916,-20.18],[-21.339,-17.424],[-22.494,-13.53],[-25.926,-11.418],[-25.926,-11.352],[-24.012,-10.742],[-22.774,-9.603],[-22.081,-8.003],[-21.801,-6.039],[-21.735,-4.587],[-21.603,-2.855],[-21.289,-1.204],[-20.712,0],[-23.187,0],[-23.5,-0.809],[-23.665,-1.799],[-23.748,-2.805],[-23.814,-3.663],[-24.028,-6.154],[-24.655,-8.365],[-26.041,-9.933],[-28.533,-10.461],[-37.047,-10.461],[-37.047,0],[-39.291,0],[-39.291,-23.562]],"c":true},"ix":2},"nm":"R","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"パスを結合 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7490234375,0.654907226563,0.423522949219,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.945},"o":{"x":0.333,"y":0},"t":45,"s":[-6,0],"to":[0.667,0],"ti":[-1,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.391},"t":52,"s":[-2,0],"to":[1,0],"ti":[-0.333,0]},{"t":77,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"R","np":5,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-4.311,-9.24],[-8.865,-21.318],[-13.584,-9.24]],"c":true},"ix":2},"nm":"A","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-7.512,-23.562],[1.728,0],[-0.681,0],[-3.552,-7.326],[-14.277,-7.326],[-17.115,0],[-19.491,0],[-10.02,-23.562]],"c":true},"ix":2},"nm":"A","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"パスを結合 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7490234375,0.654907226563,0.423522949219,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.964},"o":{"x":0.333,"y":0},"t":45,"s":[-1,0],"to":[0.167,0],"ti":[-0.167,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"t":52,"s":[0,0],"to":[0,0],"ti":[0,0]},{"t":77,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"A","np":5,"cix":2,"bm":0,"ix":6,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-0.704,0.242],[-0.55,0.561],[-0.33,0.902],[0,1.298],[0.231,0.957],[0.528,0.682],[0.869,0.363],[1.276,0],[0,0],[0,0]],"o":[[0.748,0],[0.704,-0.242],[0.55,-0.561],[0.33,-0.902],[0,-1.188],[-0.231,-0.957],[-0.528,-0.682],[-0.869,-0.363],[0,0],[0,0],[0,0]],"v":[[22.419,-4.356],[24.597,-4.719],[26.478,-5.924],[27.798,-8.118],[28.293,-11.418],[27.946,-14.635],[26.808,-17.094],[24.712,-18.661],[21.495,-19.206],[17.799,-19.206],[17.799,-4.356]],"c":true},"ix":2},"nm":"D","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[-1.309,-0.484],[-0.957,-0.968],[-0.539,-1.452],[0,-1.958],[0.44,-1.452],[0.891,-1.056],[1.331,-0.605],[1.804,0],[0,0],[0,0]],"o":[[1.518,0],[1.309,0.484],[0.957,0.968],[0.539,1.452],[0,1.716],[-0.44,1.452],[-0.891,1.056],[-1.331,0.605],[0,0],[0,0],[0,0]],"v":[[22.782,-23.562],[27.022,-22.836],[30.421,-20.658],[32.665,-17.028],[33.474,-11.913],[32.814,-7.161],[30.817,-3.399],[27.484,-0.908],[22.782,0],[12.618,0],[12.618,-23.562]],"c":true},"ix":2},"nm":"D","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"パスを結合 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7490234375,0.654907226563,0.423522949219,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.964},"o":{"x":0.333,"y":0},"t":45,"s":[-1,0],"to":[0.167,0],"ti":[-0.167,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"t":52,"s":[0,0],"to":[0,0],"ti":[0,0]},{"t":77,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"D","np":5,"cix":2,"bm":0,"ix":7,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[41.915,-23.562],[41.915,0],[36.734,0],[36.734,-23.562]],"c":true},"ix":2},"nm":"I","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7490234375,0.654907226563,0.423522949219,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.959},"o":{"x":0.333,"y":0},"t":45,"s":[3,0],"to":[-0.458,0],"ti":[0.5,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.146,"y":1},"t":52,"s":[0.25,0],"to":[-0.5,0],"ti":[0.042,0]},{"t":77,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"I","np":3,"cix":2,"bm":0,"ix":8,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1.122,-0.473],[1.144,0],[1.441,0.627],[0.99,1.1],[0.528,1.485],[0,1.716],[-0.528,1.507],[-0.99,1.122],[-1.441,0.638],[-1.804,0],[-1.133,-0.363],[-0.913,-0.704],[-0.594,-1.034],[-0.132,-1.342],[0,0],[0.88,0.66],[1.254,0],[0.814,-0.451],[0.506,-0.759],[0.231,-0.968],[0,-1.034],[-0.231,-0.935],[-0.506,-0.748],[-0.814,-0.451],[-1.166,0],[-0.935,0.869],[-0.154,1.65],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[-1.122,0.473],[-1.804,0],[-1.441,-0.627],[-0.99,-1.1],[-0.528,-1.485],[0,-1.76],[0.528,-1.507],[0.99,-1.122],[1.441,-0.638],[1.21,0],[1.133,0.363],[0.913,0.704],[0.594,1.034],[0,0],[-0.308,-1.32],[-0.88,-0.66],[-1.166,0],[-0.814,0.451],[-0.506,0.759],[-0.231,0.968],[0,0.99],[0.231,0.935],[0.506,0.748],[0.814,0.451],[1.716,0],[0.935,-0.869],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-0.924,1.188]],"v":[[60.124,-0.182],[56.725,0.528],[51.858,-0.413],[48.211,-3.003],[45.934,-6.88],[45.142,-11.682],[45.934,-16.583],[48.211,-20.526],[51.858,-23.166],[56.725,-24.123],[60.24,-23.579],[63.309,-21.978],[65.569,-19.371],[66.658,-15.807],[61.708,-15.807],[59.926,-18.777],[56.725,-19.767],[53.755,-19.09],[51.775,-17.275],[50.67,-14.685],[50.323,-11.682],[50.67,-8.794],[51.775,-6.27],[53.755,-4.471],[56.725,-3.795],[60.702,-5.098],[62.335,-8.877],[57.121,-8.877],[57.121,-12.738],[67.021,-12.738],[67.021,0],[63.721,0],[63.193,-2.673]],"c":true},"ix":2},"nm":"G","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7490234375,0.654907226563,0.423522949219,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.956},"o":{"x":0.333,"y":0},"t":45,"s":[6,0],"to":[-0.833,0],"ti":[1,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.781},"t":52,"s":[1,0],"to":[-1,0],"ti":[0.167,0]},{"t":77,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"G","np":3,"cix":2,"bm":0,"ix":9,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[76.238,-23.562],[76.238,0],[71.057,0],[71.057,-23.562]],"c":true},"ix":2},"nm":"I","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7490234375,0.654907226563,0.423522949219,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.954},"o":{"x":0.333,"y":0},"t":45,"s":[10,0],"to":[-1.333,0],"ti":[1.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.651},"t":52,"s":[2,0],"to":[-1.667,0],"ti":[0.333,0]},{"t":77,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"I","np":3,"cix":2,"bm":0,"ix":10,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[78.482,-19.206],[78.482,-23.562],[97.787,-23.562],[97.787,-19.206],[90.725,-19.206],[90.725,0],[85.544,0],[85.544,-19.206]],"c":true},"ix":2},"nm":"T","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7490234375,0.654907226563,0.423522949219,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.947},"o":{"x":0.333,"y":0},"t":45,"s":[13,0],"to":[-1.5,0],"ti":[2.167,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.423},"t":52,"s":[4,0],"to":[-2.167,0],"ti":[0.667,0]},{"t":77,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"T","np":3,"cix":2,"bm":0,"ix":11,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[109.686,-9.108],[106.716,-17.754],[106.65,-17.754],[103.581,-9.108]],"c":true},"ix":2},"nm":"A","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[109.389,-23.562],[118.2,0],[112.821,0],[111.039,-5.247],[102.228,-5.247],[100.38,0],[95.166,0],[104.076,-23.562]],"c":true},"ix":2},"nm":"A","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"パスを結合 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7490234375,0.654907226563,0.423522949219,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.947},"o":{"x":0.333,"y":0},"t":45,"s":[16,0],"to":[-1.833,0],"ti":[2.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.417},"t":52,"s":[5,0],"to":[-2.667,0],"ti":[0.833,0]},{"t":77,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"A","np":5,"cix":2,"bm":0,"ix":12,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[125.309,-23.562],[125.309,-4.356],[136.792,-4.356],[136.792,0],[120.128,0],[120.128,-23.562]],"c":true},"ix":2},"nm":"L","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.7490234375,0.654907226563,0.423522949219,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"塗り 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.948},"o":{"x":0.333,"y":0},"t":45,"s":[20,0],"to":[-2.333,0],"ti":[3.333,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.434},"t":52,"s":[6,0],"to":[-3.333,0],"ti":[1,0]},{"t":77,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"トランスフォーム"}],"nm":"L","np":3,"cix":2,"bm":0,"ix":13,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0}]},{"id":"comp_5","layers":[{"ddd":0,"ind":1,"ty":1,"nm":"グレー系オレンジ 平面 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":15,"s":[0]},{"t":35,"s":[100]}],"ix":11},"r":{"a":0,"k":23,"ix":10},"p":{"a":0,"k":[187.5,-3.5,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":15,"s":[125,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":75,"s":[125,18.5,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.216,0.333],"y":[0,0.663,0]},"t":117,"s":[125,18.5,100]},{"t":150,"s":[125,0,100]}],"ix":6}},"ao":0,"sw":375,"sh":812,"sc":"#bfa66c","ip":15,"op":480,"st":15,"bm":0},{"ddd":0,"ind":2,"ty":1,"nm":"グレー系オレンジ 平面 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0]},{"t":33,"s":[100]}],"ix":11},"r":{"a":0,"k":23,"ix":10},"p":{"a":0,"k":[187.5,176.5,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":13,"s":[147,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":73,"s":[147,12,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.987,0.333],"y":[0,0,0]},"t":115,"s":[147,12,100]},{"t":148,"s":[147,0,100]}],"ix":6}},"ao":0,"sw":375,"sh":812,"sc":"#bfa66c","ip":13,"op":480,"st":13,"bm":0},{"ddd":0,"ind":3,"ty":1,"nm":"グレー系オレンジ 平面 3","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":12,"s":[0]},{"t":32,"s":[100]}],"ix":11},"r":{"a":0,"k":-23,"ix":10},"p":{"a":0,"k":[187.5,335,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":12,"s":[147,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":72,"s":[147,12,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.987,0.333],"y":[0,0,0]},"t":114,"s":[147,12,100]},{"t":147,"s":[147,0,100]}],"ix":6}},"ao":0,"sw":375,"sh":812,"sc":"#bfa66c","ip":12,"op":480,"st":12,"bm":0},{"ddd":0,"ind":4,"ty":1,"nm":"グレー系オレンジ 平面 4","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":10,"s":[0]},{"t":30,"s":[100]}],"ix":11},"r":{"a":0,"k":-23,"ix":10},"p":{"a":0,"k":[187.5,422.5,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":10,"s":[208,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":70,"s":[340,53,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.987,0.333],"y":[0,0,0]},"t":112,"s":[208,53,100]},{"t":145,"s":[208,0,100]}],"ix":6}},"ao":0,"sw":375,"sh":812,"sc":"#bfa66c","ip":10,"op":480,"st":10,"bm":0}]},{"id":"comp_6","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"コンポーネント 84","refId":"comp_7","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":375,"h":812,"ip":0,"op":3600,"st":0,"bm":0}]},{"id":"comp_7","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"matt 2","refId":"comp_8","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":375,"h":812,"ip":0,"op":480,"st":0,"bm":0}]},{"id":"comp_8","layers":[{"ddd":0,"ind":1,"ty":1,"nm":"グレー系シアン青 平面 1","sr":1,"ks":{"o":{"a":0,"k":40,"ix":11},"r":{"a":0,"k":23,"ix":10},"p":{"a":0,"k":[187.5,-3.5,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":15,"s":[125,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":75,"s":[125,18.5,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.216,0.333],"y":[0,0.562,0]},"t":129,"s":[125,18.5,100]},{"t":157,"s":[125,0,100]}],"ix":6}},"ao":0,"sw":375,"sh":812,"sc":"#182640","ip":15,"op":480,"st":15,"bm":0},{"ddd":0,"ind":2,"ty":1,"nm":"グレー系ブルー 平面 1","sr":1,"ks":{"o":{"a":0,"k":48,"ix":11},"r":{"a":0,"k":23,"ix":10},"p":{"a":0,"k":[187.5,176.5,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":13,"s":[147,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":73,"s":[147,12,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.987,0.333],"y":[0,0,0]},"t":127,"s":[147,12,100]},{"t":160,"s":[147,0,100]}],"ix":6}},"ao":0,"sw":375,"sh":812,"sc":"#1e2247","ip":13,"op":480,"st":13,"bm":0},{"ddd":0,"ind":3,"ty":1,"nm":"暗いシアン青 平面 2","sr":1,"ks":{"o":{"a":0,"k":47,"ix":11},"r":{"a":0,"k":-23,"ix":10},"p":{"a":0,"k":[187.5,335,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":12,"s":[147,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":72,"s":[147,12,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.987,0.333],"y":[0,0,0]},"t":126,"s":[147,12,100]},{"t":159,"s":[147,0,100]}],"ix":6}},"ao":0,"sw":375,"sh":812,"sc":"#051b37","ip":12,"op":480,"st":12,"bm":0},{"ddd":0,"ind":4,"ty":1,"nm":"暗いパープル 平面 1","sr":1,"ks":{"o":{"a":0,"k":80,"ix":11},"r":{"a":0,"k":-23,"ix":10},"p":{"a":0,"k":[187.5,362.5,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":10,"s":[208,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":70,"s":[340,53,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.987,0.333],"y":[0,0,0]},"t":124,"s":[208,53,100]},{"t":157,"s":[208,0,100]}],"ix":6}},"ao":0,"sw":375,"sh":812,"sc":"#261a39","ip":10,"op":480,"st":10,"bm":0}]},{"id":"comp_9","layers":[{"ddd":0,"ind":2,"ty":2,"nm":"画像 91","refId":"image_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0,0],[375,0],[375,812],[0,812]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"マスク 1"}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":2,"nm":"画像 90","refId":"image_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0,0],[375,0],[375,812],[0,812]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"マスク 1"}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":2,"nm":"画像 89","refId":"image_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0,0],[375,0],[375,812],[0,812]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"マスク 1"}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":2,"nm":"画像 88","refId":"image_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0,0],[375,0],[375,812],[0,812]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"マスク 1"}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":2,"nm":"画像 87","refId":"image_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0,0],[375,0],[375,812],[0,812]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"マスク 1"}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":2,"nm":"画像 86","refId":"image_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0,0],[375,0],[375,812],[0,812]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"マスク 1"}],"ip":0,"op":3600,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":2,"nm":"画像 85","refId":"image_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0,0],[375,0],[375,812],[0,812]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"マスク 1"}],"ip":0,"op":3600,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"matt 3","td":1,"refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"tm":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":120,"s":[0]},{"t":600,"s":[8]}],"ix":2},"w":375,"h":812,"ip":-15,"op":3720,"st":120,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"main","tt":2,"refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,406,0],"ix":2},"a":{"a":0,"k":[187.5,406,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":375,"h":812,"ip":0,"op":180,"st":0,"bm":0}],"markers":[{"tm":120,"cm":"1","dr":0}]}

Failed to load image image_0

it doesn't work for sequence map

For some lottie files，can not draw them perfectly

for example：

https://assets1.lottiefiles.com/private_files/lf30_zfYY24.json

https://assets6.lottiefiles.com/datafiles/e8edab32a32a8a9402f9cd63b457993c/Plane.json

Changing image dynamically

Is it possible to swap images referenced in an animation dynamically? I'm trying to achieve something like described here.

Illustration is not displaying correctly

Here is what the animation should look like:
https://lottiefiles.com/share/QrEXfp

When loaded into flutter it gets messed up.

json:
battery_optimizations.json.zip

Properties do not get set when using a LottieDelegate

Hi - thanks for a great library. I was feeling positive when I saw that you added the ability to change properties. However - it seems this is not working or else I am not using the LottieDelegates correctly.

Based on the attached images, can you advise what the correct way is to set the ORANGE fill colour to any other colour ?

This code does not seem to work - what is the format for the const [ ] ? in order to set properties ?

Lottie.asset(
'assets/lottie/Yakuza.json',
delegates: LottieDelegates(
text: (initialText) => translate(initialText),
values: [
              ValueDelegate.color(
                const ['Layer 1 Outlines', 'Shape', 'Fill'],
                value: Colors.red,
              ),
            ]),

The above code has no effect but if we do :

ValueDelegate.color(
const ['**'],
value: Colors.yellow,
),

Then ALL layers will get change which is not the required objective.

Specifying the entire path also doesnt work :

ValueDelegate.color(
const [
'Precomp_Container',
'Layer 1 Outlines_Outer',
'Layer 1 Outlines_Anchor',
'Shapes_Container',
'Container_Outer',
'Shape',
'Fill'
],
value: Colors.red,
),

Feature request - allow to play in reverse

I didnt see an option to play the given Json once in reverse. would be great to have this ability.

[Feature] parseColor function throw error

Some lottie json file had some error about color. Could you make it to show the warning in debug mode or pass default color option or something to fix it.

In my case I alway return transparent color: return Colors.transparent;

Thanks.

static Color parseColor(String colorString) {
    if (colorString.isNotEmpty && colorString[0] == '#') {
      // Use a long to avoid rollovers on #ffXXXXXX
      var color = int.parse(colorString.substring(1), radix: 16);
      if (colorString.length == 7) {
        // Set the alpha value
        color |= 0x00000000ff000000;
      } else if (colorString.length != 9) {
        print('[Warning] lottie-flutter unknown color colorString: $colorString');
        return Colors.transparent;
      }
      return Color(color);
    }
    print('[Warning] lottie-flutter unknown colorString is empty or format incorrect: $colorString');
    return Colors.transparent;
  }

this file can not work

lottie data file and video

17297.zip

Play once then loop from frame to frame

Is it possible to play animation once and then call the same animation to loop from e.g. frame 25 to frame 300? I've been looking for documentation in the issues and haven't been able to locate anything.

Hardware Acceleration?

Hi there, is there any way we can enable hardware acceleration for Lottie.
Afaik, we have to enable it manually in Android, it's turned off by default.

web support?

is there any plans or existing web support on this project?

images referenced from json not loading

example.zip

I've attached an example of json that references some images in a folder. I've made sure to add both the json and images folder to assets but for some reason the animation does not load the images.

However if I zip the animation and load the animation as a zip file it works, I'm trying to make it work without the zip file though.

Is referencing images from json not currently supported?

JSON file won't play - other files do work fine

I can't get this JSON file to play on Android or iOS but other files seem fine. Is this a limitation in the current lib?

It just displays the first frame as a static image and nothing animates.

https://lottiefiles.com/share/tE6v7b

  "v": "5.5.7",
  "meta": {
    "g": "LottieFiles AE 0.1.20",
    "a": "",
    "k": "",
    "d": "",
    "tc": "none"
  },
  "fr": 60,
  "ip": 0,
  "op": 75,
  "w": 444,
  "h": 444,
  "nm": "icon",
  "ddd": 1,
  "assets": [],
  "layers": [
    {
      "ddd": 1,
      "ind": 1,
      "ty": 4,
      "nm": "bp",
      "sr": 1,
      "ks": {
        "o": { "a": 0, "k": 100, "ix": 11 },
        "rx": {
          "a": 1,
          "k": [
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.167] },
              "t": 0,
              "s": [-720]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 1,
              "s": [-641.447]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 2,
              "s": [-571.464]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 3,
              "s": [-509.117]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 4,
              "s": [-453.572]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 5,
              "s": [-404.086]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 6,
              "s": [-360]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 7,
              "s": [-320.724]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 8,
              "s": [-285.732]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 9,
              "s": [-254.558]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 10,
              "s": [-226.786]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 11,
              "s": [-202.043]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 12,
              "s": [-180]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 13,
              "s": [-160.362]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 14,
              "s": [-142.866]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 15,
              "s": [-127.279]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 16,
              "s": [-113.393]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 17,
              "s": [-101.022]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 18,
              "s": [-90]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 19,
              "s": [-80.181]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 20,
              "s": [-71.433]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 21,
              "s": [-63.64]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 22,
              "s": [-56.696]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 23,
              "s": [-50.511]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 24,
              "s": [-45]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 25,
              "s": [-40.09]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 26,
              "s": [-35.717]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 27,
              "s": [-31.82]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 28,
              "s": [-28.348]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 29,
              "s": [-25.255]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 30,
              "s": [-22.5]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 31,
              "s": [-20.045]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 32,
              "s": [-17.858]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 33,
              "s": [-15.91]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 34,
              "s": [-14.174]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 35,
              "s": [-12.628]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 36,
              "s": [-11.25]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 37,
              "s": [-10.023]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 38,
              "s": [-8.929]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 39,
              "s": [-7.955]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 40,
              "s": [-7.087]
            },
            {
              "i": { "x": [0.833], "y": [0.841] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 41,
              "s": [-6.314]
            },
            {
              "i": { "x": [0.833], "y": [0.844] },
              "o": { "x": [0.167], "y": [0.175] },
              "t": 42,
              "s": [-5.625]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.178] },
              "t": 43,
              "s": [-4.997]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.177] },
              "t": 44,
              "s": [-4.446]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.176] },
              "t": 45,
              "s": [-3.953]
            },
            {
              "i": { "x": [0.833], "y": [0.842] },
              "o": { "x": [0.167], "y": [0.176] },
              "t": 46,
              "s": [-3.511]
            },
            {
              "i": { "x": [0.833], "y": [0.841] },
              "o": { "x": [0.167], "y": [0.176] },
              "t": 47,
              "s": [-3.115]
            },
            {
              "i": { "x": [0.833], "y": [0.841] },
              "o": { "x": [0.167], "y": [0.175] },
              "t": 48,
              "s": [-2.757]
            },
            {
              "i": { "x": [0.833], "y": [0.84] },
              "o": { "x": [0.167], "y": [0.175] },
              "t": 49,
              "s": [-2.434]
            },
            {
              "i": { "x": [0.833], "y": [0.839] },
              "o": { "x": [0.167], "y": [0.174] },
              "t": 50,
              "s": [-2.138]
            },
            {
              "i": { "x": [0.833], "y": [0.838] },
              "o": { "x": [0.167], "y": [0.173] },
              "t": 51,
              "s": [-1.866]
            },
            {
              "i": { "x": [0.833], "y": [0.836] },
              "o": { "x": [0.167], "y": [0.171] },
              "t": 52,
              "s": [-1.613]
            },
            {
              "i": { "x": [0.833], "y": [0.835] },
              "o": { "x": [0.167], "y": [0.17] },
              "t": 53,
              "s": [-1.373]
            },
            {
              "i": { "x": [0.833], "y": [0.834] },
              "o": { "x": [0.167], "y": [0.168] },
              "t": 54,
              "s": [-1.141]
            },
            {
              "i": { "x": [0.833], "y": [0.834] },
              "o": { "x": [0.167], "y": [0.167] },
              "t": 55,
              "s": [-0.914]
            },
            {
              "i": { "x": [0.833], "y": [0.838] },
              "o": { "x": [0.167], "y": [0.168] },
              "t": 56,
              "s": [-0.689]
            },
            {
              "i": { "x": [0.833], "y": [0.848] },
              "o": { "x": [0.167], "y": [0.171] },
              "t": 57,
              "s": [-0.467]
            },
            {
              "i": { "x": [0.833], "y": [0.878] },
              "o": { "x": [0.167], "y": [0.184] },
              "t": 58,
              "s": [-0.256]
            },
            {
              "i": { "x": [0.833], "y": [0.917] },
              "o": { "x": [0.167], "y": [0.264] },
              "t": 59,
              "s": [-0.081]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0.007] },
              "t": 60,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 61,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 62,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 63,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 64,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 65,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 66,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 67,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 68,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 69,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 70,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 71,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 72,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 73,
              "s": [0]
            },
            {
              "i": { "x": [0.833], "y": [1] },
              "o": { "x": [0.167], "y": [0] },
              "t": 74,
              "s": [0]
            },
            { "t": 75, "s": [0] }
          ],
          "ix": 8
        },
        "ry": { "a": 0, "k": 0, "ix": 9 },
        "rz": { "a": 0, "k": 0, "ix": 10 },
        "or": { "a": 0, "k": [0, 0, 0], "ix": 7 },
        "p": { "a": 0, "k": [223.5, 214.5, 0], "ix": 2 },
        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
      },
      "ao": 0,
      "ef": [
        {
          "ty": 5,
          "nm": "AC IN [9AD] Controls",
          "np": 3,
          "mn": "Pseudo/MHAC PrCtrl 9AD 3",
          "ix": 1,
          "en": 1,
          "ef": [
            {
              "ty": 0,
              "nm": "Angle",
              "mn": "Pseudo/MHAC PrCtrl 9AD 3-0001",
              "ix": 1,
              "v": { "a": 0, "k": -720, "ix": 1 }
            }
          ]
        }
      ],
      "shapes": [
        {
          "ty": "gr",
          "it": [
            {
              "ind": 0,
              "ty": "sh",
              "ix": 1,
              "ks": {
                "a": 0,
                "k": {
                  "i": [
                    [19.05, 0],
                    [5.61, -3.93],
                    [0, 0],
                    [0, -8.09],
                    [0, 0],
                    [0, 8.08],
                    [0, 0],
                    [-7.38, 0],
                    [0, 19]
                  ],
                  "o": [
                    [-7.38, 0],
                    [0, 0],
                    [-8.11, 0],
                    [0, 0],
                    [8.11, 0],
                    [0, 0],
                    [5.61, 3.93],
                    [19.05, 0],
                    [0, -19]
                  ],
                  "v": [
                    [0, -34.4],
                    [-19.82, -28.16],
                    [-19.82, -50.5],
                    [-34.5, -35.86],
                    [-34.5, 50.5],
                    [-19.82, 35.86],
                    [-19.82, 28.16],
                    [0, 34.4],
                    [34.5, 0]
                  ],
                  "c": true
                },
                "ix": 2
              },
              "nm": "Path 1",
              "mn": "ADBE Vector Shape - Group",
              "hd": false
            },
            {
              "ind": 1,
              "ty": "sh",
              "ix": 2,
              "ks": {
                "a": 0,
                "k": {
                  "i": [
                    [11.05, 0],
                    [0, 10.77],
                    [-11.05, 0],
                    [0, -10.77]
                  ],
                  "o": [
                    [-11.05, 0],
                    [0, -10.77],
                    [11.05, 0],
                    [0, 10.77]
                  ],
                  "v": [
                    [-0.5, 19.5],
                    [-20.5, 0],
                    [-0.5, -19.5],
                    [19.5, 0]
                  ],
                  "c": true
                },
                "ix": 2
              },
              "nm": "Path 2",
              "mn": "ADBE Vector Shape - Group",
              "hd": false
            },
            {
              "ty": "mm",
              "mm": 1,
              "nm": "Merge Paths 1",
              "mn": "ADBE Vector Filter - Merge",
              "hd": false
            },
            {
              "ty": "fl",
              "c": {
                "a": 0,
                "k": [0.996078014374, 0.992156982422, 0.980391979218, 1],
                "ix": 4
              },
              "o": { "a": 0, "k": 100, "ix": 5 },
              "r": 1,
              "bm": 0,
              "nm": "Fill 1",
              "mn": "ADBE Vector Graphic - Fill",
              "hd": false
            },
            {
              "ty": "tr",
              "p": { "a": 0, "k": [0, 0], "ix": 2 },
              "a": { "a": 0, "k": [0, 0], "ix": 1 },
              "s": { "a": 0, "k": [300, 300], "ix": 3 },
              "r": { "a": 0, "k": 0, "ix": 6 },
              "o": { "a": 0, "k": 100, "ix": 7 },
              "sk": { "a": 0, "k": 0, "ix": 4 },
              "sa": { "a": 0, "k": 0, "ix": 5 },
              "nm": "Transform"
            }
          ],
          "nm": "bp",
          "np": 4,
          "cix": 2,
          "bm": 0,
          "ix": 1,
          "mn": "ADBE Vector Group",
          "hd": false
        }
      ],
      "ip": 0,
      "op": 75,
      "st": 0,
      "bm": 0
    }
  ],
  "markers": []
}

Import error when using with google_maps_flutter package

Hi,

I'm using lottie and google_maps_flutter package in my project. When I updated lottie version to 0.3.6 I got this error.

Error: 'Marker' is imported from both 'package:google_maps_flutter_platform_interface/src/types/marker.dart' and 'package:lottie/src/model/marker.dart'.

Then i downgrade lottie version to 0.3.5.

Go to specific frame like react native version.

in react native version we can play animation from one frame to another

animation.current.play(start, end);

How can we do this in flutter?

Dash offset isn't animating appropriately

https://lottiefiles.com/marketplace/two-tone-weather-icons

Tornado, Thunder Storm, Fog, and Windy do not animate properly.

lottie-files.zip

Play animation on tap

Hello, how can we play the animation when the user taps in the UI? :)

Any example?

Can't play json file

Hi, i can't play json file downloaded from Lottiefiles.com.

I tried with Lottie.asset and Lottie.network.

Animation: https://lottiefiles.com/1347-icon-delivery
Json File: https://assets7.lottiefiles.com/datafiles/oTaonrK3qDgUk9h/data.json

Is json file wrong?

Missing some detail when render lottie file

This lib render as follow:

And lottie lib renders as follow

There some thing missing when rendering

Here json file
bluetoothscanning.json.zip

Rotation animation is not displayed correctly

The animation should look like:

But it here is how the library renders it:

During the animation, arrows are always directed to the left.

json:
change.json.zip

Colors not visible

Good morning,
first of all thank for this beautiful library!
I'm trying to visualize this json file:

{"v":"5.5.9","fr":24,"ip":0,"op":37,"w":500,"h":500,"nm":"488-bicycle-outline","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Color  & Stroke Change","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":5,"nm":"Color 1 ","np":3,"mn":"ADBE Color Control","ix":1,"en":1,"ef":[{"ty":2,"nm":"Color","mn":"ADBE Color Control-0001","ix":1,"v":{"a":0,"k":[0.070588238537,0.074509806931,0.192156866193,1],"ix":1}}]},{"ty":5,"nm":"Color 2","np":3,"mn":"ADBE Color Control","ix":2,"en":1,"ef":[{"ty":2,"nm":"Color","mn":"ADBE Color Control-0001","ix":1,"v":{"a":0,"k":[0.031372550875,0.658823549747,0.541176497936,1],"ix":1}}]},{"ty":5,"nm":"Slider Control","np":3,"mn":"ADBE Slider Control","ix":3,"en":1,"ef":[{"ty":0,"nm":"Slider","mn":"ADBE Slider Control-0001","ix":1,"v":{"a":0,"k":100,"ix":1}}]}],"ip":0,"op":120,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Warstwa 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250.5,368.5,0],"ix":2},"a":{"a":0,"k":[0.5,118.5,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":9.75,"s":[98,102,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":16,"s":[102,98,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":23,"s":[98,102,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":30,"s":[102,98,100]},{"t":36,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-86.731,-110.066],[-46.701,-110.066]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.070588235294,0.074509803922,0.192156862745,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = thisComp.layer('Color  & Stroke Change').effect('Color 2')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul(18 / 100, thisComp.layer('Color  & Stroke Change').effect('Slider Control')('Slider'));"},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,-7.369],[0,0],[7.369,0]],"o":[[0,0],[0,0],[0,0],[7.369,0],[0,0],[0,7.369],[0,0]],"v":[[113.418,37.03],[80.06,-83.06],[73.705,-109.746],[105.075,-109.746],[118.418,-96.403],[118.418,-96.403],[105.075,-83.06]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.070588235294,0.074509803922,0.192156862745,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = thisComp.layer('Color  & Stroke Change').effect('Color 1 ')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul(18 / 100, thisComp.layer('Color  & Stroke Change').effect('Slider Control')('Slider'));"},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0,37.03],[80.06,-83.06],[-40.03,-57.651],[-62.716,-109.427]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.070588235294,0.074509803922,0.192156862745,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = thisComp.layer('Color  & Stroke Change').effect('Color 1 ')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul(18 / 100, thisComp.layer('Color  & Stroke Change').effect('Slider Control')('Slider'));"},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-112.089,37.03],[-40.03,-57.651],[0,37.03]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.070588235294,0.074509803922,0.192156862745,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = thisComp.layer('Color  & Stroke Change').effect('Color 1 ')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul(18 / 100, thisComp.layer('Color  & Stroke Change').effect('Slider Control')('Slider'));"},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":120,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Warstwa 4","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":36,"s":[720]}],"ix":10},"p":{"a":0,"k":[112.911,37.03,0],"ix":2},"a":{"a":0,"k":[-112.089,37.03,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[27.445,0],[0,27.445]],"o":[[-27.445,0],[0,-27.445]],"v":[[-112.089,86.723],[-161.783,37.03]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.070588235294,0.074509803922,0.192156862745,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = thisComp.layer('Color  & Stroke Change').effect('Color 2')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul(18 / 100, thisComp.layer('Color  & Stroke Change').effect('Slider Control')('Slider'));"},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 7","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-40.531],[40.531,0],[0,40.531],[-40.531,0]],"o":[[0,40.531],[-40.531,0],[0,-40.531],[40.531,0]],"v":[[-38.701,37.03],[-112.089,110.418],[-185.477,37.03],[-112.089,-36.358]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.070588235294,0.074509803922,0.192156862745,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = thisComp.layer('Color  & Stroke Change').effect('Color 2')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul(18 / 100, thisComp.layer('Color  & Stroke Change').effect('Slider Control')('Slider'));"},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 8","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":120,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Warstwa 2","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":36,"s":[720]}],"ix":10},"p":{"a":0,"k":[-112.089,37.03,0],"ix":2},"a":{"a":0,"k":[-112.089,37.03,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[27.445,0],[0,27.445]],"o":[[-27.445,0],[0,-27.445]],"v":[[-112.089,86.723],[-161.783,37.03]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.070588235294,0.074509803922,0.192156862745,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = thisComp.layer('Color  & Stroke Change').effect('Color 2')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul(18 / 100, thisComp.layer('Color  & Stroke Change').effect('Slider Control')('Slider'));"},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 7","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-40.531],[40.531,0],[0,40.531],[-40.531,0]],"o":[[0,40.531],[-40.531,0],[0,-40.531],[40.531,0]],"v":[[-38.701,37.03],[-112.089,110.418],[-185.477,37.03],[-112.089,-36.358]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.070588235294,0.074509803922,0.192156862745,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = thisComp.layer('Color  & Stroke Change').effect('Color 2')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul(18 / 100, thisComp.layer('Color  & Stroke Change').effect('Slider Control')('Slider'));"},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 8","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":120,"st":0,"bm":0}],"markers":[{"tm":13,"cm":"1","dr":0},{"tm":34,"cm":"2","dr":0},{"tm":48,"cm":"4","dr":0}]}

But this is the result and colours are not showed

the code is pretty equal to your library sample:

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/bike.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'),
          ],
        ),
      ),
    );
  }
}

I'm doing something wrong or it is a bug? I tried on iOS 13.5 simulator.

Thanks

Icon isn't animating correctly

This hurricane.json file is not animating correctly.

https://lottiefiles.com/7708-hurricane

Actual:

Expected:

hurricane.json.zip

Gray container bug after build

I have a bug. These gray containers are lottie animation. I see animation in debug mode. I released app but I can't see animation.
Project : https://github.com/mukireus/flutter_covid_19_tracker

Before Build:

After Build :

Referencing svgs from lottie animation

example.zip
Hi,

I've attached an example of an animation that references an svg but unfortunately the svg image does not show up.

I've tried using something like flutter_svg but this doesn't have an imageprovider that is compatible with lottie.

are svgs currently supported?

Draw frame by frame and export frame to image

How can we draw frame by frame and export these frames to image?

Feature request - allow to display specific frame

We would like to display first or last frame in some cases. would be great to have this ability

Playback using markers

Hi,

Not sure if this library allows this but I'm trying to achieve something written about here using markers.

Does this library support this feature? and if not is it on the roadmap?

Many thanks

device heat up or how to implement lottie player with multiple lottie files

How lottie player works under the hood
if I have 12 lottie files and switch them on button press using setState will it create new lottie player or reuse existing lottie player?

I'm not sure if question is correct or not. Seems like iOS device heat up after using for 10 mins or more.

By the way if you implement a "slider" for lottie players like swiping images how would you implement?

Here is how I did, copied starter code from you examples
P.S: if you past and run from examples it will work because I forked and run inside example folders with your asset lottie animations.

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

/// This example show how to play the Lottie animation in various way:
/// - Start and stop the animation on event callback
/// - Play the animation forward and backward
/// - Loop between two specific frames
///
/// This works by creating an AnimationController instance and passing it
/// to the Lottie widget.
/// The AnimationController class has a rich API to run the animation in various ways.
void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  AnimationController _controller;

  List<String> assets = [
    'assets/14595-thumbs-up.json',
    'assets/17297-fireworks.json',
    'assets/AndroidWave.json',
    'assets/bluetoothscanning.json',
    'assets/DynamicGradient.json',
    'assets/HamburgerArrow.json',
  ];

  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this)
      ..value = 0.5
      ..addListener(() {
        setState(() {
          // Rebuild the widget at each frame to update the "progress" label.
        });
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animation control'),
        ),
        body: Column(
          children: <Widget>[
            const SizedBox(height: 20),
            Lottie.asset(
              assets[_currentIndex],
              controller: _controller,
              height: 300,
              onLoaded: (composition) {
                setState(() {
                  _controller.duration = composition.duration;
                });
              },
            ),
            Text('${_controller.value.toStringAsFixed(2)}'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // Play backward
                IconButton(
                  icon: Icon(Icons.arrow_left),
                  onPressed: () {
                    _controller.reverse();
                  },
                ),
                // Pause
                IconButton(
                  icon: Icon(Icons.pause),
                  onPressed: () {
                    _controller.stop();
                  },
                ),
                // Play forward
                IconButton(
                  icon: Icon(Icons.arrow_right),
                  onPressed: () {
                    _controller.forward();
                  },
                ),
              ],
            ),
            const SizedBox(height: 30),
            RaisedButton(
              child: Text('Loop between frames'),
              onPressed: () {
                // Loop between 2 specifics frames

                var start = 0.1;
                var stop = 0.5;
                _controller.repeat(
                  min: start,
                  max: stop,
                  reverse: true,
                  period: _controller.duration * (stop - start),
                );
              },
            ),
            RaisedButton(
              child: Text('Play from beginning'),
              onPressed: () {
                _controller.forward(from: 0.0);
              },
            ),
            RaisedButton(
              child: Text('Next lottie'),
              onPressed: () {
                setState(() {
                  _currentIndex = (_currentIndex + 1) % assets.length;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

load from json object

I want to preload lottie from remote
and make a slider where on slide user can play other lotties without waiting response from remote.

Loading lotties from asset directory is not an options since I have a lot of lottiefiles

Do you have an example of loading lottie files from JSON object or it is feature request?

Best regards,
Sam

P.S: Most stable lottie lib for flutter so far. Good job!

Network regarding issue

I Have my flutter app with firestore. I use Lottie.network(), it works fine with the example link provided by you, But my link does not work fine. I can't figure out what's going wrong.
your example link: https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json
My link: https://raw.githubusercontent.com/therichiekumar/thejson/master/20880-stay-home-stay-safe.json

Kind Regards.

The animation on Android takes significant resources and slows down the UI.

Tested with following lottie: https://lottiefiles.com/17801-stay-at-home

I used the Lottie.asset() api with the downloaded JSON file.

On iOS, it works like a charm, on Android, the app slows down and is almost unusable while the animation is running.

SocketException

Hey,

Thanks for such a great library.

I found a bug where if i am using a network lottie and there is no internet then it gives me SocketException their should be some way to handle exceptions.

Play animation on Pressed

How can I play the animation with onPressed?

pubspec.yaml: A package may not list itself as a dependency.

Getting error while we get the lottie package

Issue resizing the json from assets

I'm trying to work with this as a loader when async function begins https://lottiefiles.com/448-ripple-loading-animation

calling _onLoading() from a button press

_onLoading() {
    showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return Lottie.asset("assets/animation/loading.json",
              fit: BoxFit.contain, width: 200, height: 200);
    });
}

In the documentation it said it works like a image asset but I think it doesn't :(

Flutter drive fails with lottie animation

Hi!
I have a problem with running flutter drive tests inside my project: if screen has lottie animations - test always fails.

Steps to reproduce:

Clone https://github.com/defint/lottie-flutter-bug
Run flutter drive --target=test_driver/app.dart
Tests should be fails
Comment this line: https://github.com/defint/lottie-flutter-bug/blob/master/lib/main.dart#L47
Run flutter drive --target=test_driver/app.dart
Tests should be passed

Can not clear memory when needed

There is LottieCache in lottie_provider.dart.
can i clear the Cache after page disposed?

Antialiasing issues

First of all, thank you for this package!

I have downloaded a very simple animation (just an inflating red circle): Recording
However, when I render it, it appears pixelated around the edges. Maybe it is because I show it very small? I specify width: 30 and height: 30.

Here is a screenshot of how it looks on an iPhone X:

Would love to hear what could be done to resolve the sharp edges of the circle.

profile mode

works fine on debug mode but when i run on profile mode the images change size and change alignment

animation is rendered incorrectly

We would like to use lottie in our application. However, the animation is rendered incorrectly in the application. Here once the .json, the expected result and the representation in the app.

maybe you have an idea to solve this problem.

Thanks!
loading_indicator.zip

Only showing the animated part when given specific dimensions

Hi!

I am developing a tablet app, and I run into this problem when I set the width and height to around 200.
The animation is a tent with a blue flag above. And only the flag(upper part) is animated, the tent(bottom part) is a static image.

here is the
JSON Preview.
tent.zip

It looks good on the web preview.

environment:
sdk: ">=2.7.0 <3.0.0"
lottie: ^0.4.1

I tested on Ipad pro 9.7 inches simulator / Android tablet simulator with (Android 9) / Android real device (Oppo Color 7, android 10). There's the same problem throughout all environments

Here is my implementation.

return SizedBox(
width: width,
height: height,
child: Lottie.asset(
assets,
repeat: true,
animate: true,
),
);

When I change the width and height to the number that larger or equal than 400, it will show properly, both the animated flag and the tent

I wonder whether this is the problem of the library or the JSON itself.

Any help would be appreciated.

Thank you very much!