如何在 Flutter 中创建这样的圆形动画？

Question

我想实现的个人资料照片像Instagram的故事有点像圆动画此。
我怎样才能做到这一点？

Answer 1

您可以尝试使用dashed_circle包来创建类似圆的 instagram 故事（请看下图）。要创建一个简单的旋转版本，您可以使用Transform.rotate构造函数添加两个旋转。

第一个旋转必须是虚线圆圈的父小部件。第二次旋转应该以第一次旋转的相反角度围绕虚线圆圈的子小部件。

要创建虚线缓慢合并为一条线的效果，您可以慢慢减小dashed_circle.

我试了一下，并在一个快速演示中尝试了自己，向您展示了一个示例实现：

import 'package:flutter/material.dart';
import 'package:dashed_circle/dashed_circle.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(),
      home: Scaffold(
        body: Center(
          child: RotateAnimationDemo(),
        ),
      ),
    );
  }
}

class RotateAnimationDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => RotateAnimationDemoState();
}

class RotateAnimationDemoState extends State<RotateAnimationDemo>
    with SingleTickerProviderStateMixin {
  AnimationController controller;

  Animation base;
  Animation inverted;
  Animation gap;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 3));

    base = CurvedAnimation(parent: controller, curve: Curves.easeOut);

    inverted = Tween<double>(begin: 0.0, end: -1.0).animate(base);

    gap = Tween<double>(begin: 3.0, end: 0.0).animate(base)
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => controller.forward(),
      child: RotationTransition(
        turns: base,
        child: DashedCircle(
          gapSize: gap.value,
          dashes: 20,
          color: Colors.deepOrange,
          child: RotationTransition(
            turns: inverted,
            child: Padding(
              padding: const EdgeInsets.all(7.0),
              child: CircleAvatar(
                radius: 60.0,
                backgroundImage: NetworkImage(
                    'https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Bill_Gates_Buys_Skype_%285707954468%29.jpg/2560px-Bill_Gates_Buys_Skype_%285707954468%29.jpg'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}