From b3e346fe36a783e410f3763c920a3ba7a0c26e74 Mon Sep 17 00:00:00 2001 From: nb312 Date: Sun, 9 Jun 2019 14:31:16 +0800 Subject: [PATCH 1/2] add the FadeTransition that can change the opacity of a widget. --- lib/const/page_item_const.dart | 5 +++ lib/const/page_name_const.dart | 1 + lib/main.dart | 1 + lib/page/anim/FadeTransitionPage.dart | 56 +++++++++++++++++++++++++++ lib/page/anim/_anim.dart | 1 + 5 files changed, 64 insertions(+) create mode 100644 lib/page/anim/FadeTransitionPage.dart diff --git a/lib/const/page_item_const.dart b/lib/const/page_item_const.dart index 1d8d83a..8060502 100644 --- a/lib/const/page_item_const.dart +++ b/lib/const/page_item_const.dart @@ -202,4 +202,9 @@ const PAGE_ITEMS = [ "img": PageImage.FLUTTER_OPEN, "click": PageName.ANIM_HERO, }, + { + "title": PageName.ANIM_FADE_TRANS, + "img": PageImage.FLUTTER_OPEN, + "click": PageName.ANIM_FADE_TRANS, + }, ]; diff --git a/lib/const/page_name_const.dart b/lib/const/page_name_const.dart index c548a50..e73e23a 100644 --- a/lib/const/page_name_const.dart +++ b/lib/const/page_name_const.dart @@ -45,4 +45,5 @@ class PageName { static const ANIM_CONTAINER = "AnimationContainer"; static const ANIM_CROSS_FADE = "AnimationCrossFade"; static const ANIM_HERO = "HeroPage"; + static const ANIM_FADE_TRANS = "FadeTranstion"; } diff --git a/lib/main.dart b/lib/main.dart index f7a4335..ff85028 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -59,6 +59,7 @@ class FlutterOpenApp extends StatelessWidget { PageName.ANIM_CONTAINER: (context) => AnimatedContainerPage(), PageName.ANIM_CROSS_FADE: (context) => AnimCrossFadePage(), PageName.ANIM_HERO: (context) => HeroPage(), + PageName.ANIM_FADE_TRANS: (context) => FadeTransitionPage(), }, ); } diff --git a/lib/page/anim/FadeTransitionPage.dart b/lib/page/anim/FadeTransitionPage.dart new file mode 100644 index 0000000..0bc38d6 --- /dev/null +++ b/lib/page/anim/FadeTransitionPage.dart @@ -0,0 +1,56 @@ +/// +/// Created by NieBin on 2019/6/8 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +import "package:flutter/material.dart"; +import 'package:flutter_widgets/const/_const.dart'; + +class FadeTransitionPage extends StatefulWidget { + @override + _FadeTransitionState createState() => _FadeTransitionState(); +} + +class _FadeTransitionState extends State + with SingleTickerProviderStateMixin { + Animation _animation; + AnimationController _controller; + + Widget _fadeTrans() => FadeTransition( + opacity: _animation, + child: Text( + "Hello world", + style: TextStyle(color: RED_LIGHT), + ), + ); + + @override + void initState() { + _controller = + AnimationController(duration: Duration(seconds: 3), vsync: this); + CurvedAnimation curvedAnimation = + CurvedAnimation(parent: _controller, curve: Curves.easeOut); + _animation = Tween(begin: 0.0, end: 1.0).animate(curvedAnimation); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text(PageName.ANIM_FADE_TRANS), + ), + body: Column( + children: [ + _fadeTrans(), + FloatingActionButton( + child: Text("Click Me"), + onPressed: () { + _controller.reset(); + _controller.forward(); + }, + ) + ], + ), + ); + } +} diff --git a/lib/page/anim/_anim.dart b/lib/page/anim/_anim.dart index 324da85..db006ce 100644 --- a/lib/page/anim/_anim.dart +++ b/lib/page/anim/_anim.dart @@ -6,3 +6,4 @@ export "AnimationPage.dart"; export 'AnimatedContainerPage.dart'; export 'AnimCrossFadePage.dart'; export 'HeroPage.dart'; +export 'FadeTransitionPage.dart'; From 3cc5afa018741caf4cc51fbbeea99b800c7dd365 Mon Sep 17 00:00:00 2001 From: nb312 Date: Sun, 9 Jun 2019 16:03:47 +0800 Subject: [PATCH 2/2] add the positionedTransition. --- lib/const/page_item_const.dart | 5 ++ lib/const/page_name_const.dart | 1 + lib/main.dart | 1 + lib/page/anim/FadeTransitionPage.dart | 7 +-- lib/page/anim/PositionTransitionPage.dart | 76 +++++++++++++++++++++++ lib/page/anim/_anim.dart | 1 + 6 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 lib/page/anim/PositionTransitionPage.dart diff --git a/lib/const/page_item_const.dart b/lib/const/page_item_const.dart index 8060502..f430376 100644 --- a/lib/const/page_item_const.dart +++ b/lib/const/page_item_const.dart @@ -207,4 +207,9 @@ const PAGE_ITEMS = [ "img": PageImage.FLUTTER_OPEN, "click": PageName.ANIM_FADE_TRANS, }, + { + "title": PageName.ANIM_POSITION_TRANS, + "img": PageImage.FLUTTER_OPEN, + "click": PageName.ANIM_POSITION_TRANS, + }, ]; diff --git a/lib/const/page_name_const.dart b/lib/const/page_name_const.dart index e73e23a..8296b63 100644 --- a/lib/const/page_name_const.dart +++ b/lib/const/page_name_const.dart @@ -46,4 +46,5 @@ class PageName { static const ANIM_CROSS_FADE = "AnimationCrossFade"; static const ANIM_HERO = "HeroPage"; static const ANIM_FADE_TRANS = "FadeTranstion"; + static const ANIM_POSITION_TRANS = "PositionTransition"; } diff --git a/lib/main.dart b/lib/main.dart index ff85028..c6782bb 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -60,6 +60,7 @@ class FlutterOpenApp extends StatelessWidget { PageName.ANIM_CROSS_FADE: (context) => AnimCrossFadePage(), PageName.ANIM_HERO: (context) => HeroPage(), PageName.ANIM_FADE_TRANS: (context) => FadeTransitionPage(), + PageName.ANIM_POSITION_TRANS: (context) => PositionTransitionPage(), }, ); } diff --git a/lib/page/anim/FadeTransitionPage.dart b/lib/page/anim/FadeTransitionPage.dart index 0bc38d6..0b17d9f 100644 --- a/lib/page/anim/FadeTransitionPage.dart +++ b/lib/page/anim/FadeTransitionPage.dart @@ -12,24 +12,23 @@ class FadeTransitionPage extends StatefulWidget { class _FadeTransitionState extends State with SingleTickerProviderStateMixin { - Animation _animation; + Animation _opacityAnim; AnimationController _controller; Widget _fadeTrans() => FadeTransition( - opacity: _animation, + opacity: _opacityAnim, child: Text( "Hello world", style: TextStyle(color: RED_LIGHT), ), ); - @override void initState() { _controller = AnimationController(duration: Duration(seconds: 3), vsync: this); CurvedAnimation curvedAnimation = CurvedAnimation(parent: _controller, curve: Curves.easeOut); - _animation = Tween(begin: 0.0, end: 1.0).animate(curvedAnimation); + _opacityAnim = Tween(begin: 0.0, end: 1.0).animate(curvedAnimation); super.initState(); } diff --git a/lib/page/anim/PositionTransitionPage.dart b/lib/page/anim/PositionTransitionPage.dart new file mode 100644 index 0000000..40311d8 --- /dev/null +++ b/lib/page/anim/PositionTransitionPage.dart @@ -0,0 +1,76 @@ +/// +/// Created by NieBin on 2019/6/9 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import 'package:flutter_widgets/const/_const.dart'; + +class PositionTransitionPage extends StatefulWidget { + @override + _PositionTransState createState() => _PositionTransState(); +} + +class _PositionTransState extends State + with SingleTickerProviderStateMixin { + Animation _rectAnim; + AnimationController _controller; + + Widget _positionTrans() => PositionedTransition( + rect: _rectAnim, + child: Container( + color: BLUE_DEEP, + child: Text("Hello world"), + ), + ); + + Widget _positionClick() => FloatingActionButton( + child: Text("position click"), + onPressed: () { + _controller.reset(); + _controller.forward(); + }, + ); + + @override + void initState() { + _controller = + AnimationController(vsync: this, duration: Duration(seconds: 3)); + CurvedAnimation _curve = + CurvedAnimation(parent: _controller, curve: Curves.easeOut); + _rectAnim = RelativeRectTween( + begin: RelativeRect.fromLTRB(00.0, 0.0, 0.0, 0.0), + end: RelativeRect.fromLTRB(100.0, 100.0, 0, 00), + ).animate(_curve) + ..addListener(() { + print("value = $_rectAnim"); + }); + + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text(PageName.ANIM_POSITION_TRANS), + ), + body: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + constraints: BoxConstraints.expand(width: 200, height: 200), + color: RED_LIGHT, + child: Stack( + children: [ + _positionTrans(), + ], + ), + ), + _positionClick() + ], + ), + ); + } +} diff --git a/lib/page/anim/_anim.dart b/lib/page/anim/_anim.dart index db006ce..a3682ad 100644 --- a/lib/page/anim/_anim.dart +++ b/lib/page/anim/_anim.dart @@ -7,3 +7,4 @@ export 'AnimatedContainerPage.dart'; export 'AnimCrossFadePage.dart'; export 'HeroPage.dart'; export 'FadeTransitionPage.dart'; +export 'PositionTransitionPage.dart';