测试动画

star_lock/lib/main/lockDetail/lockDetail/lockDetail_page.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
@@ -15,6 +17,15 @@ import '../../../translations/trans_lib.dart';
 import '../../lockMian/entity/lockInfoEntity.dart';
 import 'lockDetail_logic.dart';
 
+enum RKConnectState {
+  NULL,
+  STOPPED, //已暂停连接
+  CONNECTING, //连接中
+  CONNECTED, //已连接
+  STOPPING, //暂停连接中
+  CHECKING, //检测可用性
+}
+
 class LockDetailPage extends StatefulWidget {
   final isFrist;
   final KeyInfos keyInfo;
@@ -381,6 +392,99 @@ class _LockDetailPageState extends State<LockDetailPage> with RouteAware {
     );
   }
 
+/*
+  //控制连接动画
+  _buildAnimation() {
+    String imgName;
+    if (state == RKConnectState.STOPPED || state == RKConnectState.STOPPING) {
+      imgName = 'images/mainUnunited.png';
+    } else if (state == RKConnectState.CONNECTED) {
+      imgName = 'images/mianHou_white.png';
+    } else {
+      imgName = 'images/mainHuo_blue.png';
+    }
+    return CustomPaint(
+        foregroundPainter: MyPainter(
+            lineColor: (state == RKConnectState.CONNECTED ||
+                    state == RKConnectState.CHECKING)
+                ? AppColors.main_circleTopColor
+                : AppColors.main_circleBgColor,
+            completeColor: (state == RKConnectState.CONNECTING ||
+                    state == RKConnectState.CONNECTED ||
+                    state == RKConnectState.CHECKING)
+                ? AppColors.main_circleTopColor
+                : AppColors.main_circleBgColor,
+            startPercent: percentage,
+            isComplete: state == RKConnectState.STOPPED ? false : isClick,
+            width: 4.0),
+        child: Padding(
+          padding: state == RKConnectState.CONNECTED
+              ? const EdgeInsets.all(10.0)
+              : const EdgeInsets.all(10.0),
+          child: GestureDetector(
+            child: Stack(
+              children: <Widget>[
+                Center(
+                  child: Container(
+                      width: 120,
+                      height: 120,
+                      decoration: BoxDecoration(
+                        shape: BoxShape.circle,
+                        color: (state == RKConnectState.CONNECTED)
+                            ? AppColors.main_circleTopColor
+                            : Colors.white,
+                      )),
+                ),
+                Positioned(
+                    top: 30,
+                    left: (ScreenUtil().screenWidth - 60) / 2 - 10,
+                    child: Image.asset(
+                      imgName,
+                      width: 60,
+                      height: 60,
+                    )),
+                (state == RKConnectState.CONNECTING ||
+                        state == RKConnectState.CHECKING)
+                    ? buildRotationTransition()
+                    : Positioned(
+                        top: 72,
+                        left: (ScreenUtil().screenWidth - 22) / 2 - 34,
+                        child: Visibility(
+                            visible: (state == RKConnectState.CONNECTED ||
+                                    state == RKConnectState.CONNECTING)
+                                ? true
+                                : false,
+                            child: Image.asset(
+                              'images/huo_x.png',
+                              width: 22,
+                              height: 22,
+                            ))),
+              ],
+            ),
+            onTap: () {
+              // if (!NetWorkUitls.getInstance().netWorkAvailable()) {
+              //   Fluttertoast.showToast(
+              //       msg: Translations.of(context)
+              //           .text('common_networkUnavailable'));
+              //   return;
+              // }
+              //state == RKConnectState.CONNECTING ||
+              if (state == RKConnectState.CHECKING) return;
+              if (state == RKConnectState.CONNECTING) {
+                //连接中-可断开
+                stopConnect();
+              }
+              if (isConnect) {
+                stopConnect();
+              } else {
+                openConnect();
+              }
+            },
+          ),
+        ));
+  }
+  */
+
   @override
   void didChangeDependencies() {
     // TODO: implement didChangeDependencies
@@ -414,3 +518,51 @@ class _LockDetailPageState extends State<LockDetailPage> with RouteAware {
   @override
   void didPushNext() {}
 }
+
+class MyPainter extends CustomPainter {
+  Color lineColor;
+  Color completeColor;
+  double startPercent; //圆弧转动时 开始的位置
+  bool isComplete = false;
+  double width;
+
+  MyPainter(
+      {required this.lineColor,
+      required this.completeColor,
+      required this.startPercent,
+      required this.width,
+      this.isComplete = false});
+  @override
+  void paint(Canvas canvas, Size size) {
+    Paint line = Paint()
+      ..color = lineColor
+      ..strokeCap = StrokeCap.round
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = width;
+
+    Paint complete = Paint()
+      ..color = completeColor
+      ..strokeCap = StrokeCap.round
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = width;
+
+    Offset center = Offset(size.width / 2, size.height / 2); //  坐标中心
+    double radius = min(size.width / 2, size.height / 2); //  半径
+    canvas.drawCircle(
+        //  画圆方法
+        center,
+        radius,
+        line);
+
+    double arcAngle = isComplete == true ? startPercent : 2 * pi / 10;
+
+    //画转动的圆弧
+    canvas.drawArc(Rect.fromCircle(center: center, radius: radius),
+        isComplete == true ? 2 * pi : startPercent, arcAngle, false, complete);
+  }
+
+  @override
+  bool shouldRepaint(MyPainter oldDelegate) {
+    return startPercent != oldDelegate.startPercent;
+  }
+}