flutter 实现旋转星球

最新推荐文章于 2024-06-23 09:39:50 发布
最新推荐文章于 2024-06-23 09:39:50 发布
阅读量429 收藏 2
点赞数 4
文章标签： flutter 前端 星球
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43575775/article/details/139115234
版权

先看效果

planet_widget.dart

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' show Vector3;
import 'package:flutter/gestures.dart';
import 'package:flutter/physics.dart';

class PlanetWidget extends StatefulWidget {
  const PlanetWidget({Key? key, required this.children, this.minRadius = 50})
      : super(key: key);

  @override
  _PlanetWidgetState createState() => _PlanetWidgetState();

  final List<Widget> children;
  final double minRadius;
}

class _PlanetWidgetState extends State<PlanetWidget>
    with TickerProviderStateMixin {
  late AnimationController animationController;

  /// 启动加载或者重新加载的时候用的Controller
  late AnimationController reloadAnimationController;

  double preAngle = 0.0;
  double _radius = -1.0;

  List<PlanetTagInfo>? childTagList = [];

  /// 当前操作的向量信息
  Vector3 currentOperateVector = Vector3(1.0, 0.0, 0.0);

  @override
  void initState() {
    super.initState();
    animationController =
        AnimationController(lowerBound: 0, upperBound: pi * 2, vsync: this);
    reloadAnimationController = AnimationController(
        lowerBound: 0,
        upperBound: 1,
        duration: Duration(milliseconds: 300),
        vsync: this);

    animationController.addListener(() {
      setState(() {
        calTagInfo(animationController.value - preAngle);
      });
    });
    reloadAnimationController.addListener(() {
      setState(() {});
    });

    // initData();
  }

  void initData() {
    childTagList = widget.children
        .map((e) => PlanetTagInfo(child: e, planetTagPos: Vector3.zero()))
        .toList();

    currentOperateVector = updateOperateVector(Offset(-1.0, 1.0));

    initTagInfo();

    WidgetsBinding.instance!.addPostFrameCallback((_) {
      reloadAnimationController.forward().then((value) => _reStartAnimation());
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (widget.children.isNotEmpty) {
      initData();
    }
  }

  @override
  void didUpdateWidget(covariant PlanetWidget oldWidget) {
    if (oldWidget.children != this.widget.children) {
      if (widget.children.isNotEmpty) {
        animationController.reset();
        reloadAnimationController.reset();
        initData();
      }
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        var radius = min(constraints.maxWidth, constraints.maxHeight) / 2.0;

        /// 太小就不显示了
        if (radius < widget.minRadius) {
          return SizedBox.shrink();
        }

        if (_radius != radius) {
          if (_radius == -1.0) {
            _radius = radius;
            initTagInfo();
          } else {
            _radius = radius;
            resizeTagInfo();
          }
        }

        final Map<Type, GestureRecognizerFactory> gestures =
            <Type, GestureRecognizerFactory>{};
        gestures[PanGestureRecognizer] =
            GestureRecognizerFactoryWithHandlers<PanGestureRecognizer>(
          () => PanGestureRecognizer(debugOwner: this),
          (PanGestureRecognizer instance) {
            instance
              ..onDown = (detail) {
                if (animationController.isAnimating) {
                  _stopAnimation();
                }
              }
              ..onStart = (detail) {
                if (animationController.isAnimating) {
                  _stopAnimation();
                }
              }
              ..onUpdate = (detail) {
                if (detail.delta.dx == 0 && detail.delta.dy == 0) {
                  return;
                }
                double distance = sqrt(detail.delta.dx * detail.delta.dx +
                    detail.delta.dy * detail.delta.dy);
                setState(() {
                  currentOperateVector = updateOperateVector(detail.delta);
                  calTagInfo(distance / _radius);
                });
              }
              ..onEnd = (detail) {
                startFlingAnimation(detail);
              }
              ..onCancel = () {
                _reStartAnimation();
              }
              ..dragStartBehavior = DragStartBehavior.start
              ..gestureSettings =

                  /// 为了能竞争过 HorizontalDragGestureRecognizer ，不得不使用一些下作手段；
                  /// 比如说卷起来，判断阈值比 HorizontalDragGestureRecognizer 的阈值小；
                  /// PS ：默认的PanGestureRecognizer 的判断阈值是 touchSlop * 2；
                  const DeviceGestureSettings(touchSlop: kTouchSlop / 4);
          },
        );

        gestures[TapGestureRecognizer] =
            GestureRecognizerFactoryWithHandlers<TapGestureRecognizer>(
          () => TapGestureRecognizer(debugOwner: this),
          (TapGestureRecognizer instance) {
            instance
              ..onTapDown = (detail) {
                _stopAnimation();
              }
              ..onTapUp = (detail) {
                _reStartAnimation();
              };
          },
        );

        return RawGestureDetector(
          gestures: gestures,
          behavior: HitTestBehavior.translucent,
          excludeFromSemantics: false,
          child: Container(
            width: _radius * 2,
            height: _radius * 2,
            child: LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
                /// 要根据Z轴高度更新Stack中的叠放顺序；
                /// 要不然点击重叠部分的时候，可能点击事件并非最上面的处理；
                /// PS ：实在不行搞个获取Z轴的Stack，修改hitTest让它遍历顺序根据Z轴来制定？
                childTagList?.sort((item1, item2) =>
                    item1.planetTagPos.z.compareTo(item2.planetTagPos.z));

                var itemOpacity =
                    ((_radius - widget.minRadius) / widget.minRadius);

                if (itemOpacity <= 0.1) {
                  return SizedBox.shrink();
                }

                return Opacity(
                  opacity: _radius >= widget.minRadius * 2 ? 1.0 : itemOpacity,
                  child: Stack(
                    alignment: Alignment.center,
                    children: childTagList
                            ?.map((e) => Transform(
                                  transform: calTransformByTagInfo(
                                      e, animationController.value),

                                  /// 聊胜于无的优化，如果基本看不到了，那没必要显示
                                  child: e.opacity >= 0.15
                                      ? Opacity(
                                          opacity: e.opacity,
                                          child: RepaintBoundary(
                                            child: e.child,
                                          ),
                                        )
                                      : SizedBox.shrink(),
                                ))
                            .toList() ??
                        [],
                  ),
                );
              },
            ),
          ),
        );
      },
    );
  }

  void _stopAnimation() {
    animationController.stop();
  }

  void _reStartAnimation() {
    animationController.value = preAngle;
    animationController.repeat(
        min: 0, max: pi * 2, period: Duration(seconds: 20));
  }

  void startFlingAnimation(DragEndDetails detail) {
    /// 计算手势要滑动多少距离
    var velocityPerDis = sqrt(pow(detail.velocity.pixelsPerSecond.dx, 2) +
        pow(detail.velocity.pixelsPerSecond.dy, 2));

    if (velocityPerDis < 5) {
      _reStartAnimation();
      return;
    }

    /// 距离处以周长就是变化的角度,最大一周
    var angle = min(
        2 * pi,
        animationController.value +
            velocityPerDis / (2 * pi * _radius) * (2 * pi));

    animationController
        .animateWith(SpringSimulation(
            SpringDescription.withDampingRatio(
              mass: 1.0,
              stiffness: 500.0,
            ),
            animationController.value,
            angle,
            1)
          ..tolerance = Tolerance(
            velocity: double.infinity,
            distance: 0.01,
          ))
        .then((value) => _reStartAnimation());
  }

  @override
  void dispose() {
    animationController.dispose();
    reloadAnimationController.dispose();
    super.dispose();
  }

  /// 设置Tag们的初始位置
  void initTagInfo() {
    final itemCount = childTagList?.length ?? 0;

    for (var index = 1; index < itemCount + 1; index++) {
      final phi = (acos(-1.0 + (2.0 * index - 1.0) / itemCount));
      final theta = sqrt(itemCount * pi) * phi;

      final x = _radius * cos(theta) * sin(phi);
      final y = _radius * sin(theta) * sin(phi);
      final z = _radius * cos(phi);

      var childItem = childTagList?[index - 1];
      childItem?.planetTagPos = Vector3(x, y, z);
      childItem?.currentAngle = phi;
      childItem?.radius = _radius;
    }
  }

  /// 重新根据当前的半径，修改大小
  void resizeTagInfo() {
    final itemCount = childTagList?.length ?? 0;

    for (var index = 0; index < itemCount; index++) {
      var childItem = childTagList![index];
      var pos = childItem.planetTagPos;
      pos.x = (_radius / childItem.radius) * pos.x;
      pos.y = (_radius / childItem.radius) * pos.y;
      pos.z = (_radius / childItem.radius) * pos.z;

      childItem.radius = _radius;
    }
  }

  /// 根据变化的角度计算最新位置
  void calTagInfo(double dAngle) {
    var currentAngle = preAngle + dAngle;

    final itemCount = childTagList?.length ?? 0;

    for (var index = 1; index < itemCount + 1; index++) {
      var childItem = childTagList![index - 1];

      var point = childItem.planetTagPos;

      double x = cos(dAngle) * point.x +
          (1 - cos(dAngle)) *
              (currentOperateVector.x * point.x +
                  currentOperateVector.y * point.y) *
              currentOperateVector.x +
          sin(dAngle) * (currentOperateVector.y * point.z);

      double y = cos(dAngle) * point.y +
          (1 - cos(dAngle)) *
              (currentOperateVector.x * point.x +
                  currentOperateVector.y * point.y) *
              currentOperateVector.y -
          sin(dAngle) * (currentOperateVector.x * point.z);

      double z = cos(dAngle) * point.z +
          sin(dAngle) *
              (currentOperateVector.x * point.y -
                  currentOperateVector.y * point.x);
      if (x.isNaN || y.isNaN || z.isNaN) {
        continue;
      }

      childItem.planetTagPos = Vector3(x, y, z);
      childItem.currentAngle = currentAngle;
    }

    if (animationController.isAnimating) {
      preAngle = currentAngle;
    }
  }

  Vector3 updateOperateVector(Offset operateOffset) {
    double x = -operateOffset.dy;
    double y = operateOffset.dx;
    double module = sqrt(x * x + y * y);
    return Vector3(x / module, y / module, 0.0);
  }

  Matrix4 calTransformByTagInfo(PlanetTagInfo tagInfo, double currentAngle) {
    var result = Matrix4.identity();
    result.translate(
        tagInfo.planetTagPos.x * reloadAnimationController.value,
        tagInfo.planetTagPos.y * reloadAnimationController.value,
        tagInfo.planetTagPos.z * reloadAnimationController.value);
    result.scale(tagInfo.scale);
    return result;
  }
}

