vlají jak mohu vytvořit kruh animace, jako je tento?

hlasů
-2

Chtěl bych realizovat kruh animace pro profilový obrázek jako Instagram příběhu něco takového to .
Jak mohu dosáhnout?

Položena 07/11/2018 v 23:51
zdroj uživatelem
V jiných jazycích...                            


1 odpovědí

hlasů
2

Můžete zkusit pomocí dashed_circle balíček vytvořit Instagram příběh jako kružnice (podívejte se na obrázek níže). Chcete-li vytvořit jednoduchou verzi předení můžete přidat dvě rotace pomocí Transform.rotate konstruktoru.

První otáčení musí být rodič widget čárkované kružnice. Druhé střídání by mělo obklopovat dětskou widget přerušovanou kruhu s opačným úhlem první rotace.

Chcete-li vytvořit efekt pomlčky slowling sloučení do jedné lince, můžete pomalu klesá vlastnost mezerou dashed_circle.

Dal jsem to zkusit a snažil jsem se na rychlý demo, aby zobrazoval implementaci příklad:

Bill Gates Story

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'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
Odpovězeno 08/11/2018 v 13:28
zdroj uživatelem

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more