├── example ├── ios │ ├── Flutter │ │ ├── Debug.xcconfig │ │ ├── Release.xcconfig │ │ ├── Flutter.podspec │ │ └── AppFrameworkInfo.plist │ ├── Runner │ │ ├── Runner-Bridging-Header.h │ │ ├── Assets.xcassets │ │ │ ├── LaunchImage.imageset │ │ │ │ ├── LaunchImage.png │ │ │ │ ├── LaunchImage@2x.png │ │ │ │ ├── LaunchImage@3x.png │ │ │ │ ├── README.md │ │ │ │ └── Contents.json │ │ │ └── AppIcon.appiconset │ │ │ │ ├── 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-1024x1024@1x.png │ │ │ │ ├── Icon-App-83.5x83.5@2x.png │ │ │ │ └── Contents.json │ │ ├── AppDelegate.swift │ │ ├── Base.lproj │ │ │ ├── Main.storyboard │ │ │ └── LaunchScreen.storyboard │ │ └── Info.plist │ ├── Runner.xcworkspace │ │ └── contents.xcworkspacedata │ ├── Runner.xcodeproj │ │ ├── project.xcworkspace │ │ │ └── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── Runner.xcscheme │ └── .gitignore ├── android │ ├── gradle.properties │ ├── .gitignore │ ├── app │ │ ├── src │ │ │ ├── main │ │ │ │ ├── res │ │ │ │ │ ├── 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 │ │ │ │ │ └── drawable │ │ │ │ │ │ └── launch_background.xml │ │ │ │ ├── kotlin │ │ │ │ │ └── com │ │ │ │ │ │ └── example │ │ │ │ │ │ └── example │ │ │ │ │ │ └── MainActivity.kt │ │ │ │ └── AndroidManifest.xml │ │ │ ├── debug │ │ │ │ └── AndroidManifest.xml │ │ │ └── profile │ │ │ │ └── AndroidManifest.xml │ │ └── build.gradle │ ├── gradle │ │ └── wrapper │ │ │ └── gradle-wrapper.properties │ ├── settings.gradle │ └── build.gradle ├── .metadata ├── test │ └── widget_test.dart ├── lib │ ├── main.dart │ └── animation_page.dart ├── README.md ├── .gitignore ├── pubspec.yaml └── pubspec.lock ├── test └── flutter_steps_animation_test.dart ├── example.gif ├── lib ├── flutter_steps_animation.dart └── src │ ├── none_animation.dart │ ├── base.dart │ ├── steps_animation.dart │ ├── single_animation.dart │ └── multiple_animation.dart ├── CHANGELOG.md ├── .metadata ├── LICENSE ├── .gitignore ├── pubspec.yaml ├── pubspec.lock ├── README_CN.md └── README.md /example/ios/Flutter/Debug.xcconfig: -------------------------------------------------------------------------------- 1 | #include "Generated.xcconfig" 2 | -------------------------------------------------------------------------------- /test/flutter_steps_animation_test.dart: -------------------------------------------------------------------------------- 1 | void main() { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /example/ios/Flutter/Release.xcconfig: -------------------------------------------------------------------------------- 1 | #include "Generated.xcconfig" 2 | -------------------------------------------------------------------------------- /example/ios/Runner/Runner-Bridging-Header.h: -------------------------------------------------------------------------------- 1 | #import "GeneratedPluginRegistrant.h" -------------------------------------------------------------------------------- /example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example.gif -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | org.gradle.jvmargs=-Xmx1536M 2 | android.enableR8=true 3 | android.useAndroidX=true 4 | android.enableJetifier=true 5 | -------------------------------------------------------------------------------- /example/android/.gitignore: -------------------------------------------------------------------------------- 1 | gradle-wrapper.jar 2 | /.gradle 3 | /captures/ 4 | /gradlew 5 | /gradlew.bat 6 | /local.properties 7 | GeneratedPluginRegistrant.java 8 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuexin/flutter_steps_animation/HEAD/example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png -------------------------------------------------------------------------------- /example/ios/Runner.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lib/flutter_steps_animation.dart: -------------------------------------------------------------------------------- 1 | library flutter_steps_animation; 2 | 3 | export 'src/base.dart'; 4 | export 'src/multiple_animation.dart'; 5 | export 'src/steps_animation.dart'; 6 | export 'src/none_animation.dart'; 7 | export 'src/single_animation.dart'; -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [1.1.0] - 2019/12/17 2 | 3 | * Modify the implementation of multiple_animation. 4 | 5 | ## [1.0.2] - 2019/11/29 6 | 7 | * Modify Readme. 8 | 9 | ## [1.0.1] - 2019/11/29 10 | 11 | * Modify Readme and example. 12 | 13 | ## [1.0.0] - 2019/11/28 14 | 15 | * First version. 16 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Fri Jun 23 08:50:38 CEST 2017 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip 7 | -------------------------------------------------------------------------------- /.metadata: -------------------------------------------------------------------------------- 1 | # This file tracks properties of this Flutter project. 2 | # Used by Flutter tool to assess capabilities and perform upgrades etc. 3 | # 4 | # This file should be version controlled and should not be manually edited. 5 | 6 | version: 7 | revision: e70236e36ce1d32067dc68eb55519ec3e14b6b01 8 | channel: beta 9 | 10 | project_type: package 11 | -------------------------------------------------------------------------------- /example/.metadata: -------------------------------------------------------------------------------- 1 | # This file tracks properties of this Flutter project. 2 | # Used by Flutter tool to assess capabilities and perform upgrades etc. 3 | # 4 | # This file should be version controlled and should not be manually edited. 5 | 6 | version: 7 | revision: e70236e36ce1d32067dc68eb55519ec3e14b6b01 8 | channel: beta 9 | 10 | project_type: app 11 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example/android/app/src/profile/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md: -------------------------------------------------------------------------------- 1 | # Launch Screen Assets 2 | 3 | You can customize the launch screen with your own desired assets by replacing the image files in this directory. 4 | 5 | You can also do it by opening your Flutter project's Xcode project with `open ios/Runner.xcworkspace`, selecting `Runner/Assets.xcassets` in the Project Navigator and dropping in the desired images. -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | -------------------------------------------------------------------------------- /example/test/widget_test.dart: -------------------------------------------------------------------------------- 1 | // This is a basic Flutter widget test. 2 | // 3 | // To perform an interaction with a widget in your test, use the WidgetTester 4 | // utility that Flutter provides. For example, you can send tap and scroll 5 | // gestures. You can also use WidgetTester to find child widgets in the widget 6 | // tree, read text, and verify that the values of widget properties are correct. 7 | 8 | void main() { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /example/android/app/src/main/kotlin/com/example/example/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.example.example 2 | 3 | import android.os.Bundle 4 | 5 | import io.flutter.app.FlutterActivity 6 | import io.flutter.plugins.GeneratedPluginRegistrant 7 | 8 | class MainActivity: FlutterActivity() { 9 | override fun onCreate(savedInstanceState: Bundle?) { 10 | super.onCreate(savedInstanceState) 11 | GeneratedPluginRegistrant.registerWith(this) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /example/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'animation_page.dart'; 4 | 5 | void main() => runApp(MyApp()); 6 | 7 | class MyApp extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Flutter Demo', 12 | theme: ThemeData( 13 | primarySwatch: Colors.blue, 14 | ), 15 | home: AnimationPage(), 16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /example/ios/Runner/AppDelegate.swift: -------------------------------------------------------------------------------- 1 | import UIKit 2 | import Flutter 3 | 4 | @UIApplicationMain 5 | @objc class AppDelegate: FlutterAppDelegate { 6 | override func application( 7 | _ application: UIApplication, 8 | didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? 9 | ) -> Bool { 10 | GeneratedPluginRegistrant.register(with: self) 11 | return super.application(application, didFinishLaunchingWithOptions: launchOptions) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/drawable/launch_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchImage.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchImage@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "LaunchImage@3x.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | 3 | def flutterProjectRoot = rootProject.projectDir.parentFile.toPath() 4 | 5 | def plugins = new Properties() 6 | def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins') 7 | if (pluginsFile.exists()) { 8 | pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) } 9 | } 10 | 11 | plugins.each { name, path -> 12 | def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile() 13 | include ":$name" 14 | project(":$name").projectDir = pluginDirectory 15 | } 16 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # example 2 | 3 | A new Flutter project. 4 | 5 | ## Getting Started 6 | 7 | This project is a starting point for a Flutter application. 8 | 9 | A few resources to get you started if this is your first Flutter project: 10 | 11 | - [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab) 12 | - [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook) 13 | 14 | For help getting started with Flutter, view our 15 | [online documentation](https://flutter.dev/docs), which offers tutorials, 16 | samples, guidance on mobile development, and a full API reference. 17 | -------------------------------------------------------------------------------- /example/ios/.gitignore: -------------------------------------------------------------------------------- 1 | *.mode1v3 2 | *.mode2v3 3 | *.moved-aside 4 | *.pbxuser 5 | *.perspectivev3 6 | **/*sync/ 7 | .sconsign.dblite 8 | .tags* 9 | **/.vagrant/ 10 | **/DerivedData/ 11 | Icon? 12 | **/Pods/ 13 | **/.symlinks/ 14 | profile 15 | xcuserdata 16 | **/.generated/ 17 | Flutter/App.framework 18 | Flutter/Flutter.framework 19 | Flutter/Generated.xcconfig 20 | Flutter/app.flx 21 | Flutter/app.zip 22 | Flutter/flutter_assets/ 23 | Flutter/flutter_export_environment.sh 24 | ServiceDefinitions.json 25 | Runner/GeneratedPluginRegistrant.* 26 | 27 | # Exceptions to above rules. 28 | !default.mode1v3 29 | !default.mode2v3 30 | !default.pbxuser 31 | !default.perspectivev3 32 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext.kotlin_version = '1.3.50' 3 | repositories { 4 | google() 5 | jcenter() 6 | } 7 | 8 | dependencies { 9 | classpath 'com.android.tools.build:gradle:3.5.0' 10 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 11 | } 12 | } 13 | 14 | allprojects { 15 | repositories { 16 | google() 17 | jcenter() 18 | } 19 | } 20 | 21 | rootProject.buildDir = '../build' 22 | subprojects { 23 | project.buildDir = "${rootProject.buildDir}/${project.name}" 24 | } 25 | subprojects { 26 | project.evaluationDependsOn(':app') 27 | } 28 | 29 | task clean(type: Delete) { 30 | delete rootProject.buildDir 31 | } 32 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # Miscellaneous 2 | *.class 3 | *.log 4 | *.pyc 5 | *.swp 6 | .DS_Store 7 | .atom/ 8 | .buildlog/ 9 | .history 10 | .svn/ 11 | 12 | # IntelliJ related 13 | *.iml 14 | *.ipr 15 | *.iws 16 | .idea/ 17 | 18 | # The .vscode folder contains launch configuration and tasks you configure in 19 | # VS Code which you may wish to be included in version control, so this line 20 | # is commented out by default. 21 | #.vscode/ 22 | 23 | # Flutter/Dart/Pub related 24 | **/doc/api/ 25 | .dart_tool/ 26 | .flutter-plugins 27 | .packages 28 | .pub-cache/ 29 | .pub/ 30 | /build/ 31 | 32 | # Web related 33 | lib/generated_plugin_registrant.dart 34 | 35 | # Exceptions to above rules. 36 | !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages 37 | -------------------------------------------------------------------------------- /example/ios/Flutter/Flutter.podspec: -------------------------------------------------------------------------------- 1 | # 2 | # NOTE: This podspec is NOT to be published. It is only used as a local source! 3 | # 4 | 5 | Pod::Spec.new do |s| 6 | s.name = 'Flutter' 7 | s.version = '1.0.0' 8 | s.summary = 'High-performance, high-fidelity mobile apps.' 9 | s.description = <<-DESC 10 | Flutter provides an easy and productive way to build and deploy high-performance mobile apps for Android and iOS. 11 | DESC 12 | s.homepage = 'https://flutter.io' 13 | s.license = { :type => 'MIT' } 14 | s.author = { 'Flutter Dev Team' => 'flutter-dev@googlegroups.com' } 15 | s.source = { :git => 'https://github.com/flutter/engine', :tag => s.version.to_s } 16 | s.ios.deployment_target = '8.0' 17 | s.vendored_frameworks = 'Flutter.framework' 18 | end 19 | -------------------------------------------------------------------------------- /example/ios/Flutter/AppFrameworkInfo.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | $(DEVELOPMENT_LANGUAGE) 7 | CFBundleExecutable 8 | App 9 | CFBundleIdentifier 10 | io.flutter.flutter.app 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | App 15 | CFBundlePackageType 16 | FMWK 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1.0 23 | MinimumOSVersion 24 | 8.0 25 | 26 | 27 | -------------------------------------------------------------------------------- /lib/src/none_animation.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/animation.dart'; 2 | import 'package:flutter/widgets.dart'; 3 | 4 | import 'base.dart'; 5 | 6 | class NoneAnimation extends OneStepAnimation { 7 | NoneAnimation(NoneAnimationData animationData, 8 | OneStepBuildAnimation oneStepBuildAnimation) 9 | : super(animationData, oneStepBuildAnimation); 10 | } 11 | 12 | class NoneAnimationData extends OneStepAnimationData { 13 | NoneAnimationData(Duration duration) : super(duration, null); 14 | } 15 | 16 | class NoneAnimationBuilder extends OneStepAnimationBuilder { 17 | WidgetBuilder builder; 18 | 19 | NoneAnimationBuilder({@required Duration duration, @required this.builder}) 20 | : super(duration); 21 | 22 | @override 23 | OneStepAnimation buildStep(AnimationController controller, 24 | Duration startDuration, Duration totalDuration) { 25 | final animationData = NoneAnimationData(duration); 26 | return NoneAnimation(animationData, (context, dynamic _) { 27 | return builder(context); 28 | }); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 血心 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 | -------------------------------------------------------------------------------- /lib/src/base.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/widgets.dart'; 2 | 3 | abstract class StepsAnimation { 4 | final AnimationController controller; 5 | 6 | StepsAnimation(this.controller); 7 | 8 | TransitionBuilder get builder; 9 | } 10 | 11 | abstract class OneStepAnimationData { 12 | final Duration duration; 13 | 14 | final T animationData; 15 | 16 | OneStepAnimationData(this.duration, this.animationData); 17 | } 18 | 19 | typedef OneStepBuildAnimation = Widget Function( 20 | BuildContext context, T data); 21 | 22 | abstract class OneStepAnimation> { 23 | final AnimationData data; 24 | final OneStepBuildAnimation oneStepBuildAnimation; 25 | 26 | OneStepAnimation(this.data, this.oneStepBuildAnimation); 27 | 28 | TransitionBuilder get builder => (BuildContext context, Widget child) { 29 | return oneStepBuildAnimation(context, data.animationData); 30 | }; 31 | } 32 | 33 | abstract class OneStepAnimationBuilder { 34 | final Duration duration; 35 | 36 | OneStepAnimationBuilder(this.duration); 37 | 38 | OneStepAnimation buildStep(AnimationController controller, 39 | Duration startDuration, Duration totalDuration); 40 | } 41 | -------------------------------------------------------------------------------- /example/ios/Runner/Base.lproj/Main.storyboard: -------------------------------------------------------------------------------- 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/ios/Runner/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | $(DEVELOPMENT_LANGUAGE) 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | example 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | $(FLUTTER_BUILD_NAME) 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | $(FLUTTER_BUILD_NUMBER) 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIMainStoryboardFile 28 | Main 29 | UISupportedInterfaceOrientations 30 | 31 | UIInterfaceOrientationPortrait 32 | UIInterfaceOrientationLandscapeLeft 33 | UIInterfaceOrientationLandscapeRight 34 | 35 | UISupportedInterfaceOrientations~ipad 36 | 37 | UIInterfaceOrientationPortrait 38 | UIInterfaceOrientationPortraitUpsideDown 39 | UIInterfaceOrientationLandscapeLeft 40 | UIInterfaceOrientationLandscapeRight 41 | 42 | UIViewControllerBasedStatusBarAppearance 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Miscellaneous 2 | *.class 3 | *.log 4 | *.pyc 5 | *.swp 6 | .DS_Store 7 | .atom/ 8 | .buildlog/ 9 | .history 10 | .svn/ 11 | 12 | # IntelliJ related 13 | *.iml 14 | *.ipr 15 | *.iws 16 | .idea/ 17 | 18 | # The .vscode folder contains launch configuration and tasks you configure in 19 | # VS Code which you may wish to be included in version control, so this line 20 | # is commented out by default. 21 | #.vscode/ 22 | 23 | # Flutter/Dart/Pub related 24 | **/doc/api/ 25 | .dart_tool/ 26 | .flutter-plugins 27 | .packages 28 | .pub-cache/ 29 | .pub/ 30 | build/ 31 | 32 | # Android related 33 | **/android/**/gradle-wrapper.jar 34 | **/android/.gradle 35 | **/android/captures/ 36 | **/android/gradlew 37 | **/android/gradlew.bat 38 | **/android/local.properties 39 | **/android/**/GeneratedPluginRegistrant.java 40 | 41 | # iOS/XCode related 42 | **/ios/**/*.mode1v3 43 | **/ios/**/*.mode2v3 44 | **/ios/**/*.moved-aside 45 | **/ios/**/*.pbxuser 46 | **/ios/**/*.perspectivev3 47 | **/ios/**/*sync/ 48 | **/ios/**/.sconsign.dblite 49 | **/ios/**/.tags* 50 | **/ios/**/.vagrant/ 51 | **/ios/**/DerivedData/ 52 | **/ios/**/Icon? 53 | **/ios/**/Pods/ 54 | **/ios/**/.symlinks/ 55 | **/ios/**/profile 56 | **/ios/**/xcuserdata 57 | **/ios/.generated/ 58 | **/ios/Flutter/App.framework 59 | **/ios/Flutter/Flutter.framework 60 | **/ios/Flutter/Generated.xcconfig 61 | **/ios/Flutter/app.flx 62 | **/ios/Flutter/app.zip 63 | **/ios/Flutter/flutter_assets/ 64 | **/ios/Flutter/flutter_export_environment.sh 65 | **/ios/ServiceDefinitions.json 66 | **/ios/Runner/GeneratedPluginRegistrant.* 67 | 68 | # Exceptions to above rules. 69 | !**/ios/**/default.mode1v3 70 | !**/ios/**/default.mode2v3 71 | !**/ios/**/default.pbxuser 72 | !**/ios/**/default.perspectivev3 73 | !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages 74 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: flutter_steps_animation 2 | description: A powerful Flutter package for building complex animation step by step. 3 | version: 1.1.0 4 | homepage: https://github.com/xuexin/flutter_steps_animation 5 | 6 | environment: 7 | sdk: ">=2.1.0 <3.0.0" 8 | 9 | dependencies: 10 | flutter: 11 | sdk: flutter 12 | 13 | dev_dependencies: 14 | flutter_test: 15 | sdk: flutter 16 | 17 | # For information on the generic Dart part of this file, see the 18 | # following page: https://dart.dev/tools/pub/pubspec 19 | 20 | # The following section is specific to Flutter. 21 | flutter: 22 | 23 | # To add assets to your package, add an assets section, like this: 24 | # assets: 25 | # - images/a_dot_burr.jpeg 26 | # - images/a_dot_ham.jpeg 27 | # 28 | # For details regarding assets in packages, see 29 | # https://flutter.dev/assets-and-images/#from-packages 30 | # 31 | # An image asset can refer to one or more resolution-specific "variants", see 32 | # https://flutter.dev/assets-and-images/#resolution-aware. 33 | 34 | # To add custom fonts to your package, add a fonts section here, 35 | # in this "flutter" section. Each entry in this list should have a 36 | # "family" key with the font family name, and a "fonts" key with a 37 | # list giving the asset and other descriptors for the font. For 38 | # example: 39 | # fonts: 40 | # - family: Schyler 41 | # fonts: 42 | # - asset: fonts/Schyler-Regular.ttf 43 | # - asset: fonts/Schyler-Italic.ttf 44 | # style: italic 45 | # - family: Trajan Pro 46 | # fonts: 47 | # - asset: fonts/TrajanPro.ttf 48 | # - asset: fonts/TrajanPro_Bold.ttf 49 | # weight: 700 50 | # 51 | # For details regarding fonts in packages, see 52 | # https://flutter.dev/custom-fonts/#from-packages 53 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 9 | 13 | 20 | 24 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | def localProperties = new Properties() 2 | def localPropertiesFile = rootProject.file('local.properties') 3 | if (localPropertiesFile.exists()) { 4 | localPropertiesFile.withReader('UTF-8') { reader -> 5 | localProperties.load(reader) 6 | } 7 | } 8 | 9 | def flutterRoot = localProperties.getProperty('flutter.sdk') 10 | if (flutterRoot == null) { 11 | throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.") 12 | } 13 | 14 | def flutterVersionCode = localProperties.getProperty('flutter.versionCode') 15 | if (flutterVersionCode == null) { 16 | flutterVersionCode = '1' 17 | } 18 | 19 | def flutterVersionName = localProperties.getProperty('flutter.versionName') 20 | if (flutterVersionName == null) { 21 | flutterVersionName = '1.0' 22 | } 23 | 24 | apply plugin: 'com.android.application' 25 | apply plugin: 'kotlin-android' 26 | apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle" 27 | 28 | android { 29 | compileSdkVersion 28 30 | 31 | sourceSets { 32 | main.java.srcDirs += 'src/main/kotlin' 33 | } 34 | 35 | lintOptions { 36 | disable 'InvalidPackage' 37 | } 38 | 39 | defaultConfig { 40 | // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html). 41 | applicationId "com.example.example" 42 | minSdkVersion 16 43 | targetSdkVersion 28 44 | versionCode flutterVersionCode.toInteger() 45 | versionName flutterVersionName 46 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 47 | } 48 | 49 | buildTypes { 50 | release { 51 | // TODO: Add your own signing config for the release build. 52 | // Signing with the debug keys for now, so `flutter run --release` works. 53 | signingConfig signingConfigs.debug 54 | } 55 | } 56 | } 57 | 58 | flutter { 59 | source '../..' 60 | } 61 | 62 | dependencies { 63 | implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" 64 | testImplementation 'junit:junit:4.12' 65 | androidTestImplementation 'androidx.test:runner:1.1.1' 66 | androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1' 67 | } 68 | -------------------------------------------------------------------------------- /lib/src/steps_animation.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/widgets.dart'; 2 | 3 | import 'base.dart'; 4 | 5 | class _StepsAnimationImpl extends StepsAnimation { 6 | final List stepAnimations; 7 | final List stepDurationCostingList; 8 | 9 | _StepsAnimationImpl._internal(AnimationController controller, 10 | this.stepAnimations, this.stepDurationCostingList) 11 | : super(controller); 12 | 13 | @override 14 | get builder => (BuildContext context, Widget child) { 15 | return getCurrentStep().builder(context, child); 16 | }; 17 | 18 | //todo This method assumes that controller's lowerBound and upperBound is 0 and 1 19 | OneStepAnimation getCurrentStep() { 20 | final value = controller.value; 21 | for (int i = 0; i < stepDurationCostingList.length; i++) { 22 | if (stepDurationCostingList[i] > value) { 23 | return stepAnimations[i - 1]; 24 | } 25 | } 26 | return stepAnimations.last; 27 | } 28 | } 29 | 30 | class StepsAnimationBuilder { 31 | final List stepBuilders = []; 32 | 33 | StepsAnimationBuilder addStepBuilder(OneStepAnimationBuilder stepBuilder) { 34 | stepBuilders.add(stepBuilder); 35 | return this; 36 | } 37 | 38 | _StepsAnimationImpl animation(TickerProvider vsync) { 39 | final duration = _calculateTotalDuration(); 40 | //todo lowerBound and upperBound must be 0 and 1. 41 | final controller = AnimationController( 42 | vsync: vsync, duration: duration, lowerBound: 0, upperBound: 1); 43 | final stepAnimations = []; 44 | final stepDurationCostingList = []; 45 | Duration stepStartDuration = Duration.zero; 46 | stepDurationCostingList.add(0); 47 | stepBuilders.forEach((stepBuilder) { 48 | final step = 49 | stepBuilder.buildStep(controller, stepStartDuration, duration); 50 | stepStartDuration += stepBuilder.duration; 51 | stepDurationCostingList.add(stepStartDuration.inMilliseconds.toDouble() / 52 | duration.inMilliseconds.toDouble()); 53 | stepAnimations.add(step); 54 | }); 55 | return _StepsAnimationImpl._internal( 56 | controller, stepAnimations, stepDurationCostingList); 57 | } 58 | 59 | Duration _calculateTotalDuration() { 60 | Duration duration = Duration.zero; 61 | stepBuilders.forEach((step) { 62 | duration += step.duration; 63 | }); 64 | return duration; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /example/ios/Runner/Base.lproj/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 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 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /lib/src/single_animation.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/widgets.dart'; 2 | 3 | import 'base.dart'; 4 | 5 | class SingleAnimation 6 | extends OneStepAnimation> { 7 | SingleAnimation(SingleAnimationData data, oneStepBuildAnimation) 8 | : super(data, oneStepBuildAnimation); 9 | } 10 | 11 | class SingleAnimationData extends OneStepAnimationData { 12 | SingleAnimationData( 13 | Duration duration, 14 | Duration startDuration, 15 | Duration totalDuration, 16 | AnimationController controller, 17 | SingleAnimationBuildInfo info) 18 | : super(duration, 19 | _createAnimation(startDuration, totalDuration, controller, info)); 20 | 21 | static Animation _createAnimation( 22 | Duration startDuration, 23 | Duration totalDuration, 24 | AnimationController controller, 25 | SingleAnimationBuildInfo info) { 26 | final startInMilliseconds = startDuration.inMilliseconds; 27 | final totalInMilliseconds = totalDuration.inMilliseconds; 28 | final double begin = 29 | (startInMilliseconds + info.from.inMilliseconds).toDouble() / 30 | totalInMilliseconds; 31 | final double end = 32 | begin + info.duration.inMilliseconds.toDouble() / totalInMilliseconds; 33 | CurveTween interval = CurveTween(curve: Interval(begin, end)); 34 | final animatable = info.animatable.chain(interval); 35 | final animation = animatable.animate(controller); 36 | return animation; 37 | } 38 | } 39 | 40 | class SingleAnimationBuildInfo { 41 | final Animatable animatable; 42 | final Duration from; 43 | final Duration duration; 44 | 45 | SingleAnimationBuildInfo({ 46 | @required this.animatable, 47 | @required this.from, 48 | @required this.duration, 49 | }); 50 | } 51 | 52 | class SingleAnimationBuilder 53 | extends OneStepAnimationBuilder { 54 | final SingleAnimationBuildInfo buildInfo; 55 | final OneStepBuildAnimation buildAnimation; 56 | 57 | SingleAnimationBuilder({ 58 | @required Duration duration, 59 | @required this.buildAnimation, 60 | @required this.buildInfo, 61 | }) : super(duration); 62 | 63 | @override 64 | OneStepAnimation> buildStep( 65 | AnimationController controller, 66 | Duration startDuration, 67 | Duration totalDuration) { 68 | final data = SingleAnimationData( 69 | duration, startDuration, totalDuration, controller, buildInfo); 70 | return SingleAnimation(data, buildAnimation); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: example 2 | description: A new Flutter project. 3 | 4 | # The following defines the version and build number for your application. 5 | # A version number is three numbers separated by dots, like 1.2.43 6 | # followed by an optional build number separated by a +. 7 | # Both the version and the builder number may be overridden in flutter 8 | # build by specifying --build-name and --build-number, respectively. 9 | # In Android, build-name is used as versionName while build-number used as versionCode. 10 | # Read more about Android versioning at https://developer.android.com/studio/publish/versioning 11 | # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion. 12 | # Read more about iOS versioning at 13 | # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html 14 | version: 1.0.0+1 15 | 16 | environment: 17 | sdk: ">=2.1.0 <3.0.0" 18 | 19 | dependencies: 20 | flutter: 21 | sdk: flutter 22 | flutter_steps_animation: 23 | path: ../ 24 | 25 | # The following adds the Cupertino Icons font to your application. 26 | # Use with the CupertinoIcons class for iOS style icons. 27 | cupertino_icons: ^0.1.2 28 | 29 | dev_dependencies: 30 | flutter_test: 31 | sdk: flutter 32 | 33 | 34 | # For information on the generic Dart part of this file, see the 35 | # following page: https://dart.dev/tools/pub/pubspec 36 | 37 | # The following section is specific to Flutter. 38 | flutter: 39 | 40 | # The following line ensures that the Material Icons font is 41 | # included with your application, so that you can use the icons in 42 | # the material Icons class. 43 | uses-material-design: true 44 | 45 | # To add assets to your application, add an assets section, like this: 46 | # assets: 47 | # - images/a_dot_burr.jpeg 48 | # - images/a_dot_ham.jpeg 49 | 50 | # An image asset can refer to one or more resolution-specific "variants", see 51 | # https://flutter.dev/assets-and-images/#resolution-aware. 52 | 53 | # For details regarding adding assets from package dependencies, see 54 | # https://flutter.dev/assets-and-images/#from-packages 55 | 56 | # To add custom fonts to your application, add a fonts section here, 57 | # in this "flutter" section. Each entry in this list should have a 58 | # "family" key with the font family name, and a "fonts" key with a 59 | # list giving the asset and other descriptors for the font. For 60 | # example: 61 | # fonts: 62 | # - family: Schyler 63 | # fonts: 64 | # - asset: fonts/Schyler-Regular.ttf 65 | # - asset: fonts/Schyler-Italic.ttf 66 | # style: italic 67 | # - family: Trajan Pro 68 | # fonts: 69 | # - asset: fonts/TrajanPro.ttf 70 | # - asset: fonts/TrajanPro_Bold.ttf 71 | # weight: 700 72 | # 73 | # For details regarding fonts from package dependencies, 74 | # see https://flutter.dev/custom-fonts/#from-packages 75 | -------------------------------------------------------------------------------- /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "size" : "20x20", 5 | "idiom" : "iphone", 6 | "filename" : "Icon-App-20x20@2x.png", 7 | "scale" : "2x" 8 | }, 9 | { 10 | "size" : "20x20", 11 | "idiom" : "iphone", 12 | "filename" : "Icon-App-20x20@3x.png", 13 | "scale" : "3x" 14 | }, 15 | { 16 | "size" : "29x29", 17 | "idiom" : "iphone", 18 | "filename" : "Icon-App-29x29@1x.png", 19 | "scale" : "1x" 20 | }, 21 | { 22 | "size" : "29x29", 23 | "idiom" : "iphone", 24 | "filename" : "Icon-App-29x29@2x.png", 25 | "scale" : "2x" 26 | }, 27 | { 28 | "size" : "29x29", 29 | "idiom" : "iphone", 30 | "filename" : "Icon-App-29x29@3x.png", 31 | "scale" : "3x" 32 | }, 33 | { 34 | "size" : "40x40", 35 | "idiom" : "iphone", 36 | "filename" : "Icon-App-40x40@2x.png", 37 | "scale" : "2x" 38 | }, 39 | { 40 | "size" : "40x40", 41 | "idiom" : "iphone", 42 | "filename" : "Icon-App-40x40@3x.png", 43 | "scale" : "3x" 44 | }, 45 | { 46 | "size" : "60x60", 47 | "idiom" : "iphone", 48 | "filename" : "Icon-App-60x60@2x.png", 49 | "scale" : "2x" 50 | }, 51 | { 52 | "size" : "60x60", 53 | "idiom" : "iphone", 54 | "filename" : "Icon-App-60x60@3x.png", 55 | "scale" : "3x" 56 | }, 57 | { 58 | "size" : "20x20", 59 | "idiom" : "ipad", 60 | "filename" : "Icon-App-20x20@1x.png", 61 | "scale" : "1x" 62 | }, 63 | { 64 | "size" : "20x20", 65 | "idiom" : "ipad", 66 | "filename" : "Icon-App-20x20@2x.png", 67 | "scale" : "2x" 68 | }, 69 | { 70 | "size" : "29x29", 71 | "idiom" : "ipad", 72 | "filename" : "Icon-App-29x29@1x.png", 73 | "scale" : "1x" 74 | }, 75 | { 76 | "size" : "29x29", 77 | "idiom" : "ipad", 78 | "filename" : "Icon-App-29x29@2x.png", 79 | "scale" : "2x" 80 | }, 81 | { 82 | "size" : "40x40", 83 | "idiom" : "ipad", 84 | "filename" : "Icon-App-40x40@1x.png", 85 | "scale" : "1x" 86 | }, 87 | { 88 | "size" : "40x40", 89 | "idiom" : "ipad", 90 | "filename" : "Icon-App-40x40@2x.png", 91 | "scale" : "2x" 92 | }, 93 | { 94 | "size" : "76x76", 95 | "idiom" : "ipad", 96 | "filename" : "Icon-App-76x76@1x.png", 97 | "scale" : "1x" 98 | }, 99 | { 100 | "size" : "76x76", 101 | "idiom" : "ipad", 102 | "filename" : "Icon-App-76x76@2x.png", 103 | "scale" : "2x" 104 | }, 105 | { 106 | "size" : "83.5x83.5", 107 | "idiom" : "ipad", 108 | "filename" : "Icon-App-83.5x83.5@2x.png", 109 | "scale" : "2x" 110 | }, 111 | { 112 | "size" : "1024x1024", 113 | "idiom" : "ios-marketing", 114 | "filename" : "Icon-App-1024x1024@1x.png", 115 | "scale" : "1x" 116 | } 117 | ], 118 | "info" : { 119 | "version" : 1, 120 | "author" : "xcode" 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | 33 | 39 | 40 | 41 | 42 | 43 | 44 | 54 | 56 | 62 | 63 | 64 | 65 | 66 | 67 | 73 | 75 | 81 | 82 | 83 | 84 | 86 | 87 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /pubspec.lock: -------------------------------------------------------------------------------- 1 | # Generated by pub 2 | # See https://dart.dev/tools/pub/glossary#lockfile 3 | packages: 4 | archive: 5 | dependency: transitive 6 | description: 7 | name: archive 8 | url: "https://pub.dartlang.org" 9 | source: hosted 10 | version: "2.0.10" 11 | args: 12 | dependency: transitive 13 | description: 14 | name: args 15 | url: "https://pub.dartlang.org" 16 | source: hosted 17 | version: "1.5.2" 18 | async: 19 | dependency: transitive 20 | description: 21 | name: async 22 | url: "https://pub.dartlang.org" 23 | source: hosted 24 | version: "2.3.0" 25 | boolean_selector: 26 | dependency: transitive 27 | description: 28 | name: boolean_selector 29 | url: "https://pub.dartlang.org" 30 | source: hosted 31 | version: "1.0.5" 32 | charcode: 33 | dependency: transitive 34 | description: 35 | name: charcode 36 | url: "https://pub.dartlang.org" 37 | source: hosted 38 | version: "1.1.2" 39 | collection: 40 | dependency: transitive 41 | description: 42 | name: collection 43 | url: "https://pub.dartlang.org" 44 | source: hosted 45 | version: "1.14.11" 46 | convert: 47 | dependency: transitive 48 | description: 49 | name: convert 50 | url: "https://pub.dartlang.org" 51 | source: hosted 52 | version: "2.1.1" 53 | crypto: 54 | dependency: transitive 55 | description: 56 | name: crypto 57 | url: "https://pub.dartlang.org" 58 | source: hosted 59 | version: "2.1.3" 60 | flutter: 61 | dependency: "direct main" 62 | description: flutter 63 | source: sdk 64 | version: "0.0.0" 65 | flutter_test: 66 | dependency: "direct dev" 67 | description: flutter 68 | source: sdk 69 | version: "0.0.0" 70 | image: 71 | dependency: transitive 72 | description: 73 | name: image 74 | url: "https://pub.dartlang.org" 75 | source: hosted 76 | version: "2.1.4" 77 | matcher: 78 | dependency: transitive 79 | description: 80 | name: matcher 81 | url: "https://pub.dartlang.org" 82 | source: hosted 83 | version: "0.12.5" 84 | meta: 85 | dependency: transitive 86 | description: 87 | name: meta 88 | url: "https://pub.dartlang.org" 89 | source: hosted 90 | version: "1.1.7" 91 | path: 92 | dependency: transitive 93 | description: 94 | name: path 95 | url: "https://pub.dartlang.org" 96 | source: hosted 97 | version: "1.6.4" 98 | pedantic: 99 | dependency: transitive 100 | description: 101 | name: pedantic 102 | url: "https://pub.dartlang.org" 103 | source: hosted 104 | version: "1.8.0+1" 105 | petitparser: 106 | dependency: transitive 107 | description: 108 | name: petitparser 109 | url: "https://pub.dartlang.org" 110 | source: hosted 111 | version: "2.4.0" 112 | quiver: 113 | dependency: transitive 114 | description: 115 | name: quiver 116 | url: "https://pub.dartlang.org" 117 | source: hosted 118 | version: "2.0.5" 119 | sky_engine: 120 | dependency: transitive 121 | description: flutter 122 | source: sdk 123 | version: "0.0.99" 124 | source_span: 125 | dependency: transitive 126 | description: 127 | name: source_span 128 | url: "https://pub.dartlang.org" 129 | source: hosted 130 | version: "1.5.5" 131 | stack_trace: 132 | dependency: transitive 133 | description: 134 | name: stack_trace 135 | url: "https://pub.dartlang.org" 136 | source: hosted 137 | version: "1.9.3" 138 | stream_channel: 139 | dependency: transitive 140 | description: 141 | name: stream_channel 142 | url: "https://pub.dartlang.org" 143 | source: hosted 144 | version: "2.0.0" 145 | string_scanner: 146 | dependency: transitive 147 | description: 148 | name: string_scanner 149 | url: "https://pub.dartlang.org" 150 | source: hosted 151 | version: "1.0.5" 152 | term_glyph: 153 | dependency: transitive 154 | description: 155 | name: term_glyph 156 | url: "https://pub.dartlang.org" 157 | source: hosted 158 | version: "1.1.0" 159 | test_api: 160 | dependency: transitive 161 | description: 162 | name: test_api 163 | url: "https://pub.dartlang.org" 164 | source: hosted 165 | version: "0.2.5" 166 | typed_data: 167 | dependency: transitive 168 | description: 169 | name: typed_data 170 | url: "https://pub.dartlang.org" 171 | source: hosted 172 | version: "1.1.6" 173 | vector_math: 174 | dependency: transitive 175 | description: 176 | name: vector_math 177 | url: "https://pub.dartlang.org" 178 | source: hosted 179 | version: "2.0.8" 180 | xml: 181 | dependency: transitive 182 | description: 183 | name: xml 184 | url: "https://pub.dartlang.org" 185 | source: hosted 186 | version: "3.5.0" 187 | sdks: 188 | dart: ">=2.4.0 <3.0.0" 189 | -------------------------------------------------------------------------------- /example/pubspec.lock: -------------------------------------------------------------------------------- 1 | # Generated by pub 2 | # See https://dart.dev/tools/pub/glossary#lockfile 3 | packages: 4 | archive: 5 | dependency: transitive 6 | description: 7 | name: archive 8 | url: "https://pub.dartlang.org" 9 | source: hosted 10 | version: "2.0.11" 11 | args: 12 | dependency: transitive 13 | description: 14 | name: args 15 | url: "https://pub.dartlang.org" 16 | source: hosted 17 | version: "1.5.2" 18 | async: 19 | dependency: transitive 20 | description: 21 | name: async 22 | url: "https://pub.dartlang.org" 23 | source: hosted 24 | version: "2.4.0" 25 | boolean_selector: 26 | dependency: transitive 27 | description: 28 | name: boolean_selector 29 | url: "https://pub.dartlang.org" 30 | source: hosted 31 | version: "1.0.5" 32 | charcode: 33 | dependency: transitive 34 | description: 35 | name: charcode 36 | url: "https://pub.dartlang.org" 37 | source: hosted 38 | version: "1.1.2" 39 | collection: 40 | dependency: transitive 41 | description: 42 | name: collection 43 | url: "https://pub.dartlang.org" 44 | source: hosted 45 | version: "1.14.11" 46 | convert: 47 | dependency: transitive 48 | description: 49 | name: convert 50 | url: "https://pub.dartlang.org" 51 | source: hosted 52 | version: "2.1.1" 53 | crypto: 54 | dependency: transitive 55 | description: 56 | name: crypto 57 | url: "https://pub.dartlang.org" 58 | source: hosted 59 | version: "2.1.3" 60 | cupertino_icons: 61 | dependency: "direct main" 62 | description: 63 | name: cupertino_icons 64 | url: "https://pub.dartlang.org" 65 | source: hosted 66 | version: "0.1.2" 67 | flutter: 68 | dependency: "direct main" 69 | description: flutter 70 | source: sdk 71 | version: "0.0.0" 72 | flutter_steps_animation: 73 | dependency: "direct main" 74 | description: 75 | path: ".." 76 | relative: true 77 | source: path 78 | version: "1.0.2" 79 | flutter_test: 80 | dependency: "direct dev" 81 | description: flutter 82 | source: sdk 83 | version: "0.0.0" 84 | image: 85 | dependency: transitive 86 | description: 87 | name: image 88 | url: "https://pub.dartlang.org" 89 | source: hosted 90 | version: "2.1.4" 91 | matcher: 92 | dependency: transitive 93 | description: 94 | name: matcher 95 | url: "https://pub.dartlang.org" 96 | source: hosted 97 | version: "0.12.6" 98 | meta: 99 | dependency: transitive 100 | description: 101 | name: meta 102 | url: "https://pub.dartlang.org" 103 | source: hosted 104 | version: "1.1.8" 105 | path: 106 | dependency: transitive 107 | description: 108 | name: path 109 | url: "https://pub.dartlang.org" 110 | source: hosted 111 | version: "1.6.4" 112 | pedantic: 113 | dependency: transitive 114 | description: 115 | name: pedantic 116 | url: "https://pub.dartlang.org" 117 | source: hosted 118 | version: "1.8.0+1" 119 | petitparser: 120 | dependency: transitive 121 | description: 122 | name: petitparser 123 | url: "https://pub.dartlang.org" 124 | source: hosted 125 | version: "2.4.0" 126 | quiver: 127 | dependency: transitive 128 | description: 129 | name: quiver 130 | url: "https://pub.dartlang.org" 131 | source: hosted 132 | version: "2.0.5" 133 | sky_engine: 134 | dependency: transitive 135 | description: flutter 136 | source: sdk 137 | version: "0.0.99" 138 | source_span: 139 | dependency: transitive 140 | description: 141 | name: source_span 142 | url: "https://pub.dartlang.org" 143 | source: hosted 144 | version: "1.5.5" 145 | stack_trace: 146 | dependency: transitive 147 | description: 148 | name: stack_trace 149 | url: "https://pub.dartlang.org" 150 | source: hosted 151 | version: "1.9.3" 152 | stream_channel: 153 | dependency: transitive 154 | description: 155 | name: stream_channel 156 | url: "https://pub.dartlang.org" 157 | source: hosted 158 | version: "2.0.0" 159 | string_scanner: 160 | dependency: transitive 161 | description: 162 | name: string_scanner 163 | url: "https://pub.dartlang.org" 164 | source: hosted 165 | version: "1.0.5" 166 | term_glyph: 167 | dependency: transitive 168 | description: 169 | name: term_glyph 170 | url: "https://pub.dartlang.org" 171 | source: hosted 172 | version: "1.1.0" 173 | test_api: 174 | dependency: transitive 175 | description: 176 | name: test_api 177 | url: "https://pub.dartlang.org" 178 | source: hosted 179 | version: "0.2.11" 180 | typed_data: 181 | dependency: transitive 182 | description: 183 | name: typed_data 184 | url: "https://pub.dartlang.org" 185 | source: hosted 186 | version: "1.1.6" 187 | vector_math: 188 | dependency: transitive 189 | description: 190 | name: vector_math 191 | url: "https://pub.dartlang.org" 192 | source: hosted 193 | version: "2.0.8" 194 | xml: 195 | dependency: transitive 196 | description: 197 | name: xml 198 | url: "https://pub.dartlang.org" 199 | source: hosted 200 | version: "3.5.0" 201 | sdks: 202 | dart: ">=2.4.0 <3.0.0" 203 | -------------------------------------------------------------------------------- /lib/src/multiple_animation.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/animation.dart'; 2 | import 'package:flutter/foundation.dart'; 3 | import 'package:flutter/widgets.dart'; 4 | 5 | import 'base.dart'; 6 | 7 | class _MultipleAnimationBuildInfo { 8 | final Animatable animatable; 9 | final Duration from; 10 | final Duration duration; 11 | final Object key; 12 | 13 | _MultipleAnimationBuildInfo( 14 | this.animatable, this.from, this.duration, this.key); 15 | } 16 | 17 | class MultipleAnimationBuilder extends OneStepAnimationBuilder { 18 | final List<_MultipleAnimationBuildInfo> buildInfoList = []; 19 | final OneStepBuildAnimation> buildAnimation; 20 | 21 | MultipleAnimationBuilder({ 22 | @required Duration duration, 23 | @required this.buildAnimation, 24 | }) : assert(duration != null && duration != Duration.zero), 25 | assert(buildAnimation != null), 26 | super(duration); 27 | 28 | MultipleAnimationBuilder addAnimatable({ 29 | @required Animatable animatable, 30 | @required Duration from, 31 | @required Duration duration, 32 | @required key, 33 | }) { 34 | assert(animatable != null); 35 | assert(from >= Duration.zero); 36 | assert(from + duration <= this.duration); 37 | assert(duration > Duration.zero); 38 | buildInfoList 39 | .add(_MultipleAnimationBuildInfo(animatable, from, duration, key)); 40 | return this; 41 | } 42 | 43 | @override 44 | MultipleAnimation buildStep(AnimationController controller, 45 | Duration startDuration, Duration totalDuration) { 46 | final data = MultipleAnimationData( 47 | duration, startDuration, totalDuration, controller, buildInfoList); 48 | final multipleStepAnimation = MultipleAnimation(data, buildAnimation); 49 | return multipleStepAnimation; 50 | } 51 | } 52 | 53 | class MultipleAnimation 54 | extends OneStepAnimation, MultipleAnimationData> { 55 | MultipleAnimation(MultipleAnimationData data, 56 | OneStepBuildAnimation> oneStepBuildAnimation) 57 | : super(data, oneStepBuildAnimation); 58 | } 59 | 60 | class MultipleAnimationData 61 | extends OneStepAnimationData> { 62 | MultipleAnimationData( 63 | Duration duration, 64 | Duration startDuration, 65 | Duration totalDuration, 66 | AnimationController controller, 67 | List<_MultipleAnimationBuildInfo> list) 68 | : super( 69 | duration, 70 | _createAnimationData( 71 | startDuration, totalDuration, controller, list)); 72 | 73 | static Map _createAnimationData( 74 | Duration startDuration, 75 | Duration totalDuration, 76 | AnimationController controller, 77 | List<_MultipleAnimationBuildInfo> list) { 78 | final Map animatableMap = {}; 79 | final startInMilliseconds = startDuration.inMilliseconds; 80 | final totalInMilliseconds = totalDuration.inMilliseconds; 81 | list.forEach((_MultipleAnimationBuildInfo multipleInfo) { 82 | final double begin = 83 | (startInMilliseconds + multipleInfo.from.inMilliseconds).toDouble() / 84 | totalInMilliseconds; 85 | final double end = begin + 86 | multipleInfo.duration.inMilliseconds.toDouble() / totalInMilliseconds; 87 | CurveTween interval = CurveTween(curve: Interval(begin, end)); 88 | 89 | final animatable = multipleInfo.animatable.chain(interval); 90 | final key = multipleInfo.key; 91 | if (animatableMap[key] == null) { 92 | animatableMap[key] = _StartTimeSortedAnimatable() 93 | ..addAnimatable(animatable, begin, end, key); 94 | } else { 95 | animatableMap[key].addAnimatable(animatable, begin, end, key); 96 | } 97 | }); 98 | final Map map = {}; 99 | animatableMap.forEach((key, animatable) { 100 | map[key] = animatable.animate(controller); 101 | }); 102 | return map; 103 | } 104 | } 105 | 106 | class _AnimatableAndStartTime { 107 | final Animatable animatable; 108 | final double begin; 109 | final double end; 110 | 111 | _AnimatableAndStartTime(this.animatable, this.begin, this.end); 112 | } 113 | 114 | class _StartTimeSortedAnimatable extends Animatable { 115 | final animatableList = <_AnimatableAndStartTime>[]; 116 | 117 | void addAnimatable(Animatable animatable, double begin, double end, Object key) { 118 | animatableList.add(_AnimatableAndStartTime(animatable, begin, end)); 119 | animatableList.sort((a, b) { 120 | return a.begin.compareTo(b.begin); 121 | }); 122 | assert(() { 123 | _AnimatableAndStartTime preAnimatable; 124 | for (final animatable in animatableList) { 125 | if (preAnimatable == null) { 126 | preAnimatable = animatable; 127 | continue; 128 | } 129 | if (preAnimatable.end > animatable.begin) { 130 | throw 'Animatable of \'$key\' conflicts'; 131 | } 132 | preAnimatable = animatable; 133 | } 134 | return true; 135 | }()); 136 | } 137 | 138 | Animatable getAppropriateAnimatable(double t) { 139 | assert(animatableList.length != 0); 140 | for (int i = 0; i < animatableList.length; ++i) { 141 | switch (t.compareTo(animatableList[i].begin)) { 142 | case -1: 143 | int index = i - 1 >= 0 ? i - 1 : 0; 144 | return animatableList[index].animatable; 145 | break; 146 | case 0: 147 | return animatableList[i].animatable; 148 | break; 149 | case 1: 150 | continue; 151 | break; 152 | } 153 | } 154 | return animatableList.last.animatable; 155 | } 156 | 157 | @override 158 | transform(double t) { 159 | final currentAnimatable = getAppropriateAnimatable(t); 160 | return currentAnimatable.transform(t); 161 | } 162 | } 163 | -------------------------------------------------------------------------------- /example/lib/animation_page.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_steps_animation/flutter_steps_animation.dart'; 3 | 4 | class AnimationPage extends StatefulWidget { 5 | @override 6 | State createState() => AnimationPageState(); 7 | } 8 | 9 | class AnimationPageState extends State 10 | with SingleTickerProviderStateMixin { 11 | StepsAnimation stepsAnimation; 12 | 13 | @override 14 | Widget build(BuildContext context) { 15 | return Scaffold( 16 | body: Container( 17 | color: Colors.white, 18 | child: GestureDetector( 19 | onTap: () { 20 | _playAnimation(stepsAnimation.controller); 21 | }, 22 | child: Center( 23 | child: AnimatedBuilder( 24 | animation: stepsAnimation.controller, 25 | builder: stepsAnimation.builder, 26 | ), 27 | ), 28 | ), 29 | ), 30 | ); 31 | } 32 | 33 | @override 34 | void initState() { 35 | super.initState(); 36 | stepsAnimation = StepsAnimationBuilder() 37 | .addStepBuilder(_timeAnimation(1)) 38 | .addStepBuilder(_timeAnimation(2)) 39 | .addStepBuilder(_timeAnimation(3)) 40 | .addStepBuilder(_multipleAnimation()) 41 | .addStepBuilder(_waitStep(2)) 42 | .addStepBuilder(_moreStepsAnimation()) 43 | .animation(this); 44 | } 45 | 46 | Future _playAnimation(AnimationController controller) async { 47 | try { 48 | await controller.forward().orCancel; 49 | await controller.reverse().orCancel; 50 | // controller.reset(); 51 | } on TickerCanceled {} 52 | } 53 | 54 | @override 55 | void dispose() { 56 | stepsAnimation.controller.dispose(); 57 | super.dispose(); 58 | } 59 | 60 | SingleAnimationBuilder _timeAnimation(int number) { 61 | final duration = Duration(milliseconds: 500); 62 | return SingleAnimationBuilder( 63 | duration: duration, 64 | buildInfo: SingleAnimationBuildInfo( 65 | animatable: Tween(begin: 25, end: 100), 66 | from: Duration.zero, 67 | duration: duration), 68 | buildAnimation: (context, data) { 69 | return Text( 70 | '$number', 71 | style: TextStyle(fontSize: data.value), 72 | ); 73 | }, 74 | ); 75 | } 76 | 77 | MultipleAnimationBuilder _multipleAnimation() { 78 | final duration = Duration(seconds: 10); 79 | final builder = MultipleAnimationBuilder( 80 | duration: duration, 81 | buildAnimation: (context, map) { 82 | final Color color = map['color'].value; 83 | final complementaryColor = Color(0xffffff ^ color.value); 84 | return ClipRRect( 85 | borderRadius: 86 | BorderRadius.all(Radius.circular(map['radius'].value)), 87 | child: Container( 88 | height: map['height'].value, 89 | width: map['width'].value, 90 | color: color, 91 | child: Center( 92 | child: Text( 93 | '${map['color'].value}', 94 | style: TextStyle(color: complementaryColor), 95 | ), 96 | ), 97 | ), 98 | ); 99 | }); 100 | builder 101 | .addAnimatable( 102 | animatable: Tween(begin: 100, end: 400), 103 | from: Duration.zero, 104 | duration: Duration(seconds: 4), 105 | key: 'height') 106 | .addAnimatable( 107 | animatable: Tween(begin: 400, end: 100), 108 | from: Duration(seconds: 5), 109 | duration: Duration(seconds: 5), 110 | key: 'height') 111 | .addAnimatable( 112 | animatable: Tween(begin: 400, end: 150), 113 | from: Duration.zero, 114 | duration: Duration(seconds: 4), 115 | key: 'width') 116 | .addAnimatable( 117 | animatable: Tween(begin: 150, end: 400), 118 | from: Duration(seconds: 5), 119 | duration: Duration(seconds: 3), 120 | key: 'width') 121 | .addAnimatable( 122 | animatable: ColorTween( 123 | begin: Colors.green[400], end: Colors.yellowAccent[700]), 124 | from: Duration(seconds: 2), 125 | duration: Duration(seconds: 4), 126 | key: 'color') 127 | .addAnimatable( 128 | animatable: ColorTween( 129 | begin: Colors.yellowAccent[700], end: Colors.red[800]), 130 | from: Duration(seconds: 7), 131 | duration: Duration(seconds: 3), 132 | key: 'color') 133 | .addAnimatable( 134 | animatable: Tween(begin: 0, end: 200), 135 | from: Duration(seconds: 3), 136 | duration: Duration(seconds: 2), 137 | key: 'radius') 138 | .addAnimatable( 139 | animatable: Tween(begin: 200, end: 0), 140 | from: Duration(seconds: 6), 141 | duration: Duration(seconds: 3), 142 | key: 'radius'); 143 | return builder; 144 | } 145 | 146 | NoneAnimationBuilder _waitStep(int second) { 147 | return NoneAnimationBuilder( 148 | duration: Duration(seconds: second), 149 | builder: (context) { 150 | return Container( 151 | color: Colors.black, 152 | height: 100, 153 | width: 400, 154 | child: Center( 155 | child: Text( 156 | 'just wait ${second}s', 157 | style: TextStyle(color: Colors.white), 158 | ), 159 | ), 160 | ); 161 | }); 162 | } 163 | 164 | SingleAnimationBuilder _moreStepsAnimation() { 165 | return SingleAnimationBuilder( 166 | duration: Duration(seconds: 10), 167 | buildAnimation: (context, animation) { 168 | return Container( 169 | color: Colors.black, 170 | height: animation.value, 171 | width: 400, 172 | child: Center( 173 | child: Text( 174 | 'more steps', 175 | style: TextStyle(color: Colors.white), 176 | ), 177 | ), 178 | ); 179 | }, 180 | buildInfo: SingleAnimationBuildInfo( 181 | animatable: Tween(begin: 100, end: 1000), 182 | from: Duration.zero, 183 | duration: Duration(seconds: 8), 184 | ), 185 | ); 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /README_CN.md: -------------------------------------------------------------------------------- 1 | # flutter_steps_animation 2 | 3 | 一个强大的动画库，可以让你分布完成一个复杂动画 4 | 5 | ## 一个简单的例子 6 | 7 | ![example](example.gif) 8 | 9 | ## 添加依赖 10 | 11 | 添加依赖: 12 | 13 | ```yaml 14 | dependencies: 15 | flutter_steps_animation: ^1.1.0 16 | ``` 17 | 18 | ## 代码示例 19 | 20 | 使用StepsAnimation和平常的Animation没有太多不同： 21 | 22 | ```dart 23 | class AnimationPageState extends State 24 | with SingleTickerProviderStateMixin { 25 | StepsAnimation stepsAnimation; 26 | 27 | @override 28 | Widget build(BuildContext context) { 29 | return Scaffold( 30 | body: Container( 31 | color: Colors.white, 32 | child: GestureDetector( 33 | onTap: () { 34 | _playAnimation(stepsAnimation.controller); 35 | }, 36 | child: Center( 37 | child: AnimatedBuilder( 38 | animation: stepsAnimation.controller, 39 | builder: stepsAnimation.builder, 40 | ), 41 | ), 42 | ), 43 | ), 44 | ); 45 | } 46 | 47 | @override 48 | void initState() { 49 | super.initState(); 50 | stepsAnimation = StepsAnimationBuilder() 51 | .addStepBuilder(_timeAnimation(1)) 52 | .addStepBuilder(_timeAnimation(2)) 53 | .addStepBuilder(_timeAnimation(3)) 54 | .addStepBuilder(_multipleAnimation()) 55 | .addStepBuilder(_waitStep(2)) 56 | .addStepBuilder(_moreStepsAnimation()) 57 | .animation(this); 58 | } 59 | 60 | Future _playAnimation(AnimationController controller) async { 61 | try { 62 | await controller.forward().orCancel; 63 | await controller.reverse().orCancel; 64 | // controller.reset(); 65 | } on TickerCanceled {} 66 | } 67 | 68 | @override 69 | void dispose() { 70 | stepsAnimation.controller.dispose(); 71 | super.dispose(); 72 | } 73 | 74 | ``` 75 | 76 | 添加步骤，每个步骤的持续时间相加，即为整个动画的持续时间 77 | 78 | ```dart 79 | stepsAnimation = StepsAnimationBuilder() 80 | .addStepBuilder(_timeAnimation(1)) 81 | .addStepBuilder(_timeAnimation(2)) 82 | .addStepBuilder(_timeAnimation(3)) 83 | .addStepBuilder(_multipleAnimation()) 84 | .addStepBuilder(_waitStep(2)) 85 | .addStepBuilder(_moreStepsAnimation()) 86 | .animation(this); 87 | ``` 88 | 89 | 示例图片中，所有动画的代码，看着很长，其实真的很简单 90 | 91 | ```dart 92 | SingleAnimationBuilder _timeAnimation(int number) { 93 | final duration = Duration(milliseconds: 500); 94 | return SingleAnimationBuilder( 95 | duration: duration, 96 | buildInfo: SingleAnimationBuildInfo( 97 | animatable: Tween(begin: 25, end: 100), 98 | from: Duration.zero, 99 | duration: duration), 100 | buildAnimation: (context, data) { 101 | return Text( 102 | '$number', 103 | style: TextStyle(fontSize: data.value), 104 | ); 105 | }, 106 | ); 107 | } 108 | 109 | MultipleAnimationBuilder _multipleAnimation() { 110 | final duration = Duration(seconds: 10); 111 | final builder = MultipleAnimationBuilder( 112 | duration: duration, 113 | buildAnimation: (context, map) { 114 | final Color color = map['color'].value; 115 | final complementaryColor = Color(0xffffff ^ color.value); 116 | return ClipRRect( 117 | borderRadius: 118 | BorderRadius.all(Radius.circular(map['radius'].value)), 119 | child: Container( 120 | height: map['height'].value, 121 | width: map['width'].value, 122 | color: color, 123 | child: Center( 124 | child: Text( 125 | '${map['color'].value}', 126 | style: TextStyle(color: complementaryColor), 127 | ), 128 | ), 129 | ), 130 | ); 131 | }); 132 | builder 133 | .addAnimatable( 134 | animatable: Tween(begin: 100, end: 400), 135 | from: Duration.zero, 136 | duration: Duration(seconds: 4), 137 | key: 'height') 138 | .addAnimatable( 139 | animatable: Tween(begin: 400, end: 100), 140 | from: Duration(seconds: 5), 141 | duration: Duration(seconds: 5), 142 | key: 'height') 143 | .addAnimatable( 144 | animatable: Tween(begin: 400, end: 150), 145 | from: Duration.zero, 146 | duration: Duration(seconds: 4), 147 | key: 'width') 148 | .addAnimatable( 149 | animatable: Tween(begin: 150, end: 400), 150 | from: Duration(seconds: 5), 151 | duration: Duration(seconds: 3), 152 | key: 'width') 153 | .addAnimatable( 154 | animatable: ColorTween( 155 | begin: Colors.green[400], end: Colors.yellowAccent[700]), 156 | from: Duration(seconds: 2), 157 | duration: Duration(seconds: 4), 158 | key: 'color') 159 | .addAnimatable( 160 | animatable: ColorTween( 161 | begin: Colors.yellowAccent[700], end: Colors.red[800]), 162 | from: Duration(seconds: 7), 163 | duration: Duration(seconds: 3), 164 | key: 'color') 165 | .addAnimatable( 166 | animatable: Tween(begin: 0, end: 200), 167 | from: Duration(seconds: 3), 168 | duration: Duration(seconds: 2), 169 | key: 'radius') 170 | .addAnimatable( 171 | animatable: Tween(begin: 200, end: 0), 172 | from: Duration(seconds: 6), 173 | duration: Duration(seconds: 3), 174 | key: 'radius'); 175 | return builder; 176 | } 177 | 178 | NoneAnimationBuilder _waitStep(int second) { 179 | return NoneAnimationBuilder( 180 | duration: Duration(seconds: second), 181 | builder: (context) { 182 | return Container( 183 | color: Colors.black, 184 | height: 100, 185 | width: 400, 186 | child: Center( 187 | child: Text( 188 | 'just wait ${second}s', 189 | style: TextStyle(color: Colors.white), 190 | ), 191 | ), 192 | ); 193 | }); 194 | } 195 | 196 | SingleAnimationBuilder _moreStepsAnimation() { 197 | return SingleAnimationBuilder( 198 | duration: Duration(seconds: 10), 199 | buildAnimation: (context, animation) { 200 | return Container( 201 | color: Colors.black, 202 | height: animation.value, 203 | width: 400, 204 | child: Center( 205 | child: Text( 206 | 'more steps', 207 | style: TextStyle(color: Colors.white), 208 | ), 209 | ), 210 | ); 211 | }, 212 | buildInfo: SingleAnimationBuildInfo( 213 | animatable: Tween(begin: 100, end: 1000), 214 | from: Duration.zero, 215 | duration: Duration(seconds: 8), 216 | ), 217 | ); 218 | } 219 | ``` 220 | 221 | 222 | 223 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # flutter_steps_animation 2 | 3 | [中文文档](README_CN.md) 4 | 5 | A powerful Flutter package for building complex animation step by step. 6 | 7 | ## Example 8 | 9 | ![example](example.gif) 10 | 11 | ## Depend on it 12 | 13 | Add this to your package's pubspec.yaml file: 14 | 15 | ```yaml 16 | dependencies: 17 | flutter_steps_animation: ^1.1.0 18 | ``` 19 | 20 | ## Getting Started 21 | 22 | Using StepsAnimation is more of a normal Animation: 23 | 24 | ```dart 25 | class AnimationPageState extends State 26 | with SingleTickerProviderStateMixin { 27 | StepsAnimation stepsAnimation; 28 | 29 | @override 30 | Widget build(BuildContext context) { 31 | return Scaffold( 32 | body: Container( 33 | color: Colors.white, 34 | child: GestureDetector( 35 | onTap: () { 36 | _playAnimation(stepsAnimation.controller); 37 | }, 38 | child: Center( 39 | child: AnimatedBuilder( 40 | animation: stepsAnimation.controller, 41 | builder: stepsAnimation.builder, 42 | ), 43 | ), 44 | ), 45 | ), 46 | ); 47 | } 48 | 49 | @override 50 | void initState() { 51 | super.initState(); 52 | stepsAnimation = StepsAnimationBuilder() 53 | .addStepBuilder(_timeAnimation(1)) 54 | .addStepBuilder(_timeAnimation(2)) 55 | .addStepBuilder(_timeAnimation(3)) 56 | .addStepBuilder(_multipleAnimation()) 57 | .addStepBuilder(_waitStep(2)) 58 | .addStepBuilder(_moreStepsAnimation()) 59 | .animation(this); 60 | } 61 | 62 | Future _playAnimation(AnimationController controller) async { 63 | try { 64 | await controller.forward().orCancel; 65 | await controller.reverse().orCancel; 66 | // controller.reset(); 67 | } on TickerCanceled {} 68 | } 69 | 70 | @override 71 | void dispose() { 72 | stepsAnimation.controller.dispose(); 73 | super.dispose(); 74 | } 75 | 76 | ``` 77 | 78 | Add steps for StepsAnimation 79 | 80 | ```dart 81 | stepsAnimation = StepsAnimationBuilder() 82 | .addStepBuilder(_timeAnimation(1)) 83 | .addStepBuilder(_timeAnimation(2)) 84 | .addStepBuilder(_timeAnimation(3)) 85 | .addStepBuilder(_multipleAnimation()) 86 | .addStepBuilder(_waitStep(2)) 87 | .addStepBuilder(_moreStepsAnimation()) 88 | .animation(this); 89 | ``` 90 | 91 | Whole code of animations 92 | 93 | ```dart 94 | SingleAnimationBuilder _timeAnimation(int number) { 95 | final duration = Duration(milliseconds: 500); 96 | return SingleAnimationBuilder( 97 | duration: duration, 98 | buildInfo: SingleAnimationBuildInfo( 99 | animatable: Tween(begin: 25, end: 100), 100 | from: Duration.zero, 101 | duration: duration), 102 | buildAnimation: (context, data) { 103 | return Text( 104 | '$number', 105 | style: TextStyle(fontSize: data.value), 106 | ); 107 | }, 108 | ); 109 | } 110 | 111 | MultipleAnimationBuilder _multipleAnimation() { 112 | final duration = Duration(seconds: 10); 113 | final builder = MultipleAnimationBuilder( 114 | duration: duration, 115 | buildAnimation: (context, map) { 116 | final Color color = map['color'].value; 117 | final complementaryColor = Color(0xffffff ^ color.value); 118 | return ClipRRect( 119 | borderRadius: 120 | BorderRadius.all(Radius.circular(map['radius'].value)), 121 | child: Container( 122 | height: map['height'].value, 123 | width: map['width'].value, 124 | color: color, 125 | child: Center( 126 | child: Text( 127 | '${map['color'].value}', 128 | style: TextStyle(color: complementaryColor), 129 | ), 130 | ), 131 | ), 132 | ); 133 | }); 134 | builder 135 | .addAnimatable( 136 | animatable: Tween(begin: 100, end: 400), 137 | from: Duration.zero, 138 | duration: Duration(seconds: 4), 139 | key: 'height') 140 | .addAnimatable( 141 | animatable: Tween(begin: 400, end: 100), 142 | from: Duration(seconds: 5), 143 | duration: Duration(seconds: 5), 144 | key: 'height') 145 | .addAnimatable( 146 | animatable: Tween(begin: 400, end: 150), 147 | from: Duration.zero, 148 | duration: Duration(seconds: 4), 149 | key: 'width') 150 | .addAnimatable( 151 | animatable: Tween(begin: 150, end: 400), 152 | from: Duration(seconds: 5), 153 | duration: Duration(seconds: 3), 154 | key: 'width') 155 | .addAnimatable( 156 | animatable: ColorTween( 157 | begin: Colors.green[400], end: Colors.yellowAccent[700]), 158 | from: Duration(seconds: 2), 159 | duration: Duration(seconds: 4), 160 | key: 'color') 161 | .addAnimatable( 162 | animatable: ColorTween( 163 | begin: Colors.yellowAccent[700], end: Colors.red[800]), 164 | from: Duration(seconds: 7), 165 | duration: Duration(seconds: 3), 166 | key: 'color') 167 | .addAnimatable( 168 | animatable: Tween(begin: 0, end: 200), 169 | from: Duration(seconds: 3), 170 | duration: Duration(seconds: 2), 171 | key: 'radius') 172 | .addAnimatable( 173 | animatable: Tween(begin: 200, end: 0), 174 | from: Duration(seconds: 6), 175 | duration: Duration(seconds: 3), 176 | key: 'radius'); 177 | return builder; 178 | } 179 | 180 | NoneAnimationBuilder _waitStep(int second) { 181 | return NoneAnimationBuilder( 182 | duration: Duration(seconds: second), 183 | builder: (context) { 184 | return Container( 185 | color: Colors.black, 186 | height: 100, 187 | width: 400, 188 | child: Center( 189 | child: Text( 190 | 'just wait ${second}s', 191 | style: TextStyle(color: Colors.white), 192 | ), 193 | ), 194 | ); 195 | }); 196 | } 197 | 198 | SingleAnimationBuilder _moreStepsAnimation() { 199 | return SingleAnimationBuilder( 200 | duration: Duration(seconds: 10), 201 | buildAnimation: (context, animation) { 202 | return Container( 203 | color: Colors.black, 204 | height: animation.value, 205 | width: 400, 206 | child: Center( 207 | child: Text( 208 | 'more steps', 209 | style: TextStyle(color: Colors.white), 210 | ), 211 | ), 212 | ); 213 | }, 214 | buildInfo: SingleAnimationBuildInfo( 215 | animatable: Tween(begin: 100, end: 1000), 216 | from: Duration.zero, 217 | duration: Duration(seconds: 8), 218 | ), 219 | ); 220 | } 221 | ``` 222 | 223 | 224 | 225 | --------------------------------------------------------------------------------