Dev

lib/const/page_item_const.dart

@@ -202,4 +202,14 @@ 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,
+  },
+  {
+    "title": PageName.ANIM_POSITION_TRANS,
+    "img": PageImage.FLUTTER_OPEN,
+    "click": PageName.ANIM_POSITION_TRANS,
+  },
 ];

lib/const/page_name_const.dart

@@ -45,4 +45,6 @@ class PageName {
   static const ANIM_CONTAINER = "AnimationContainer";
   static const ANIM_CROSS_FADE = "AnimationCrossFade";
   static const ANIM_HERO = "HeroPage";
+  static const ANIM_FADE_TRANS = "FadeTranstion";
+  static const ANIM_POSITION_TRANS = "PositionTransition";
 }

lib/main.dart

@@ -59,6 +59,8 @@ 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(),
+        PageName.ANIM_POSITION_TRANS: (context) => PositionTransitionPage(),
       },
     );
   }

lib/page/anim/FadeTransitionPage.dart

@@ -0,0 +1,55 @@
+///
+/// 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<FadeTransitionPage>
+    with SingleTickerProviderStateMixin {
+  Animation<double> _opacityAnim;
+  AnimationController _controller;
+
+  Widget _fadeTrans() => FadeTransition(
+        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);
+    _opacityAnim = 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: <Widget>[
+          _fadeTrans(),
+          FloatingActionButton(
+            child: Text("Click Me"),
+            onPressed: () {
+              _controller.reset();
+              _controller.forward();
+            },
+          )
+        ],
+      ),
+    );
+  }
+}

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<PositionTransitionPage>
+    with SingleTickerProviderStateMixin {
+  Animation<RelativeRect> _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: <Widget>[
+          Container(
+            constraints: BoxConstraints.expand(width: 200, height: 200),
+            color: RED_LIGHT,
+            child: Stack(
+              children: <Widget>[
+                _positionTrans(),
+              ],
+            ),
+          ),
+          _positionClick()
+        ],
+      ),
+    );
+  }
+}

lib/page/anim/_anim.dart

@@ -6,3 +6,5 @@ export "AnimationPage.dart";
 export 'AnimatedContainerPage.dart';
 export 'AnimCrossFadePage.dart';
 export 'HeroPage.dart';
+export 'FadeTransitionPage.dart';
+export 'PositionTransitionPage.dart';