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

Last update: Jan 2, 2023

Overview

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({Key? key}) : super(key: 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({Key? key}) : super(key: key);

  @override
  _MyAppState 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 LottieComposition.fromByteData to parse the file from a list of bytes.

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

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

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

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

    _composition = _loadComposition();
  }

  Future<LottieComposition> _loadComposition() async {
    var assetData = await rootBundle.load('assets/LottieLogo1.json');
    return await LottieComposition.fromByteData(assetData);
  }

  @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, {Key? key}) : super(key: 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),
          ),
        ],
      ),
    );
  }
}

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.

Comments

Fill Performance Improvements and other fixes
This PR improves some fill performance issues I found with various Lottie animations. This may help with issues #30 and #98. I think the real issue comes down to the render performance of Path.addPath(). I filed a Flutter issue for this: https://github.com/flutter/flutter/issues/65203. I spent a couple of weeks tracking down this issue and finding a workaround for it. The performance issue happens in the Render thread and seems directly related to how large the animation is on-screen. Flutter might be caching pre-rendered textures and running out of memory.

I've changed how Path.addPath() is called and how the path is rendered for fill_content.dart and gradient_fill_content.dart. I've tested many Lottie examples, and they seem to work fine.

Just as an example, the example/assets/Tests/bm.json animation gets ~60 fps with this fix, compared to 34-52 fps with the lottie-flutter 0.6.0 release. (This is on a Pixel 3 XL)

I have an issue getting all of the tests to pass. Three of the screenshot tests currently fail:

Screenshot AndroidWave.json at 0.0

Screenshot Mobilo/B.json at 0.5

Screenshot lottiefiles/atm_link.json at 1.0

They fail with the error: Golden "golden/lottiefiles/....png": Pixel test failed, 0.00% diff detected.. I think the "0.00% diff" is interesting. When I look at the generated test images in test/failures/ and diff images I see no differences - specifically in the ..._isolatedDiff.png images.

There are a couple of other changes:

I fixed a bug with the casing of "weather" in pubspec.yaml. Without this fix, the examples don't build on Ubuntu Linux.

The debugging class MeanCalculator wasn't initializing its fields, causing a null pointer exception when debugging.

I added antiAliasingSuggested to LottieDrawable to allow fill paints to be anti-aliased. It is off by default. It also provides some minor performance improvements without any noticeable loss in quality. It is only applied to fills right now.

I added PathFactory to create Paths rather than just new-ing them. path_factory.dart allows you to switch out the normal Path creation with a debug logging implementation so you can see all of the Path calls that are performed during a frame. Just create a DebugPath in the factory rather than Path.
opened by dsyrstad 8
use FilterQuality.low to default when draw image layer to fix some image render sawtooth

FilterQuality.none is the fastest filtering method but also the lowest quality, so use FilterQuality.low to default when draw image layer to fix some image render sawtooth by default.

opened by JerryFans 7
Lottie animation broken in production, works fine in debug mode.

My lottie animation shown when starting the app (not a native splash screen) works fine in debug mode but is broken in production.

I created a minimal app to reproduce the bug: https://github.com/ffactory-ofcl/lottie_files_splash_anim_tester/tree/banner

Using another lottie.json file, it works fine: https://github.com/ffactory-ofcl/lottie_files_splash_anim_tester/tree/bell

I discovered this bug while working on my app four in a row. The animation worked before I upgraded my flutter version to 2.10.5 and migrated the android embedding (flutterEmbedding) to version 2, as described here.

This is debug mode (works fine):

https://user-images.githubusercontent.com/33554869/166253463-4a84264e-0f13-4817-b2d1-b72f087127ba.mp4

But in production the animation is broken (positioned at the top, looks scaled, ...):

https://user-images.githubusercontent.com/33554869/166253490-4bd80f53-cee5-4c66-9207-53906897817d.mp4

opened by ffactory-ofcl 7
Lottie animation glitches
Hi I have an app with lots of Lottie animations. They work fine in a Windows app. Also look fine in lottiefiles.com. But they are glitchy in Flutter. Not all of them, but many, maybe around a third.

Glitches are either frame overlaps or blinking, as if there is a gap between frames.

Glitches are consistent, i.e. always happen in the same place, so not a performance issue. Also, they are not happening between repeats, but in the middle of the animation.

I have tried loading them as composition from memory. I have also tried a vanilla asset load and they are behaving the same, so it seems to me it is not my fault.

I can provide json if anyone wants to test.

