fladderen hoe kan ik cirkel animatie als deze?

stemmen
-2

Ik wil graag implementeren cirkel animatie profielfoto zoals Instagram verhaal zoiets als dit .
Hoe kan ik dit te bereiken?

De vraag is gesteld op 07/11/2018 om 23:51
bron van user
In andere talen...                            


1 antwoorden

stemmen
2

U kunt proberen met behulp van de dashed_circle pakket Instagram verhaal als cirkel te maken (zie onderstaande afbeelding). Om een eenvoudige draaiende versie gemaakt, kunt u twee rotatie toevoegen met de Transform.rotate constructeur.

De eerste rotatie moet het moederwidget van de gestreepte cirkel. De tweede rotatie moet het kind widget van het gestreepte gedeelte omringen met de tegenoverliggende hoek van de eerste rotatie.

Om het effect van de streepjes slowling samenvoegen tot een enkele regel te maken, kun je langzaam afnemen eigendom kloof van de dashed_circle.

Ik gaf het een gaan en probeerde mezelf op een snelle demo, om te laten zien een voorbeeld implementatie:

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'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
antwoordde op 08/11/2018 om 13:28
bron van user

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