class PlanetTagInfo {
  Vector3 planetTagPos = Vector3(0, 0, 0);
  Widget child;
  double currentAngle = 0;
  double radius = 0;

  PlanetTagInfo({required this.planetTagPos, required this.child});

  double get opacity {
    var result = 0.9 * ((radius + planetTagPos.z) / (radius * 2)) + 0.1;
    return result.isNaN || result.isNegative ? 0.0 : result;
  }

  double get scale {
    var result = ((radius + planetTagPos.z) / (radius * 2)) * 6 / 8 + 2 / 8;
    return result.isNaN || result.isNegative ? 0.0 : result;
  }
}

使用

children内为任意Widget 就是星球中个一个点

PlanetWidget(
            children: [
              Container(
                width: 80,
                height: 80,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: Assets.images.head3.image(),
                ),
              ),
              Container(
                width: 80,
                height: 80,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: Assets.images.head2.image(),
                ),
              ),
              Container(
                width: 80,
                height: 80,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: Assets.images.head1.image(),
                ),
              ),
              Container(
                width: 80,
                height: 80,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: Assets.images.head3.image(),
                ),
              ),
              Container(
                width: 80,
                height: 80,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: Assets.images.head2.image(),
                ),
              ),
              Container(
                width: 80,
                height: 80,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: Assets.images.head1.image(),
                ),
              ),
              Container(
                width: 80,
                height: 80,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: Assets.images.head3.image(),
                ),
              ),
              Container(
                width: 80,
                height: 80,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: Assets.images.head2.image(),
                ),
              ),
              Container(
                width: 80,
                height: 80,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: Assets.images.head1.image(),
                ),
              ),
              Container(
                width: 80,
                height: 80,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: Assets.images.head3.image(),
                ),
              ),
              Container(
                width: 80,
                height: 80,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: Assets.images.head2.image(),
                ),
              ),
              Container(
                width: 80,
                height: 80,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: Assets.images.head1.image(),
                ),
              ),
            ],
          ),

