I want to make an animation in flutter using
late AnimationController controller1;
late Animation<double> animation1;
@override
void initState() {
super.initState();
controller1 = AnimationController(
duration: const Duration(milliseconds: 700),
vsync: this,
);
animation1 = Tween(begin: 50.0, end: 0.0).animate(controller1)
..addListener(() {
setState(() {});
});
controller1.forward();
}
No matter which values I put in as "begin" and "end" - the
controller1.value
always goes from 0.0 to 1.0. What is my mistake here?
Thanks!
CodePudding user response:
I think you want to use the animation1.value
, not the controller1.value and you can verify it using the following code :) :
@override
void initState() {
super.initState();
controller =
AnimationController(duration: const Duration(seconds: 2), vsync: this);
animation = Tween<double>(begin: 50.0, end: 0.0).animate(controller)
..addListener(() {
// #enddocregion addListener
setState(() {
print("Animation value: ${animation.value}");
//TODO: you can uncomment this print to see the value of the controller
//print("Controller value: ${controller.value}");
});
});
controller.forward();
}
Check out the official tutorial for more info :)
By the way, since controller.value
goes from 0.0 to 1.0, you can consider it as a sort of completion percentage :)
CodePudding user response:
Alright guys. I managed to sort this using SlideTransition
and FadeTransition
.
I guess we should only use Transition
widgets for... transitions? while things like Positioned
and Opacity
are for more static widgets? Not sure...
What it looks like: https://youtu.be/hj7PkjXrgfg
Anyways, here's the replacement code, if anyone's looking for reference:
class WeatherCloudWidget extends StatefulWidget {
final double sunSize;
final CloudProperties properties;
WeatherCloudWidget({Key key, this.properties, this.sunSize})
: super(key: key);
@override
State<StatefulWidget> createState() => _WeatherCloudWidget();
}
class _WeatherCloudWidget extends State<WeatherCloudWidget>
with TickerProviderStateMixin {
AnimationController controller;
Animation<Offset> position;
Animation<double> opacity;
final alphaTween = new Tween(begin: 0.0, end: 1.0);
@override
initState() {
super.initState();
_startAnimation();
}
@override
Widget build(BuildContext context) {
// screen width and height
final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;
final properties = widget.properties;
var vertical = (screenHeight * 0.5)
(widget.sunSize * properties.verticalOffset * -1);
var horizontal =
(screenWidth * 0.5) (widget.sunSize * properties.tweenEnd);
return Positioned(
left: horizontal,
top: vertical,
child: SlideTransition(
position: position,
child: FadeTransition(
opacity: opacity,
child: Image.asset(
properties.path,
width: properties.getScaledWidth(widget.sunSize),
height: properties.getScaledHeight(widget.sunSize),
),
)),
);
}
@override
dispose() {
controller.dispose();
super.dispose();
}
void _startAnimation() {
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
position = new Tween<Offset>(
begin: new Offset(widget.properties.tweenStart, 0.0),
end: new Offset(0.0, 0.0),
).animate(new CurvedAnimation(parent: controller, curve: Curves.decelerate));
opacity = alphaTween.animate(controller);
controller.forward();
}
}
I think this may help you.
CodePudding user response:
You should use animation1.value
instead of controller value.
@override
void initState() {
super.initState();
controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 350),
);
animation = Tween<double>(begin:50, end:0.0).animate(controller);
animation.addListener((){
print(animation.value);
});
controller.forward();
}
Output
50 50 41.285714285714285 36.714285714285715 31.57142857142857 24.857142857142854 20.14285714285714 15.428571428571423 10.428571428571423 5.714285714285708 0.9999999999999929 0