Flutter 上下反复移动动画

2025-11-25  本文已影响0人  河马过河
class _NoteSourceDialogState extends BaseState<NoteSourceDialog> with TickerProviderStateMixin {
  final logic = Get.put(NoteSourceLogic());
  late double navigationBarHeight;
  late AnimationController _controller;
  late Animation<double> _topPosition;

  @override
  void initState() {
    super.initState();
    // 创建 AnimationController
    _controller = AnimationController(
      duration: const Duration(milliseconds: 1000),
      vsync: this,
    )..addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    }); // 反复运动

    // 设置上下位移 Tween
    _topPosition = Tween<double>(begin: -50.w, end: 50.w).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    )..addListener((){
      print('_topPosition : ${_topPosition.value}'); // 调试日志
    });
    // 监听 logic.isShowTip 变化
    ever(logic.isShowTip, (value) {
      if (value) {
        _controller.forward();
      } else {
        _controller.stop();
      }
    });
  }
      Obx(() {
                          return Visibility(
                              visible: logic.isShowTip.value,
                              child: AnimatedBuilder(
                                animation: _topPosition,
                                builder: (context, child) {
                                  return Stack(
                                    children: [
                                      PositionedDirectional(
                                          bottom: 136.w+_topPosition.value,
                                          end: 48.w,
                                          child: Container(
                                              width: 810.w,
                                              padding:
                                              EdgeInsetsDirectional.symmetric(
                                                  horizontal: 48.w,
                                                  vertical: 60.w),
                                              decoration: BoxDecoration(
                                                color: MyColor.colorFF272C35,
                                                borderRadius:
                                                BorderRadius.circular(24.w),
                                              ),
                                              child: Text(
                                                S.current.zp405,
                                                textAlign: TextAlign.center,
                                                style: TextStyle(
                                                  color: Colors.white, // 假设文字需要白色
                                                  fontSize: 42.sp, // 根据实际需求调整
                                                  fontWeight: FontWeight.w400,
                                                ),
                                              ) // 保持你的 Row 内容不变
                                          )),
                                      PositionedDirectional(
                                          bottom: 90.w+_topPosition.value,
                                          end: 154.w,
                                          child: LoadImage(
                                            "ic_home_guide_triangle",
                                            width: 64.w,
                                            height: 64.w,
                                            fit: BoxFit.contain,
                                          ))
                                    ],
                                  );
                                }
                              ));
                        })
上一篇 下一篇

猜你喜欢

热点阅读