├── .gitignore ├── .idea ├── libraries │ ├── Dart_Packages.xml │ ├── Dart_SDK.xml │ └── Flutter_Plugins.xml ├── misc.xml ├── modules.xml └── vcs.xml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── assets ├── colors.gif ├── size.gif └── staggered.gif ├── example ├── .gitignore ├── .idea │ ├── libraries │ │ ├── Dart_Packages.xml │ │ ├── Dart_SDK.xml │ │ └── Flutter_Plugins.xml │ ├── misc.xml │ ├── modules.xml │ ├── runConfigurations │ │ └── main_dart.xml │ └── workspace.xml ├── .metadata ├── README.md ├── android │ ├── .gitignore │ ├── app │ │ ├── build.gradle │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── yourcompany │ │ │ │ └── examples │ │ │ │ └── MainActivity.java │ │ │ └── res │ │ │ ├── drawable │ │ │ └── launch_background.xml │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxxhdpi │ │ │ └── ic_launcher.png │ │ │ └── values │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── examples.iml ├── examples_android.iml ├── ios │ ├── .gitignore │ ├── Flutter │ │ ├── AppFrameworkInfo.plist │ │ ├── Debug.xcconfig │ │ └── Release.xcconfig │ ├── Runner.xcodeproj │ │ ├── project.pbxproj │ │ ├── project.xcworkspace │ │ │ └── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── Runner.xcscheme │ ├── Runner.xcworkspace │ │ └── contents.xcworkspacedata │ └── Runner │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Assets.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── Contents.json │ │ │ ├── Icon-App-1024x1024@1x.png │ │ │ ├── Icon-App-20x20@1x.png │ │ │ ├── Icon-App-20x20@2x.png │ │ │ ├── Icon-App-20x20@3x.png │ │ │ ├── Icon-App-29x29@1x.png │ │ │ ├── Icon-App-29x29@2x.png │ │ │ ├── Icon-App-29x29@3x.png │ │ │ ├── Icon-App-40x40@1x.png │ │ │ ├── Icon-App-40x40@2x.png │ │ │ ├── Icon-App-40x40@3x.png │ │ │ ├── Icon-App-60x60@2x.png │ │ │ ├── Icon-App-60x60@3x.png │ │ │ ├── Icon-App-76x76@1x.png │ │ │ ├── Icon-App-76x76@2x.png │ │ │ └── Icon-App-83.5x83.5@2x.png │ │ └── LaunchImage.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchImage.png │ │ │ ├── LaunchImage@2x.png │ │ │ ├── LaunchImage@3x.png │ │ │ └── README.md │ │ ├── Base.lproj │ │ ├── LaunchScreen.storyboard │ │ └── Main.storyboard │ │ ├── Info.plist │ │ └── main.m ├── lib │ ├── main.dart │ ├── same_variable_multiple_animations.dart │ ├── sequence_page.dart │ └── staggered_animation_replication.dart ├── pubspec.lock ├── pubspec.yaml └── test │ └── widget_test.dart ├── flutter_sequence_animation.iml ├── lib └── flutter_sequence_animation.dart ├── pubspec.lock ├── pubspec.yaml └── test └── animation_sequence_tests.dart /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .dart_tool/ 3 | 4 | .packages 5 | .pub/ 6 | 7 | build/ 8 | ios/.generated/ 9 | ios/Flutter/Generated.xcconfig 10 | ios/Runner/GeneratedPluginRegistrant.* 11 | -------------------------------------------------------------------------------- /.idea/libraries/Dart_Packages.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /.idea/libraries/Dart_SDK.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /.idea/libraries/Flutter_Plugins.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [1.0.1] - Initial release 2 | 3 | * First fully working implementation of the sequence animation. 4 | 5 | ## [2.0.0] - Breaking change - refactored a few variables. 6 | 7 | * Breaking change - refactored a few variable. Most importantly anim -> animatable in the builder 8 | * To prevent code breaking version got bumped to 2.0.0 9 | * Thanks to Jeroen Meijer for the PR! 10 | 11 | ## [2.0.0] - Breaking change - animation API changed. 12 | 13 | * To prevent code breaking version got bumped to 3.0.0 14 | * Thanks to MaximilianKlein for the PR! 15 | 16 | ## [4.0.0-nullsafety] 17 | 18 | * Migrate to nullsafety 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Norbert Kozsir 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # flutter_sequence_animation 2 | 3 | ### Features 4 | - No need to use intervals and calculate percentages for your total animation time. 5 | - Animate the same variable with multiple animatables! 6 | - You only need one AnimationController 7 | - Intuitive and easy to use interface 8 | 9 | # Installation 10 | 11 | 12 | ``` 13 | dependencies: 14 | flutter_sequence_animation: "^4.0.0" 15 | ``` 16 | 17 | 18 | then 19 | ``` 20 | $ flutter packages get 21 | ``` 22 | then 23 | ``` 24 | import 'package:flutter_sequence_animation/flutter_sequence_animation.dart'; 25 | ``` 26 | 27 | # Demo 28 | 29 | ![alt-text-1](assets/colors.gif "title-1") ![alt-text-1](assets/size.gif "title-1")![alt-text-1](assets/staggered.gif "title-1") 30 | 31 | # Code 32 | 33 | _The Staggered Animation example from [here](https://flutter.io/animations/staggered-animations/) is 34 | 207 lines of [code](https://raw.githubusercontent.com/flutter/website/master/_includes/code/animation/basic_staggered_animation/main.dart) . 35 | The same animation with this package is 128 lines of [code](https://github.com/Norbert515/flutter_sequence_animation/blob/master/example/lib/staggered_animation_replication.dart). 36 | It is also much easier to read and edit._ 37 | 38 | #### You specify a sequence of animatables like this: 39 | ``` dart 40 | sequenceAnimation = new SequenceAnimationBuilder() 41 | .addAnimatable( 42 | animatable: new ColorTween(begin: Colors.red, end: Colors.yellow), 43 | from: const Duration(seconds: 0), 44 | to: const Duration(seconds: 2), 45 | tag: "color" 46 | ).addAnimatable( 47 | animatable: new ColorTween(begin: Colors.yellow, end: Colors.blueAccent), 48 | from: const Duration(seconds: 2), 49 | to: const Duration(seconds: 4), 50 | tag: "color", 51 | curve: Curves.easeOut 52 | ).addAnimatable( 53 | animatable: new ColorTween(begin: Colors.blueAccent, end: Colors.pink), 54 | // animatable: new Tween(begin: 200.0, end: 40.0), 55 | from: const Duration(seconds: 5), 56 | to: const Duration(seconds: 6), 57 | tag: "color", 58 | curve: Curves.fastOutSlowIn 59 | ).animate(controller); 60 | ``` 61 | In this case only the color is animated but you can add as many different properties to the sequence as you'd like to. 62 | The only restriction is that animations with the same tag can not overlap and need to be ordered. 63 | 64 | #### Now you can access the resulting animation from anywhere in your code with 65 | ```dart 66 | sequenceAnimation["color"] 67 | ``` 68 | This animation is a composition of all animatables you passed in with the same tag. 69 | 70 | #### Example usage of this example: 71 | ```dart 72 | new AnimatedBuilder( 73 | builder: (context, child) { 74 | return new Center( 75 | child: new Container( 76 | color: sequenceAnimation["color"].value, 77 | height: 200.0, 78 | width: 200.0, 79 | ), 80 | ); 81 | }, 82 | animation: controller, 83 | ), 84 | ``` 85 | 86 | #### The animation duration is set automatically (don't change the duration of the controller yourself). 87 | 88 | ### Sepcial thanks to [Simon Lightfoot](https://github.com/slightfoot) for the help! 89 | 90 | 91 | ## Getting Started 92 | 93 | For help getting started with Flutter, view our online [documentation](https://flutter.io/). 94 | 95 | For help on editing package code, view the [documentation](https://flutter.io/developing-packages/). 96 | -------------------------------------------------------------------------------- /assets/colors.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Norbert515/flutter_sequence_animation/e70714410c0a390eed0babefc35e1af65ce68183/assets/colors.gif -------------------------------------------------------------------------------- /assets/size.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Norbert515/flutter_sequence_animation/e70714410c0a390eed0babefc35e1af65ce68183/assets/size.gif -------------------------------------------------------------------------------- /assets/staggered.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Norbert515/flutter_sequence_animation/e70714410c0a390eed0babefc35e1af65ce68183/assets/staggered.gif -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .dart_tool/ 3 | 4 | .packages 5 | .pub/ 6 | 7 | build/ 8 | 9 | .flutter-plugins 10 | -------------------------------------------------------------------------------- /example/.idea/libraries/Dart_Packages.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | -------------------------------------------------------------------------------- /example/.idea/libraries/Dart_SDK.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/.idea/libraries/Flutter_Plugins.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /example/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /example/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /example/.idea/runConfigurations/main_dart.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /example/.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 54 | 55 | 56 | 57 | 58 | true 59 | DEFINITION_ORDER 60 | 61 | 62 | 63 | 64 | 65 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 |