1

I just started flutter development and wanted to create an animation where it looks like a a circle is rotating in 3 dimension and when in center its full size but when going left or right the radius of the circle decreases.

What i have achieved so far is that i am able to move my widget horizontally till the edge of screen by using AnimatedWidget and also achieve resizing of widget by using ScaleTransition and AnimationController but i am facing some issue with resizing with calculations and time. Below is the code for what i have done so far.

Would really help if someone could help me figure this out

enter image description here

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {

  Timer? timer;

  late AnimationController _controller;
  late Animation<double> _animation;

  double fromLeft = 0, fromTop = 0;
  double toLeft = 0, toTop = 0;
  bool initCalled = false;
  double childHeight = 0;
  bool moveFromToEnd = true;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (!initCalled) {
      var screenWidth = MediaQuery.of(context).size.width;
      var screenHeight = MediaQuery.of(context).size.height;
      childHeight = MediaQuery.of(context).size.width/4;
      var halfChildWidth = (childHeight);
      fromLeft = (screenWidth - halfChildWidth) / 2;
      fromTop = (screenHeight - childHeight) / 2;
      toLeft = (screenWidth - halfChildWidth) / 2;
      toTop = (screenHeight - childHeight) / 2;

      int time = 3000;
      print('Screen width: $screenWidth');
      print('Child width: $childHeight');
      double distance = screenWidth - (fromLeft + halfChildWidth);
      double speed = (distance * time);
      double test = (distance/time)*2;
      print('time: $time distance: $distance speed: $speed test: $test');
      _controller = AnimationController(
          duration: Duration(milliseconds: time),
          vsync: this,
          lowerBound: 0.25,
          value: 2,
          upperBound: 1)
        ..repeat(reverse: true);
      _animation = CurvedAnimation(
        parent: _controller,
        curve: Curves.linear,
      );
      timer = Timer.periodic(Duration(milliseconds: 1), (Timer t) {
        setState(() {
          if (moveFromToEnd) {
            fromLeft = fromLeft + test;
            toLeft = toLeft - test;
            if (fromLeft >= screenWidth - childHeight) {
              moveFromToEnd = false;
            }
          }
          if (!moveFromToEnd) {
            fromLeft = fromLeft - test;
            toLeft = toLeft + test;
            if (fromLeft <= 0) {
              moveFromToEnd = true;
            }
          }
        });
      });
      initCalled = true;
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: [
            AnimatedPositioned(
              left: fromLeft,
              top: fromTop,
              duration: const Duration(milliseconds: 1),
              child: SizedBox(
                height: childHeight,
                width: childHeight,
                child: ScaleTransition(
                  scale: _animation,
                  child: Image.network(
                    btcUrl,
                    fit: BoxFit.fitWidth,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Android
  • 1,085
  • 4
  • 13
  • 28

0 Answers0