φτερουγίζει πώς μπορώ να δημιουργήσω κύκλο κινούμενα σχέδια όπως αυτό;

ψήφοι
-2

Θα ήθελα να εφαρμόσουν animation κύκλο για το προφίλ εικόνα σαν ιστορία Instagram κάτι σαν αυτό .
Πώς μπορώ να επιτευχθεί αυτό;

Δημοσιεύθηκε 07/11/2018 στις 23:51
πηγή χρήστη
Σε άλλες γλώσσες...                            


1 απαντήσεις

ψήφοι
2

Μπορείτε να δοκιμάστε να χρησιμοποιήσετε το dashed_circle πακέτο για τη δημιουργία Instagram ιστορία σαν κύκλος (δείτε την παρακάτω εικόνα). Για να δημιουργήσετε μια απλή έκδοση περιστρεφόμενο μπορείτε να προσθέσετε δύο περιστροφής χρησιμοποιώντας το Transform.rotate κατασκευαστή.

Η πρώτη περιστροφή πρέπει να είναι ο γονέας widget του διακεκομμένου κύκλου. Η δεύτερη περιστροφή θα πρέπει να περιβάλλουν το παιδί widget του διακεκομμένου κύκλου με την αντίθετη γωνία του πρώτου περιστροφής.

Για να δημιουργήσετε το αποτέλεσμα των παύλες slowling συγχώνευση σε μια ενιαία γραμμή, μπορείτε να μειώσετε σταδιακά το ακίνητο κενό του dashed_circle.

Μου έδωσε μια πάει και να δοκιμάσει τον εαυτό σας σε ένα γρήγορο demo, να σας δείξει μια εφαρμογή παράδειγμα:

Bill Gates ιστορία

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