флаттера, как я могу создать круг анимации, как это?

голоса
-2

Я хотел бы реализовать круг анимацию для изображения профиля , как Instagram истории что - то вроде этого .
Как я могу добиться этого?

Задан 07/11/2018 в 23:51
источник пользователем
На других языках...                            


1 ответов

голоса
2

Вы можете попробовать использовать dashed_circle пакет для создания Instagram истории как круг (смотрите на изображение ниже). Для того, чтобы создать простую версию спиннинга можно добавить два поворота с помощью Transform.rotate конструкторы.

Первый поворот должен быть родительским виджетом пунктирной окружности. Второе вращение должно окружить дочерний виджет из пунктирной окружности с противоположным углом первого поворота.

Для того, чтобы создать эффект черточек slowling слияния в одной строке, вы можете медленно уменьшить разрыв свойство объекта 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'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
Ответил 08/11/2018 в 13:28
источник пользователем

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