Expanded( child: Lottie.asset('assets/lottie/4clear.json'), ),
help wanted
opened by under3415 6
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), ), );

opened by mslalith 6
Wrong size on profile mode
Hi !

First of all, thank you for the awesome package and for the Flutter integration !

The issue

I have an issue when running my app on profile mode.

When running on profile mode, at first, sizes and proportions seem OK.

But, after quitting the app and re-launching it, my animation size is wrong.

Flutter doctor

`Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.5.3, on macOS 11.5.2 20G95 darwin-x64, locale fr-FR) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) [✓] Xcode - develop for iOS and macOS [✓] Chrome - develop for the web [✓] Android Studio (version 2020.3) [✓] IntelliJ IDEA Community Edition (version 2018.2.7) [✓] VS Code (version 1.52.1) [✓] VS Code (version 1.27.2) [✓] Connected device (3 available)

• No issues found!`

Description

Here you can see 2 screens (first launch and second). In order to be able to compare, I have added an other animation picked up randomly in your example.

As you can see, mine has a wrong size on second launch but not yours. My lottie animation uses PNG, may be that is the issue ?

That raises 2 questions :

why does it appear only on profile mode and not in debug ?

if it is not due to PNG usage, what is the problem ?

Thank you in advance for your help and advices !
help wanted
opened by ThomasEcalle 5
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?

opened by appycamper 5

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}]}

opened by cuongloveit 5

Lottie animation with panoramic loop did not work correctly on Flutter

We have a Lottie animation with a panoramic loop that runs well on the web editor, but when we run it on Flutter, the animation is not working as on the web. The Penguins only have movement at the beginning but then are frozen after a few seconds.

Here is the recorded error: https://drive.google.com/file/d/1j_snUcKKm4VQoG_Vc_0gfuXDPRYZk8BX/view

This is the Lottie file: https://app.lottiefiles.com/share/7dcded65-b95c-43e0-b82f-6156b728afc4

Here is my Flutter code:

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            Lottie.asset(
              'assets/static/v2wide.json',
              height: double.infinity,
              width: double.infinity,
              fit: BoxFit.cover,
              frameRate: FrameRate.max,
            ),
          ],
        ),
      ),
    );
  }
}

My pubspec:

environment:
  sdk: '>=2.16.2 <3.0.0'

dependencies:
  lottie: ^2.1.0

Kindly help us to explain the reason why this happened and how we can fix it. Thank you very much

help wanted

opened by thangle255 4

Unable to load asset from Lottie.asset().

Loading an asset from a file does not work. I tried with .zip and .json. There are no errors other than that in the application screen. Everything works fine with Lottie.network, but I need to load the animations from a file. I searched the internet for a long time but found no solution. I tried the old lottie versions but it didn't fix the problem.

Lottie version: lottie: ^1.4.2

Flutter doctor:

Run:

opened by Solider1337 4
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!

opened by sundong212 4
Animation Glitch

Hi there,

My lottie animation looks like a timer. https://app.lottiefiles.com/share/bd94b739-5adc-4bff-b2ce-82040d8a2e99

In flutter is is completely out of whack, starts on an angle with a 3/4 circle instead of from zero, rotates independently from my animation, goes back and forth.

I'm on 12fps in After Effects.

What am I doing wrong?

opened by summerchill 0

Lottie Animation works only once

I am using Lottie Animation and want it to animate everytime I click on it , To this I am using GestureDetector However it only works the first time then for some reason it wont work again What am I doing wrong here ? Here is the code

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

void main() async {
  runApp(const App());
}

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

  @override
  State<App> createState() {
    return _AppState();
  }
}

