Compare commits

..

2 Commits

Author SHA1 Message Date
5739f3b2ec Only animation that works 2020-02-14 19:22:44 +01:00
dd04d149e8 Add web sample app 2020-01-31 23:54:28 +01:00
1360 changed files with 61268 additions and 246687 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@ -1,9 +0,0 @@
# Dependabot configuration file.
# See https://docs.github.com/en/code-security/dependabot/dependabot-version-updates
version: 2
updates:
- package-ecosystem: "github-actions"
directory: "/"
schedule:
interval: "weekly"

View File

@ -1,45 +0,0 @@
name: Lottie Flutter
on:
pull_request:
push:
branches:
- master
jobs:
analyze_and_test:
name: Flutter analyze
runs-on: macos-14
steps:
- uses: actions/checkout@v4
- uses: subosito/flutter-action@v2
with:
channel: 'stable'
- run: flutter doctor
- run: flutter --version
- run: flutter pub get
working-directory: example
- run: flutter analyze
- run: flutter test
- run: flutter test
working-directory: example
- run: flutter pub run tool/prepare_submit.dart
- name: "check for uncommitted changes"
run: |
git diff --exit-code --stat -- . ':(exclude)*pubspec.lock' \
|| (echo "##[error] found changed files after build. please run 'dart tool/prepare_submit.dart'" \
"and check in all changes" \
&& exit 1)
shell: bash
build_web_version:
name: Check that the web version can compile
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: subosito/flutter-action@v2
with:
channel: 'stable'
- run: flutter precache web
- run: flutter pub get
working-directory: example
- run: flutter build web
working-directory: example

View File

@ -1,22 +0,0 @@
name: Coverage
on:
pull_request:
push:
branches:
- master
jobs:
coverage:
name: Coverage
runs-on: macos-14
steps:
- uses: actions/checkout@v4
- uses: subosito/flutter-action@v2
with:
channel: 'stable'
- run: flutter test --coverage
- name: Upload coverage reports to Codecov
uses: codecov/codecov-action@v5.1.1
with:
token: ${{ secrets.CODECOV_TOKEN }}

View File

@ -1,29 +0,0 @@
name: Publish package to pub.dev
on:
push:
tags:
- v*
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: subosito/flutter-action@v2
with:
channel: 'stable'
- run: flutter pub get
- run: flutter pub run tool/publish/check_version.dart ${GITHUB_REF}
- name: Setup credentials
run: |
mkdir -p $XDG_CONFIG_HOME/dart
cat <<EOF > $XDG_CONFIG_HOME/dart/pub-credentials.json
{
"accessToken":"${{ secrets.OAUTH_ACCESS_TOKEN }}",
"refreshToken":"${{ secrets.OAUTH_REFRESH_TOKEN }}",
"tokenEndpoint":"https://accounts.google.com/o/oauth2/token",
"scopes": [ "openid", "https://www.googleapis.com/auth/userinfo.email" ],
"expiration": 1691492965565
}
EOF
- name: Publish package
run: flutter pub publish --force

12
.gitignore vendored
View File

@ -1,12 +0,0 @@
.*
_*
!.gitignore
!.github
!.pubignore
**/failures/*.png
*.iml
**/doc/api/
build/

View File

@ -1,10 +0,0 @@
# This file tracks properties of this Flutter project.
# Used by Flutter tool to assess capabilities and perform upgrades etc.
#
# This file should be version controlled and should not be manually edited.
version:
revision: 27321ebbad34b0a3fafe99fac037102196d655ff
channel: stable
project_type: package

View File

