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
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,
),
),
),
),
],
),
),
);
}
}