轨道动画，其中一个项目跟随轨道上的其他项目

Question

我正在创建一个轨道动画，其中项目在轨道上相互跟随。 我已经使用以下代码实现了它，但项目没有正确地相互跟随，如视频演示中所示。

更具体地说，我想要图像之间有更大的间隙。

到目前为止我所取得的成就（演示）： https://www.veed.io/view/63ba082a-a3de-410a-887e-7023c2df40f2?sharingWidget=true&panel=share

我想要实现的目标：

代码：

这里，controller.selectedContacts是一个以图像为属性的模型类的列表

import 'package:tiers_app/controllers/split_bill_controllers/split_bill_controller.dart';
import 'package:tiers_app/core/flutter_imports.dart';
import 'package:tiers_app/core/packages_imports.dart';

import 'orbit_item.dart';

class OrbitAnimation extends GetView<SplitBillController> {
  const OrbitAnimation({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      clipBehavior: Clip.none,
      children: [
        // Orbit outter
        Container(
          height: context.height * 0.3,
          width: context.width * 0.7,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(
              color: getCustomColorSet(context)
                  .defaultTextColorOverDarkBackground!,
            ),
          ),
        ),
        // Orbit inner
        Container(
          height: context.height * 0.3,
          width: context.width * 0.4,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(
              color: getCustomColorSet(context)
                  .defaultTextColorOverDarkBackground!,
            ),
          ),
        ),
        Stack(
          alignment: Alignment.center,
          children: controller.selectedContacts
              .map(
                (element) => controller.selectedContacts.indexOf(element).isOdd
                    ? SizedBox(
                        height: context.height * 0.21,
                        child: OrbitItem(
                          lowerBound:
                              controller.selectedContacts.indexOf(element) * 1,
                          upperBound:
                              controller.selectedContacts.indexOf(element) * 5,
                          duration: Duration(
                              seconds:
                                  controller.selectedContacts.indexOf(element) *
                                      30),
                          image: element.image!,
                        ),
                      )
                    : SizedBox(
                        height: context.height * 0.34,
                        child: OrbitItem(
                          lowerBound:
                              controller.selectedContacts.indexOf(element) == 0
                                  ? 5
                                  : controller.selectedContacts
                                          .indexOf(element) *
                                      5,
                          upperBound:
                              controller.selectedContacts.indexOf(element) == 0
                                  ? 5
                                  : controller.selectedContacts
                                          .indexOf(element) *
                                      10,
                          duration: Duration(
                              seconds: controller.selectedContacts
                                          .indexOf(element) ==
                                      0
                                  ? 30
                                  : controller.selectedContacts
                                          .indexOf(element) *
                                      30),
                          image: element.image!,
                        ),
                      ),
              )
              .toList(),
        ),
      ],
    );
  }
}

在下面的课程中，目前，我使用 origin: Offset(-10 *controller.value / 15, 0) 根据其他轨道项来定位轨道项

import 'dart:math' as math;

import 'package:tiers_app/core/flutter_imports.dart';
import 'package:tiers_app/core/packages_imports.dart';

class OrbitItem extends StatefulWidget {
  final double lowerBound;
  final double upperBound;
  final Duration duration;
  final String image;

  const OrbitItem({
    super.key,
    required this.lowerBound,
    required this.upperBound,
    required this.duration,
    required this.image,
  });

  @override
  State<OrbitItem> createState() => _OrbitItemState();
}

class _OrbitItemState extends State<OrbitItem>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      lowerBound: 0,
      upperBound: 100,
    );

    controller.repeat(
        min: widget.lowerBound,
        max: widget.upperBound,
        period: widget.duration);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        return Transform.rotate(
          angle: controller.value * 2.0 * math.pi, // Full rotation in radians
          origin: Offset(-10 * controller.value / 15, 0),
          child: Align(
            alignment: Alignment.topCenter,
            child: Transform.rotate(
              angle: -controller.value *
                  2.0 *
                  math.pi, // Counterclockwise rotation, means it restricts rotation upside down
              child: CircleAvatar(
                radius: context.height * 0.02,
                backgroundColor: getCustomColorSet(context).backgroundLight,
                foregroundImage: CachedNetworkImageProvider(widget.image),
              ),
            ),
          ),
        );
      },
    );
  }
}

Answer 1

问题解决了吗？我正在尝试做类似的事情。