diff --git a/assets/images/man.flr b/assets/images/man.flr deleted file mode 100644 index 934a12e..0000000 Binary files a/assets/images/man.flr and /dev/null differ diff --git a/assets/images/solar.flr b/assets/images/solar.flr new file mode 100644 index 0000000..7d3d468 Binary files /dev/null and b/assets/images/solar.flr differ diff --git a/assets/images/solar_flare.png b/assets/images/solar_flare.png new file mode 100644 index 0000000..46bf265 Binary files /dev/null and b/assets/images/solar_flare.png differ diff --git a/doc/animation_flare.gif b/doc/animation_flare.gif new file mode 100644 index 0000000..371821e Binary files /dev/null and b/doc/animation_flare.gif differ diff --git a/lib/constant/_constant.dart b/lib/constant/_constant.dart new file mode 100644 index 0000000..083ad47 --- /dev/null +++ b/lib/constant/_constant.dart @@ -0,0 +1,9 @@ +/// +/// Created by NieBin on 2019/1/9 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +export "color_const.dart"; +export 'image_const.dart'; +export 'page_const.dart'; +export 'size_const.dart'; diff --git a/lib/constant/color_const.dart b/lib/constant/color_const.dart index 4e0909a..cdf0c56 100644 --- a/lib/constant/color_const.dart +++ b/lib/constant/color_const.dart @@ -8,3 +8,14 @@ import "package:flutter/material.dart"; const BOTTOM_COLORS = Colors.grey; const COLOR_LIGHT_INDEX = 900; const COLOR_DARK_INDEX = 500; + +const BLUE_NORMAL = Color(0xff54c5f8); +const GREEN_NORMAL = Color(0xff6bde54); +const BLUE_DARK2 = Color(0xff01579b); +const BLUE_DARK1 = Color(0xff29b6f6); +const RED_DARK1 = Color(0xfff26388); +const RED_DARK2 = Color(0xfff782a0); +const RED_DARK3 = Color(0xfffb8ba8); +const RED_DARK4 = Color(0xfffb89a6); +const RED_DARK5 = Color(0xfffd86a5); +const YELLOW_NORMAL = Color(0xfffcce89); diff --git a/lib/constant/image_const.dart b/lib/constant/image_const.dart index 27380c3..c8898c3 100644 --- a/lib/constant/image_const.dart +++ b/lib/constant/image_const.dart @@ -6,4 +6,7 @@ class ImagePath { static const _PATH = "assets/images"; static const FLUTTER_OPEN = "$_PATH/flutteropen.png"; + static const PAGE_ANIMATION_01 = "$_PATH/flutteropen.png"; + static const PAGE_ANIMATION_02 = "$_PATH/solar_flare.png"; + static const SOLAR_FLARE = "$_PATH/solar.flr"; } diff --git a/lib/constant/page_const.dart b/lib/constant/page_const.dart new file mode 100644 index 0000000..6b6d779 --- /dev/null +++ b/lib/constant/page_const.dart @@ -0,0 +1,10 @@ +/// +/// Created by NieBin on 2019/1/9 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +class PageConst { + static const HOME_PAGE = "/Home page"; + static const ANIMATION_01 = "Animation 01 page"; + static const ANIMATION_02 = "Animation 02 page"; +} diff --git a/lib/main.dart b/lib/main.dart index 8b4ef5e..4769ceb 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; -import 'page/WelcomePage.dart'; +import 'package:flutter_animation/constant/_constant.dart'; +import 'package:flutter_animation/page/_page.dart'; void main() => runApp(MyApp()); @@ -9,7 +10,11 @@ class MyApp extends StatelessWidget { return MaterialApp( title: 'Layout Animation', home: WelcomePage(), - routes: {}, + routes: { + PageConst.HOME_PAGE: (context) => HomePage(), + PageConst.ANIMATION_01: (context) => AnimationOnePage(), + PageConst.ANIMATION_02: (context) => FlarePage(), + }, ); } } diff --git a/lib/page/HomePage.dart b/lib/page/HomePage.dart new file mode 100644 index 0000000..08bd6ba --- /dev/null +++ b/lib/page/HomePage.dart @@ -0,0 +1,81 @@ +/// +/// Created by NieBin on 2019/1/9 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import 'package:flutter_animation/constant/_constant.dart'; + +class HomePage extends StatefulWidget { + @override + _HomeState createState() => _HomeState(); +} + +const PAGES = [ + { + "title": PageConst.ANIMATION_01, + "img": ImagePath.PAGE_ANIMATION_01, + "click": PageConst.ANIMATION_01 + }, + { + "title": PageConst.ANIMATION_02, + "img": ImagePath.PAGE_ANIMATION_02, + "click": PageConst.ANIMATION_02 + }, +]; +const ITEM_COLORS = [ + BLUE_DARK2, + RED_DARK5, + BLUE_NORMAL, + RED_DARK2, + YELLOW_NORMAL, + BLUE_DARK1, + GREEN_NORMAL, + RED_DARK3 +]; + +class _HomeState extends State { + Widget _listItem(index) => InkWell( + child: Card( + elevation: 10.0, + child: Container( + color: ITEM_COLORS[index % ITEM_COLORS.length].withOpacity(0.9), + child: Stack( + children: [ + Container( + child: Center( + child: Image.asset( + PAGES[index % PAGES.length]["img"], + fit: BoxFit.fitWidth, + ), + ), + ) + ], + ), + ), + ), + onTap: () { + Navigator.of(context).pushNamed(PAGES[index % PAGES.length]["click"]); + }, + ); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text("Flutter Open"), + ), + body: GridView.builder( + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 1, + childAspectRatio: 1, + crossAxisSpacing: 10, + mainAxisSpacing: 10), + itemBuilder: (context, index) { + return _listItem(index); + }, + itemCount: PAGES.length, + ), + ); + } +} diff --git a/lib/page/WelcomePage.dart b/lib/page/WelcomePage.dart index 33421bd..6a68716 100644 --- a/lib/page/WelcomePage.dart +++ b/lib/page/WelcomePage.dart @@ -4,7 +4,7 @@ /// Email: niebin312@gmail.com /// import "package:flutter/material.dart"; -import 'package:flutter_animation/constant/image_const.dart'; +import 'package:flutter_animation/constant/_constant.dart'; import 'dart:math'; class WelcomePage extends StatefulWidget { @@ -21,19 +21,17 @@ class _WelcomeState extends State void initState() { super.initState(); _controller = - AnimationController(duration: const Duration(seconds: 2), vsync: this); + AnimationController(duration: const Duration(seconds: 3), vsync: this); _animation = Tween(begin: 0.0, end: 200.0).animate(_controller) ..addListener(() { - print("listener"); setState(() {}); }) ..addStatusListener((state) { if (state == AnimationStatus.completed) { print("complete"); - _controller.forward(); } }); - _controller.forward(); + _controller.repeat(); } @override @@ -68,9 +66,10 @@ class _WelcomeState extends State child: Center( child: FloatingActionButton( onPressed: () { - _controller..repeat(); + Navigator.pushReplacementNamed( + context, PageConst.HOME_PAGE); }, - child: Icon(Icons.refresh), + child: Icon(Icons.forward), ), )) ], diff --git a/lib/page/_page.dart b/lib/page/_page.dart new file mode 100644 index 0000000..6fe7209 --- /dev/null +++ b/lib/page/_page.dart @@ -0,0 +1,9 @@ +/// +/// Created by NieBin on 2019/1/9 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +export "HomePage.dart"; +export "WelcomePage.dart"; +export 'package:flutter_animation/page/animation01/AnimationOnePage.dart'; +export 'package:flutter_animation/page/animation02/FlarePage.dart'; diff --git a/lib/page/animation01/AnimationOnePage.dart b/lib/page/animation01/AnimationOnePage.dart new file mode 100644 index 0000000..637544d --- /dev/null +++ b/lib/page/animation01/AnimationOnePage.dart @@ -0,0 +1,86 @@ +/// +/// Created by NieBin on 2019/1/9 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import 'package:flutter_animation/constant/_constant.dart'; +import 'dart:math'; + +///tutorial: https://medium.com/flutteropen/animation-01-how-to-use-the-animation-in-the-flutter-e3ef7043f940 +class AnimationOnePage extends StatefulWidget { + @override + _OneState createState() => _OneState(); +} + +class _OneState extends State + with SingleTickerProviderStateMixin { + AnimationController _controller; + Animation _animation; + + @override + void initState() { + super.initState(); + _controller = + AnimationController(duration: const Duration(seconds: 3), vsync: this); + _animation = Tween(begin: 50.0, end: 200.0).animate(_controller) + ..addListener(() { + setState(() {}); + }) + ..addStatusListener((state) { + if (state == AnimationStatus.completed) { + print("complete"); + } + }); + _controller.repeat(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text("Animation Tutorial 01"), + ), + body: Container( + child: Column( + children: [ + Expanded( + flex: 6, + child: Container( + alignment: AlignmentDirectional.center, + child: Container( + margin: EdgeInsets.only(top: 50.0), + child: Transform.rotate( + angle: -_animation.value * 2 * pi / 200, + child: Image.asset( + ImagePath.FLUTTER_OPEN, + fit: BoxFit.fitHeight, + width: _animation.value, + height: _animation.value, + ), + ), + ), + ), + ), + Expanded( + flex: 1, + child: Center( + child: FloatingActionButton( + onPressed: () { + _controller.repeat(); + }, + child: Icon(Icons.refresh), + ), + )) + ], + ), + ), + ); + } + + @override + void dispose() { + _controller.dispose(); + super.dispose(); + } +} diff --git a/lib/page/animation02/FlarePage.dart b/lib/page/animation02/FlarePage.dart new file mode 100644 index 0000000..e8d8316 --- /dev/null +++ b/lib/page/animation02/FlarePage.dart @@ -0,0 +1,36 @@ +/// +/// Created by NieBin on 2019/1/9 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import 'package:flare_flutter/flare_actor.dart'; +import 'package:flutter_animation/constant/_constant.dart'; + +class FlarePage extends StatefulWidget { + @override + _FlareState createState() => _FlareState(); +} + +class _FlareState extends State { + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text("Flare Animation"), + ), + body: Container( + color: Color(0xff18222c), + child: Center( + child: Center( + child: FlareActor( +// ImagePath.SOLAR_FLARE, + "assets/images/solar.flr", + animation: "solar_run", + ), + ), + ), + ), + ); + } +}