class _AppState extends State<App> with SingleTickerProviderStateMixin {
  late final AnimationController my_location_controller;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    my_location_controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 5));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.lightBlue,
      home: Scaffold(
        backgroundColor: Colors.lightBlue,
        body: Center(
          child: SizedBox(
            width: 300,
            height: 300,
            child: GestureDetector(
              onTap: () {
                my_location_controller.forward();
              },
              child: Lottie.asset(
                'assets/my_location.json',
                controller: my_location_controller,
                animate: true,
                repeat: true,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

opened by jesussmile 0

add lottie api and example for interactive

add lottie api and example for interactive

api following https://github.com/bodymovin/lottie-api

example following https://codepen.io/airnan/pen/gvBMPV

opened by wangqiang1588 0

Lottie animation did not work correctly on our Flutter app

We have an Lottie animation that run well on web editor or React-native platform. But there’s an issue when we run it on Flutter platform, the animation is not running the way it was designed. On web editor or React-native

https://user-images.githubusercontent.com/76761567/202085656-824bf569-fac3-4c6e-afac-2b2210d0d6dd.mp4

On Flutter:

https://user-images.githubusercontent.com/76761567/202085985-c902aa1a-b2b2-4450-8501-1514a79a1ab1.mov

As you can see, in Flutter, each text rotates separately while we want it all to rotate at the same time. Kindly help us to explain the reason why this has happened and what can we do to fix it. Thank you!

This is json file: https://lottie.host/2944fba7-c69c-40c5-ae80-7b995d9570fa/YRYkZXTzeM.json

Here is my flutter code:

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text('Test Lottie'),
      ),
      body: Center(
       child: Lottie.network('https://lottie.host/2944fba7-c69c-40c5-ae80-7b995d9570fa/YRYkZXTzeM.json')
      ),
      
    );
  }
}

Here is my pubspec file:

name: test_lottie
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.16.2 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  lottie: ^1.4.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0

flutter:

  uses-material-design: true

Let me know if you have any suggestion. Thanks!

bug help wanted

opened by silastruonggoldenowl 4

[feat. request] Add VisibilityDetector to auto-pause animation

Dealing with many lottie files on same listView can be cpu intensive. It would be great to use VisibilityDetector so that we could enable option to “auto-pause lottie when animation is outside the viewport”.

opened by iosephmagno 0

Releases(v2.1.0)

v2.1.0(Dec 14, 2022)
Improve the cache to ensure that the animation is available on the first frame.
The method AssetLottie('anim.json').load() returns a SynchronousFuture if it has been loaded previously.

Expose the LottieCache singleton. It allows to change the cache behaviour and clear the entries.

void main() { Lottie.cache.maximumSize = 10; Lottie.cache.clear(); Lottie.cache.evict(NetworkLottie('https://lottie.com/anim.json')); }
Source code(tar.gz)
Source code(zip)
v2.0.0(Nov 9, 2022)
Breaking change: the lottie widget will be smaller if it relies on the intrinsic size of the composition. Previously the lottie parser was automatically multiplying the size of the composition by window.devicePixelRatio. This was incorrect as it results in a widget of a different size depending on the pixel ratio of the monitor. Furthermore, it created some bugs when the property window.devicePixelRatio was not available immediately at the start of the app (on Android release builds).

The code can be adapted to specify explicitly the size of the animation with width, height and fit properties.

Scaffold( body: Center( child: Lottie.asset( 'assets/LottieLogo1.json', height: 800, fit: BoxFit.contain, ), ), );
Source code(tar.gz)
Source code(zip)
v1.4.3(Sep 14, 2022)
Fixed some lints with Flutter 3.3.

Source code(tar.gz)
Source code(zip)
v1.4.2(Aug 25, 2022)
Use FilterQuality.low as default to draw image layers.

Source code(tar.gz)
Source code(zip)
v1.4.1(Aug 3, 2022)
Allow AlignmentGeometry for alignment.

Source code(tar.gz)
Source code(zip)
v1.4.0(Jul 27, 2022)
Added filterQuality property to control the performance vs quality trade-off to use when drawing images

Source code(tar.gz)
Source code(zip)
v1.3.0(Apr 14, 2022)
Added support for rounded corners on shapes and rects

Add support for text in dynamic properties (ValueDelegate)

Example:

Lottie.asset( 'assets/DynamicText.json', delegates: LottieDelegates(values: [ ValueDelegate.text( ['Text layer'], // The path to the text element to change value: 'The new text', ), ]), )

Improve stroke with offset

Add support for reversed polystar paths

Enforce order of operations to avoid rounding errors

Source code(tar.gz)
Source code(zip)
v1.2.2(Feb 14, 2022)
Internal maintenance: fix lints for Flutter 2.10

Source code(tar.gz)
Source code(zip)
v1.2.1(Sep 24, 2021)

fix: Revert Cubic to PathInterpolator.cubic
Source code(tar.gz)
Source code(zip)

v1.2.0(Sep 19, 2021)

Add support for gaussian blurs.

Example to blur some elements dynamically:

Lottie.asset(
  'assets/AndroidWave.json',
  delegates: LottieDelegates(values: [
    ValueDelegate.blurRadius(
      ['**'], // The path to the element to blur
      value: 20,
    ),
  ]),
)

Add support for drop shadows.

Example to add a shadow dynamically:

Lottie.asset(
  'assets/animation.json',
  delegates: LottieDelegates(values: [
    ValueDelegate.dropShadow(
      ['**'], // The path to the elements with shadow
      value: const DropShadow(
        color: Colors.blue,
        direction: 140,
        distance: 60,
        radius: 10,
      ),
    ),
  ]),
)

Source code(tar.gz)
Source code(zip)

v1.1.0(Jul 8, 2021)
Add errorBuilder callback to provide an alternative widget in case an error occurs during loading.

Lottie.network( 'https://example.does.not.exist/lottie.json', errorBuilder: (context, exception, stackTrace) { return const Text('😢'); }, );

Add onWarning to be notified when a warning occurs during the animation parsing or painting. Previously the warnings where written in an internal logger.
Lottie.asset('animation.json' onWarning: (warning) { _logger.info(warning); }, );

Various bug fixes

Source code(tar.gz)
Source code(zip)
v1.0.1(Mar 8, 2021)
Implement RenderBox.computeDryLayout

Source code(tar.gz)
Source code(zip)
v1.0.0(Feb 24, 2021)
Migrate to null safety

Fix some rendering bugs

Add an image delegate to dynamically change images

Allow to use an imageProviderFactory with a zip file

Source code(tar.gz)
Source code(zip)
v0.8.0-nullsafety.4(Feb 22, 2021)
Fix compilation error with the Web platform

Source code(tar.gz)
Source code(zip)
v0.8.0-nullsafety.3(Feb 8, 2021)
Add image to LottieDelegates

Fix imageProviderFactory to work with zip files

Source code(tar.gz)
Source code(zip)
v0.8.0-nullsafety.2(Feb 6, 2021)
Remove print after load

Source code(tar.gz)
Source code(zip)
v0.8.0-nullsafety.1(Feb 6, 2021)
Fix rendering bug with matte layers

Source code(tar.gz)
Source code(zip)
v0.8.0-nullsafety.0(Jan 23, 2021)

Migrate to null safety
Source code(tar.gz)
Source code(zip)
v0.7.0+1(Oct 23, 2020)

Fix Flutter Web compilation error
Source code(tar.gz)
Source code(zip)
v0.7.0(Oct 23, 2020)

Performance improvement for complex animations.
Source code(tar.gz)
Source code(zip)
v0.6.0(Aug 24, 2020)
Runs the animation at the frame rate specified in the json file (ie. An animation encoded with a 20 FPS will only be paint 20 times per seconds even though the AnimationController will invalidate the widget 60 times per seconds). The new frameRate property allows to opt-out this behaviour and have the widget to repaint at the device frame rate (FrameRate.max).

Automatically adds a RepaintBoundary around the widget. Since Lottie animations are generally complex to paint, a RepaintBoundary will separate the animation with the rest of the app and improve performance. A new property addRepaintBoundary allows to opt-out this behaviour.

Fixes a bug where we would call markNeedPaint when the animation was not changing. This removes unnecessary paints in animations with static periods.

Source code(tar.gz)
Source code(zip)
v0.5.1(Jul 26, 2020)

Remove direct dependencies on dart:io to support Flutter Web
Source code(tar.gz)
Source code(zip)
v0.5.0(Jul 26, 2020)
Support loading animation from network in a web app

Fix a couple of bugs with the web dev compiler

Source code(tar.gz)
Source code(zip)
v0.4.1(Jul 8, 2020)
Support color value stored as RGB, not RGBA

Source code(tar.gz)
Source code(zip)
v0.4.0+1(Jun 10, 2020)
Support latest version of the characters package

Source code(tar.gz)
Source code(zip)
v0.4.0(Jun 1, 2020)
Disable "Merge paths" by default and provide an option to enable them.
This is the same behavior as in Lottie-android.
Merge paths currently don't work if the the operand shape is entirely contained within the first shape. If you need to cut out one shape from another shape, use an even-odd fill type instead of using merge paths.

Merge paths can be enabled with:

Lottie.asset('file.json', options: LottieOptions(enableMergePaths: true));
Source code(tar.gz)
Source code(zip)
v0.3.6(May 19, 2020)
Export the Marker class

Source code(tar.gz)
Source code(zip)
v0.3.5(May 18, 2020)

Fix a bug with a wrongly clipped rectangle.
Source code(tar.gz)
Source code(zip)
v0.3.4(May 15, 2020)
Fix a bug with dashed path

Source code(tar.gz)
Source code(zip)
v0.3.3(Apr 3, 2020)
Fix a bug with rounded rectangle shape

Source code(tar.gz)
Source code(zip)