mirror of
https://github.com/xvrh/lottie-flutter.git
synced 2025-08-06 16:39:36 +08:00
Compare commits
2 Commits
Author | SHA1 | Date | |
---|---|---|---|
5739f3b2ec | |||
dd04d149e8 |
Binary file not shown.
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.0 KiB |
49
.github/workflows/analyze-and-test.yaml
vendored
49
.github/workflows/analyze-and-test.yaml
vendored
@ -1,49 +0,0 @@
|
|||||||
name: Lottie Flutter
|
|
||||||
on:
|
|
||||||
pull_request:
|
|
||||||
push:
|
|
||||||
branches:
|
|
||||||
- master
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
analyze_and_test:
|
|
||||||
name: Flutter analyze
|
|
||||||
strategy:
|
|
||||||
matrix:
|
|
||||||
flutter: ['beta']
|
|
||||||
runs-on: macos-latest
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v2
|
|
||||||
- uses: subosito/flutter-action@v1
|
|
||||||
with:
|
|
||||||
channel: ${{ matrix.flutter }}
|
|
||||||
- run: flutter doctor
|
|
||||||
- run: flutter --version
|
|
||||||
- run: flutter pub get
|
|
||||||
working-directory: example
|
|
||||||
- run: flutter analyze
|
|
||||||
- run: flutter test test # https://github.com/flutter/flutter/issues/20907
|
|
||||||
- run: flutter test 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 compile
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v2
|
|
||||||
- uses: subosito/flutter-action@v1
|
|
||||||
with:
|
|
||||||
channel: 'beta'
|
|
||||||
- run: flutter config --enable-web
|
|
||||||
- run: flutter precache web
|
|
||||||
- run: flutter pub get
|
|
||||||
working-directory: example
|
|
||||||
- run: flutter build web
|
|
||||||
working-directory: example
|
|
30
.github/workflows/publish-on-pub.yaml
vendored
30
.github/workflows/publish-on-pub.yaml
vendored
@ -1,30 +0,0 @@
|
|||||||
name: Publish package to pub.dev
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
tags:
|
|
||||||
- v*
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v2
|
|
||||||
- uses: subosito/flutter-action@v1
|
|
||||||
with:
|
|
||||||
channel: 'beta'
|
|
||||||
- run: flutter pub get
|
|
||||||
- run: flutter pub run tool/publish/comment_dependency_overrides.dart
|
|
||||||
- run: flutter pub get
|
|
||||||
- run: flutter pub run tool/publish/check_version.dart ${GITHUB_REF}
|
|
||||||
- name: Setup credentials
|
|
||||||
run: |
|
|
||||||
cat <<EOF > $PUB_CACHE/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": 1580681402856
|
|
||||||
}
|
|
||||||
EOF
|
|
||||||
- name: Publish package
|
|
||||||
run: flutter pub publish --force
|
|
12
.gitignore
vendored
12
.gitignore
vendored
@ -1,12 +0,0 @@
|
|||||||
.*
|
|
||||||
_*
|
|
||||||
|
|
||||||
!.gitignore
|
|
||||||
!.github
|
|
||||||
!.pubignore
|
|
||||||
|
|
||||||
**/failures/*.png
|
|
||||||
|
|
||||||
*.iml
|
|
||||||
**/doc/api/
|
|
||||||
build/
|
|
||||||
|
10
.metadata
10
.metadata
@ -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
|
|
15
.pubignore
15
.pubignore
@ -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/
|
|
179
CHANGELOG.md
179
CHANGELOG.md
@ -1,179 +0,0 @@
|
|||||||
## [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
|
|
21
LICENSE
21
LICENSE
@ -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.
|
|
263
README.md
263
README.md
@ -1,263 +0,0 @@
|
|||||||
# Lottie for Flutter
|
|
||||||
|
|
||||||
[](https://github.com/xvrh/lottie-flutter)
|
|
||||||
[](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.
|
|
||||||
|
|
||||||
## 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({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...
|
|
||||||
|
|
||||||
```dart
|
|
||||||
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](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 `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.
|
|
||||||
|
|
||||||
```dart
|
|
||||||
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.
|
|
||||||
|
|
||||||
````dart
|
|
||||||
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.
|
|
||||||
|
|
||||||
````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),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
````
|
|
||||||
|
|
||||||
## 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.
|
|
@ -1,89 +0,0 @@
|
|||||||
# Lottie for Flutter
|
|
||||||
|
|
||||||
[](https://github.com/xvrh/lottie-flutter)
|
|
||||||
[](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.
|
|
||||||
|
|
||||||
## 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 `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.
|
|
||||||
|
|
||||||
```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';
|
|
||||||
````
|
|
||||||
|
|
||||||
## 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.
|
|
@ -1,29 +0,0 @@
|
|||||||
include: package:flutter_lints/flutter.yaml
|
|
||||||
analyzer:
|
|
||||||
strong-mode:
|
|
||||||
implicit-casts: false
|
|
||||||
implicit-dynamic: false
|
|
||||||
linter:
|
|
||||||
rules:
|
|
||||||
avoid_print: false
|
|
||||||
|
|
||||||
always_declare_return_types: true
|
|
||||||
avoid_dynamic_calls: true
|
|
||||||
avoid_escaping_inner_quotes: true
|
|
||||||
avoid_setters_without_getters: true
|
|
||||||
cast_nullable_to_non_nullable: true
|
|
||||||
close_sinks: true
|
|
||||||
no_adjacent_strings_in_list: true
|
|
||||||
no_default_cases: true
|
|
||||||
omit_local_variable_types: true
|
|
||||||
only_throw_errors: true
|
|
||||||
prefer_interpolation_to_compose_strings: true
|
|
||||||
prefer_single_quotes: true
|
|
||||||
sort_child_properties_last: true
|
|
||||||
sort_pub_dependencies: true
|
|
||||||
test_types_in_equals: true
|
|
||||||
unawaited_futures: true
|
|
||||||
unnecessary_parenthesis: true
|
|
||||||
unnecessary_statements: true
|
|
||||||
unsafe_html: true
|
|
||||||
use_raw_strings: true
|
|
1
assets/AssetManifest.json
Normal file
1
assets/AssetManifest.json
Normal file
File diff suppressed because one or more lines are too long
1
assets/FontManifest.json
Normal file
1
assets/FontManifest.json
Normal file
@ -0,0 +1 @@
|
|||||||
|
[{"family":"MaterialIcons","fonts":[{"asset":"fonts/MaterialIcons-Regular.ttf"}]}]
|
14409
assets/LICENSE
Normal file
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 |
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
Reference in New Issue
Block a user