@ -1,15 +0,0 @@
.dart_tool/
.packages
build/
doc/api/
*.iml
_*
.*
**/failures/*.png
test/golden/
test/goldens/
example/assets/
example/android/
example/ios/
example/macos/
example/web/

View File

@ -1,397 +0,0 @@
## 3.3.1
- Update `package:archive` to `>=4.0.0` constraint
## 3.3.0
- Requires Flutter 3.27 and fix lints.
- Add conditional imports to prevent importing `dart:io` on Web targets
## 3.2.0
- Apply Blend mode at layer level
## 3.1.3
- Update `package:archive` dependency constraints
## 3.1.2
- Fixes for some animations generated by lottiefiles.com
## 3.1.1
- Fix rounding-off error on progress calculation
- Allow missing end values for integer animations
## 3.1.0
- Use `package:http` for `Lottie.network`. This allows to drop dependency on `dart:html` and be compatible with `wasm`.
- Fix new lints
## 3.0.0
- Add `renderCache` parameter.
```dart
Lottie.asset('assets/complex_animation.json',
renderCache: RenderCache.raster,
)
```
Opt-in to a special render mode where the frames of the animation are lazily rendered and kept in a cache.
Subsequent runs of the animation are cheaper to render.
There are 2 kinds of caches:
**RenderCache.raster**: keep the frame rasterized in the cache (as [dart:ui.Image]).
Subsequent runs of the animation are very cheap for both the CPU and GPU but it takes
a lot of memory.
**RenderCache.drawingCommands**: keep the frame as a list of graphical operations ([dart:ui.Picture]).
Subsequent runs of the animation are cheaper for the CPU but not for the GPU.
- Allow to load Telegram Stickers (.tgs)
```dart
Lottie.asset(
'sticker.tgs',
decoder: LottieComposition.decodeGZip,
)
```
- Expose a hook to customize how to decode zip archives. This is useful for dotlottie archives (.lottie) when we want
to specify a specific .json file inside the archive
```dart
Lottie.asset(
'animation.lottie',
decoder: customDecoder,
);
Future<LottieComposition?> customDecoder(List<int> bytes) {
return LottieComposition.decodeZip(bytes, filePicker: (files) {
return files.firstWhere((f) => f.name == 'animations/cat.json');
});
}
```
- Add `backgroundLoading` parameter to `Lottie.asset|network|file|memory`.
If `backgroundLoading` is true, the animation will be loaded in a background isolate.
This is useful for large animations that can take a long time to parse and block the UI work.
- Remove the name property from `LottieComposition`
- `imageProviderFactory` is not used in .zip file by default anymore.
To restore the old behaviour, use:
```dart
Future<LottieComposition?> decoder(List<int> bytes) {
return LottieComposition.decodeZip(bytes, imageProviderFactory: imageProviderFactory);
}
Lottie.asset('anim.json', decoder: decoder)
```
- Disable gradient cache optimization when `ValueDelegate.gradientColor` is used
- Use `DefaultAssetBundle.of` in `AssetLottie` before fallback to `rootBundle`
- Add `BuildContext` optional parameter in `LottieProvider.load`
- Fixed varying opacity stops across keyframes in the same gradient
- Fixed rounded corners for non-closed curves
- Implement auto-orient
- Add support for layer blend mode
- Require Flutter 3.16
## 3.0.0-alpha.4
*See the latest 3.0.0 release*
## 3.0.0-alpha.3
*See the latest 3.0.0 release*
## 3.0.0-alpha.2
*See the latest 3.0.0 release*
## 3.0.0-alpha.1
*See the latest 3.0.0 release*
## 2.7.0
- Support loading Fonts from a zip file
- Fix a bug in Text with strokes
- Fix gradient interpolation for opacity stops beyond the last color stop
- Add color value callback to solid layer
## 2.6.0
- Accept `List<int>` instead of `Uint8List` in `LottieComposition.fromBytes`
- Stroke line cap defaults to butt instead of square
## 2.5.0
- Add layer-level opacity option to LottieOptions
- Fix TextLayer opacity calculation
## 2.4.0
- Require minimum Dart 3.0.0 and Flutter 3.10.0
- Fix a parsing bug when the name property in RoundedCorner was null
## 2.3.2
- Fix a bug when running on the web due to [bitwise operations difference](https://dart.dev/guides/language/numbers#bitwise-operations).
## 2.3.1
- Fix an assertion for null `ShapeTrimPathType.type`.
## 2.3.0
- Fixed a failed assertion (`dirty: is not true`) when calling `setState` inside `onLoaded` callback.
- Update point text y offset
- Makes static compositions not animate by default
## 2.2.0
Apply the latest fixes from Lottie-Android:
- Overhaul text layout
- Fix rounded corners modifying already rounded corners
- Support box position in Document Data
- Allow interpolating between gradients with different opacity stops
- Add support for gradient opacity stops
## 2.1.0
- Improve the cache to ensure that there is not an empty frame each time we load an animation.
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.
```dart
void main() {
Lottie.cache.maximumSize = 10;
Lottie.cache.clear();
Lottie.cache.evict(NetworkLottie('https://lottie.com/anim.json'));
}
```
## 2.0.0
- **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.
```dart
Scaffold(
body: Center(
child: Lottie.asset(
'assets/LottieLogo1.json',
height: 800,
fit: BoxFit.contain,
),
),
);
```
## 1.4.3
- Fixed some lints with Flutter 3.3.
## 1.4.2
- Use `FilterQuality.low` as default to draw image layers.
## 1.4.1
- Allow `AlignmentGeometry` for `alignment`.
## 1.4.0
- Added `filterQuality` property to control the performance vs quality trade-off to use when drawing images
## 1.3.0
- Added support for rounded corners on shapes and rects
- Add support for text in dynamic properties (`ValueDelegate`)
Example:
```dart
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
## 1.2.2
- Internal maintenance: fix lints for Flutter 2.10
## 1.2.1
- Fix: Revert Cubic to `PathInterpolator.cubic`
## 1.2.0
- Add support for gaussian blurs.
Example to blur some elements dynamically:
```dart
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:
```dart
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,
),
),
]),
)
```
## 1.1.0
- Add `errorBuilder` callback to provide an alternative widget in case an error occurs during loading.
```dart
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`.
```dart
Lottie.asset('animation.json'
onWarning: (warning) {
_logger.info(warning);
},
);
```
- Various bug fixes
## 1.0.1
- Implement `RenderBox.computeDryLayout`
## 1.0.0
- 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
## 0.7.1
- Fix a crash for some lottie file with empty paths.
## 0.7.0+1
- Fix Flutter Web compilation error
## 0.7.0
- Performance improvement for complex animations.
## 0.6.0
- 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).
A new property `frameRate` allows to opt-out this behavior and have the widget to repaint at the device frame rate
(`FrameRate.max`).
- Automatically add 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 behavior.
- Fix a bug where we would call `markNeedPaint` when the animation was not changing. This removes unnecessary paints in
animations with static periods.
## 0.5.1
- Remove direct dependencies on dart:io to support Flutter Web
## 0.5.0
- Support loading animation from network in a web app
- Fix a couple of bugs with the web dev compiler
## 0.4.1
- Support color value stored as RGB, not RGBA
## 0.4.0+1
- Support latest version of the `characters` package
## 0.4.0
- Disable "Merge paths" by default and provide an option to enable them.
This is the same behavior as in Lottie-android.
Merge paths currently don't work if the the operand shape is entirely contained within the
first shape. If you need to cut out one shape from another shape, use an even-odd fill type
instead of using merge paths.
Merge paths can be enabled with:
```dart
Lottie.asset('file.json', options: LottieOptions(enableMergePaths: true));
```
## 0.3.6
- Export the `Marker` class
## 0.3.5
- Fix a bug with a wrongly clipped rectangle.
## 0.3.4
- Fix a bug with dashed path
## 0.3.3
- Fix a bug with rounded rectangle shape
## 0.3.2
- Fix a bug with "repeater" content
## 0.3.1
- Support dashed path
## 0.3.0+1
- Specify a version range for the dependency on `characters`.
## 0.3.0
- Add `LottieDelegates` a group of options to customize the lottie animation at runtime.
ie: Dynamically modify color, position, size, text... of every elements of the animation.
- Correctly display Linear and Radial Gradients
- Integrate latest changes from Lottie-android
## 0.2.2
- Add a [repeat] parameter to specify if the automatic animation should loop.
- Add the [animate], [reverse], [repeat] properties on `LottieBuilder`
- Fix bug with `onLoaded` callback when the `LottieProvider` is changed
## 0.2.1
- Fix a big bug in the path transformation code. A lot more animations look correct now.
## 0.2.0+1
- Improve readme
- (internal) Add golden tests
## 0.2.0
- Support loading the animation and its images from a zip file
- Breaking: `LottieComposition.fromBytes` and `fromByteData` are now asynchronous.
## 0.1.4
- Support images in animation
- Basic support for text in animation (work in progress)
## 0.1.3
- Support Polystar shape
- Reorganize examples.
## 0.1.2
- Implement `Lottie.network`, `Lottie.file` and `Lottie.memory`
## 0.1.1
- Fix analysis lints
## 0.1.0
- Initial conversion of [lottie-android](https://github.com/airbnb/lottie-android) to Dart/Flutter

View File

@ -1,2 +0,0 @@
github: xvrh
custom: https://buymeacoffee.com/xvrh

21
LICENSE
View File

@ -1,21 +0,0 @@
MIT License
Copyright (c) [year] [fullname]
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

325
README.md
View File

@ -1,325 +0,0 @@
# Lottie for Flutter
[![](https://github.com/xvrh/lottie-flutter/workflows/Lottie%20Flutter/badge.svg?branch=master)](https://github.com/xvrh/lottie-flutter)
[![pub package](https://img.shields.io/pub/v/lottie.svg)](https://pub.dev/packages/lottie)
Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](https://www.adobe.com/products/aftereffects.html)
animations exported as json with [Bodymovin](https://github.com/airbnb/lottie-web) and renders them natively on mobile!
This repository is an unofficial conversion of the [Lottie-android](https://github.com/airbnb/lottie-android) library in pure Dart.
It works on Android, iOS, macOS, linux, windows and web.
<a href="https://www.buymeacoffee.com/xvrh" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="60" width="217"></a>
## 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.
```dart
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...
```dart
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](https://github.com/xvrh/lottie-flutter/blob/master/example/lib/examples/animation_full_control.dart) 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.
```dart
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.
```dart
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.
````dart
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.
````dart
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
````dart
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
````dart
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
````dart
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](https://airbnb.io/lottie/#/supported-features).
## 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.

View File

@ -1,126 +0,0 @@
# Lottie for Flutter
[![](https://github.com/xvrh/lottie-flutter/workflows/Lottie%20Flutter/badge.svg?branch=master)](https://github.com/xvrh/lottie-flutter)
[![pub package](https://img.shields.io/pub/v/lottie.svg)](https://pub.dev/packages/lottie)
Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](https://www.adobe.com/products/aftereffects.html)
animations exported as json with [Bodymovin](https://github.com/airbnb/lottie-web) and renders them natively on mobile!
This repository is an unofficial conversion of the [Lottie-android](https://github.com/airbnb/lottie-android) library in pure Dart.
It works on Android, iOS, macOS, linux, windows and web.
<a href="https://www.buymeacoffee.com/xvrh" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="60" width="217"></a>
## 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.
```dart
import 'example/lib/main.dart';
```
### 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...
```dart
import 'example/lib/examples/animation_controller.dart';
```
[See this file](https://github.com/xvrh/lottie-flutter/blob/master/example/lib/examples/animation_full_control.dart) 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.
```dart
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.
```dart
import 'example/lib/examples/custom_load.dart#example';
```
### 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.
````dart
import 'example/lib/examples/custom_draw.dart#example';
````
### 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.
````dart
import 'example/lib/examples/simple_dynamic_properties.dart#example';
````
### 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
````dart
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
````dart
import 'example/lib/examples/telegram_stickers.dart#example';
````
You can select the correct .json file from a dotlottie (.lottie) archive by providing a custom decoder
````dart
import 'example/lib/examples/dotlottie.dart#example';
````
## 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](https://airbnb.io/lottie/#/supported-features).
## 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.

View File

@ -1,58 +0,0 @@
include: package:flutter_lints/flutter.yaml
analyzer:
language:
strict-casts: true
strict-inference: true
linter:
rules:
avoid_print: false
always_declare_return_types: true
avoid_bool_literals_in_conditional_expressions: true
avoid_double_and_int_checks: true
avoid_dynamic_calls: true
avoid_equals_and_hash_code_on_mutable_classes: true
avoid_escaping_inner_quotes: true
avoid_final_parameters: true
avoid_function_literals_in_foreach_calls: true
avoid_js_rounded_ints: true
avoid_positional_boolean_parameters: true
avoid_redundant_argument_values: true
avoid_setters_without_getters: true
avoid_type_to_string: true
avoid_unused_constructor_parameters: true
cancel_subscriptions: true
cast_nullable_to_non_nullable: true
close_sinks: true
collection_methods_unrelated_type: true
combinators_ordering: true
conditional_uri_does_not_exist: true
dangling_library_doc_comments: true
deprecated_consistency: true
implicit_reopen: true
invalid_case_patterns: true
leading_newlines_in_multiline_strings: true
library_annotations: true
no_adjacent_strings_in_list: true
no_default_cases: true
noop_primitive_operations: true
omit_local_variable_types: true
only_throw_errors: true
prefer_if_elements_to_conditional_expressions: true
prefer_relative_imports: true
prefer_single_quotes: true
sort_child_properties_last: true
sort_pub_dependencies: true
test_types_in_equals: true
unawaited_futures: true
unnecessary_breaks: true
unnecessary_library_directive: true
unnecessary_parenthesis: true
unnecessary_statements: true
unnecessary_to_list_in_spreads: true
unsafe_html: true
use_enums: true
use_if_null_to_convert_nulls_to_bools: true
use_named_constants: true
use_raw_strings: true
use_super_parameters: true

File diff suppressed because one or more lines are too long

1
assets/FontManifest.json Normal file
View File

@ -0,0 +1 @@
[{"family":"MaterialIcons","fonts":[{"asset":"fonts/MaterialIcons-Regular.ttf"}]}]

14409
assets/LICENSE Normal file

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 149 KiB

After

Width:  |  Height:  |  Size: 149 KiB

Some files were not shown because too many files have changed in this diff Show More