肥肥呀呀呀
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Flutter-评价类星星，可滑动可点击
sujingnuli
09-09 893
评价类星星图片，可以滑动点亮，也可以点击点亮，
Flutter Tween实现抖动效果
03-29
抖动效果实现起来并不难，主要是使用动画时定义一个摇摆的曲线。可应用于错误反馈等。
flutter RotationTransition实现旋转动画
08-25
主要为大家详细介绍了flutter RotationTransition实现旋转动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
planet：Flutter在行星探索中的应用。 它提供了我们太阳系中每个行星的详细信息
02-26
行星 星球探索演示应用程序 入门 要获得Flutter入门方面的帮助，请查看我们的在线。
开源探索： Flutter旋转轮盘——flutter_spinning_wheel
最新发布
gitblog_00074的博客
06-23 422
开源探索： Flutter旋转轮盘——flutter_spinning_wheel 项目地址:https://gitcode.com/davidanaya/flutter-spinning-wheel 在无数的移动应用和游戏设计中，旋转轮盘以其独特的互动性和趣味性占有一席之地。今天，我们要推荐的是一个专为Flutter框架量身打造的开源项目——flutter_spinning_wheel。这是一款...
flutter星球实现
zqwily的博客
08-17 425
添加链接描述
Flutter2.0 绘制旋转太空人+蛛网效果
懒洋君的博客
03-30 2739
前言 最近华为手表的太空人表盘突然间火了，表盘上那个旋转的太空人呆萌可爱。奈何没有一款华为手表，作为一名合格的程序猿，当然要撸起袖子自己来画一个啦~ 鉴于最近Flutter推出了2.0稳定版本，除了对移动端Android、iOS的支持外，Web端和桌面端的支持也整合到了Flutter2.0版本中，新特性支持空指针安全。本次通过Flutter2.0来编写封面图展示的效果。 编写思路 1、旋转太空人 在构思太空人如何绘制时，此文Flutter绘制-09-华为太空人-残次版给我提供了绘制的思路，感谢作者的分享，站
探索宇宙之美：Flutter UI Challenge - Planets App
gitblog_00037的博客
05-21 315
探索宇宙之美：Flutter UI Challenge - Planets App 项目地址:https://gitcode.com/rvamsikrishna/flutter_ui_challenge_planets_app 项目介绍 在浩瀚无垠的星空中，我们总是对未知的宇宙充满好奇。Flutter UI Challenge - Planets App 是一个由社区开发者创建的开源项目，它再现了...
Flutter 控制屏幕旋转的实现
01-21
1, 随着屏幕旋转，布局自动调整。做横竖屏适配 2，强制屏幕横屏，不随着屏幕去调整 第一种方式这里就不做说明了。代码做适配就可以。 下面说一下第二种实现方式 Flutter 自带方式 flutter 为我们提供了方法来控制...
Flutter旋转屏幕,Flutter旋转屏幕
09-27
在Flutter框架中，屏幕旋转是移动应用开发中的一个重要特性，允许用户根据个人偏好或设备方向改变应用程序的布局。本文将深入探讨如何在Flutter中处理屏幕旋转，并提供相关的实践技巧。 一、屏幕方向感知 Flutter...
Flutter实现左侧边栏导航
04-14
Flutter实现左侧边栏导航,点击左侧菜单右侧自动切换,左侧菜单可以实现自动居中,右侧滚动到底部继续滑可自动切换到下一页,上滑切换到上一页,左侧菜单跟随切换,查看效果图: ...
一个FlutterUI挑战建立一个行星应用程序
08-10
一个Flutter UI挑战....建立一个行星应用程序
seeds_light_wallet
03-19
seed_light_wallet joinseeds.com的开源钱包和资源管理器 一个支付平台和金融生态系统，以赋予人类权力并治愈我们的星球 入门 git clone https://github.com/7flash/flutter_seeds_wallet.git cd flutter_seeds_wallet flutter pub get flutter run 开发人员配置 使用项目git hooks git config core.hooksPath .githooks/
Flutter 实现酷炫的3D效果示例代码
01-03
此文讲解3个酷炫的3D动画效果。 下面是要实现的效果： Flutter 中3D效果是通过 Transform 组件实现的，没有变换效果的实现： class TransformDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('3D 变换Demo'), ), body: Container( alignment: Alignment.center, color: Colors.wh
flutter页面滚动联动实现
03-25
`NestedScrollView`和`CustomScrollView`是Flutter提供给开发者用于实现这一功能的关键组件。本篇文章将详细解析如何使用这两个组件来创建具有滚动联动效果的页面，并结合`EasyRefresh`库实现自定义下拉刷新操作。 ...
Flutter 实现进度条效果
08-19
Flutter 实现进度条效果 Flutter 是一个跨平台的移动应用程序开发框架，它提供了许多功能强大且灵活的组件和控件，可以快速构建高质量的应用程序。今天，我们将探讨如何使用 Flutter 实现进度条效果。 在上传页面...
Flutter：尝试撸一个具有惯性跟阻力的旋转控件或用传感器控制其旋转
weixin_34258078的博客
01-13 537
来源 一直都想写一个可以转动的Widget，并且可以近似的模拟生活中的惯性跟阻力，因为设计到一些数学公式，作者还去请教了我的高中老师，最后学了点传感器，就直接外加个可选择传感器控制了 效果 实现方法 逻辑部分比较复杂，作者写了好几天，最后干脆直接写了一个Dart Packages上传到了Pub,里面有大量的注释，代码还很不简化体谅一下，欢迎体验 将其添加到包的pubspec.yaml文件中： d...
Flutter Planets 教程：构建绚丽的行星应用
gitblog_00024的博客
05-17 244
Flutter Planets 教程：构建绚丽的行星应用 项目地址:https://gitcode.com/sergiandreplace/flutter_planets_tutorial 项目介绍 flutter-planets-tutorial 是一个基于 Dart 和 Flutter 框架的开源项目，旨在循序渐进地教你如何将设计稿转化为实际的移动端应用。这个教程由一系列分支组成，每个分支对应...
flutter drawimage 旋转
10-12
要在Flutter中旋转绘制的图像，可以使用Canvas的save()和restore()方法，以及Canvas的translate()和rotate()方法。具体步骤如下： 1. 使用Image类加载要绘制的图像。 2. 在CustomPainter的paint()方法中，使用...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

肥肥呀呀呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值