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
1191 changed files with 61268 additions and 185180 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@ -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

View File

@ -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
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,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
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.

263
README.md
View File

@ -1,263 +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.
## 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.

View File

@ -1,89 +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.
## 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.

View File

@ -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

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