✨ AnimatedBuilder、CupertinoPopupSurface、TweenAnimationBuilder、RenderObjectToWidgetAdapter

lib/views/widgets/StatefulWidget/AnimatedBuilder/node1_base.dart

@@ -0,0 +1,68 @@
+
+import 'package:flutter/material.dart';
+
+
+/// create by 张风捷特烈 on 2020/9/21
+/// contact me by email 1981462002@qq.com
+/// 说明: 228 AnimatedBuilder 动画构造器
+/// 通过 builder 使动画对应的节点变为局部更新，并且可避免子组件刷新，减少构建的时间，提高动画性能。
+///
+//    {
+//      "widgetId": 228,
+//      "name": 'AnimatedBuilder 使用案例',
+//      "priority": 1,
+//      "subtitle":
+//          "【animation】 : *可监听对象   【Listenable】\n"
+//          "【builder】 : *组件构造器   【TransitionBuilder】\n"
+//          "【child】 : 子组件   【Widget】",
+//    }
+
+class AnimatedBuilderDemo extends StatefulWidget {
+  @override
+  _AnimatedBuilderDemoState createState() => _AnimatedBuilderDemoState();
+}
+
+class _AnimatedBuilderDemoState extends State<AnimatedBuilderDemo>
+    with SingleTickerProviderStateMixin {
+  AnimationController controller;
+
+  @override
+  void initState() {
+    super.initState();
+    controller = AnimationController(
+        vsync: this,
+        lowerBound: 0.3,
+        upperBound: 1.0,
+        duration: const Duration(milliseconds: 500))
+      ..forward();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        controller.forward(from: 0);
+      },
+      child: AnimatedBuilder(
+          animation: controller,
+          builder: (ctx, child) {
+            return Transform.scale(
+              scale: controller.value,
+              child: Opacity(opacity: controller.value, child: child),
+            );
+          },
+          child: buildChild()),
+    );
+  }
+
+  Widget buildChild() => Container(
+        height: 100,
+        width: 100,
+        decoration: BoxDecoration(color: Colors.orange, shape: BoxShape.circle),
+        alignment: Alignment.center,
+        child: Text(
+          'Toly',
+          style: TextStyle(fontSize: 40, color: Colors.white),
+        ),
+      );
+}

lib/views/widgets/StatefulWidget/TweenAnimationBuilder/node1_base.dart

@@ -0,0 +1,61 @@
+
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/9/21
+/// contact me by email 1981462002@qq.com
+/// 说明: 226 TweenAnimationBuilder 渐变动画构造器
+/// 通过渐变器 Tween 对相关属性进行渐变动画，通过 builder 进行局部构建，减少刷新范围。不需要自定义动画器，可指定动画时长、曲线、结束回调。
+///
+//    {
+//      "widgetId": 226,
+//      "name": 'TweenAnimationBuilder 使用案例',
+//      "priority": 1,
+//      "subtitle":
+//          "【tween】 : *渐变器   【Tween<T>】\n"
+//          "【duration】 : *时长   【Duration】\n"
+//          "【builder】 : *构造器   【ValueWidgetBuilder<T>】\n"
+//          "【curve】 : 动画曲线   【Curve】\n"
+//          "【onEnd】 : 结束回调   【VoidCallback】\n"
+//          "【child】 : 子组件   【Widget】",
+//    }
+
+class TweenAnimationBuilderDemo extends StatefulWidget {
+  @override
+  _TweenAnimationBuilderDemoState createState() =>
+      _TweenAnimationBuilderDemoState();
+}
+
+class _TweenAnimationBuilderDemoState extends State<TweenAnimationBuilderDemo> {
+  Color _value = Colors.red;
+
+  @override
+  Widget build(BuildContext context) {
+    return TweenAnimationBuilder(
+      tween: ColorTween(begin: Colors.blue, end: _value),
+      duration: Duration(milliseconds: 800),
+      builder: (BuildContext context, Color color, Widget child) {
+        return GestureDetector(
+          onTap: () {
+            setState(() {
+              _value = _value == Colors.red ? Colors.blue : Colors.red;
+            });
+          },
+          child: Container(
+            width: 40,
+            height: 40,
+
+            child: child,
+            decoration: BoxDecoration(
+              color: color,
+              borderRadius: BorderRadius.circular(5)
+            ),
+          ),
+        );
+      },
+      child: Icon(
+        Icons.android_outlined,
+        color: Colors.white,
+      ),
+    );
+  }
+}