स्पंदन कैसे मैं इस तरह चक्र एनीमेशन बना सकते हैं?

वोट
-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