This article shares the specific code of Flutter Animation to implement scaling and sliding animations for your reference. The specific content is as follows
Animation object is a core class in the Flutter animation library that generates values that direct animations.
Animation object knows the current state of the animation (for example, whether it starts, stops, or moves forward or backward), but it does not know what is displayed on the screen.
AnimationController manages Animation.
CurvedAnimation abstracts the process into a nonlinear curve.
Tween generates values between the range of data used by the object that is executing the animation. For example, Tween may generate color values from red to blue, or from 0 to 255.
Use Listeners and StatusListeners to monitor animation status changes.
import 'package:flutter/';
import 'package:flutter/';
void main() {
runApp(new LogoApp());
}
class LogoApp extends StatefulWidget {
_LogoAppState createState() => new _LogoAppState();
}
class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
initState() {
();
controller = new AnimationController(
duration: const Duration(milliseconds: 10000), vsync: this);
animation = new Tween(begin: 0.0, end: 300.0).animate(controller);
();
}
Widget build(BuildContext context) {
return new AnimatedLogo(animation: animation);
}
dispose() {
();
();
}
}
class AnimatedLogo extends AnimatedWidget {
AnimatedLogo({Key key, Animation<double> animation})
: super(key: key, listenable: animation);
Widget build(BuildContext context) {
final Animation<double> animation = listenable;
return new Center(
child: new Container(
margin: new (vertical: 10.0),
height: ,
width: ,
child: new FlutterLogo(),
),
);
}
}Zoom function
class ScaleAnimatedContent extends StatefulWidget {
final Widget child;
final bool show;
const ScaleAnimatedContent({Key key, , = false})
: super(key: key);
@override
ScaleAnimatedContentState createState() => ScaleAnimatedContentState();
}
class ScaleAnimatedContentState extends State<ScaleAnimatedContent>
with TickerProviderStateMixin {
AnimationController animationController;
Animation<double> animation;
@override
void initState() {
animationController = new AnimationController(
vsync: this,
duration: new Duration(milliseconds: 600),
);
// animationSlideUp = new Tween(begin: 0.0,end: 1.0).animate(animationController);
animation = Tween(begin: 0.0, end: 1.0).animate(animationController);
if () {
();
}
();
}
@override
void didUpdateWidget(ScaleAnimatedContent oldWidget) {
if (widget != oldWidget) {
if ( && !) {
(from: 0.0);
} else if (!) {
();
}
}
(oldWidget);
}
@override
Widget build(BuildContext context) {
return ScaleTransition(
scale: animation,
child: ,
);
}
@override
void dispose() {
();
();
}
}Sliding effect
class SlideAnimatedContent extends StatefulWidget {
final Widget child;
final bool show;
const SlideAnimatedContent({Key key, , = false})
: super(key: key);
@override
SlideAnimatedContentState createState() => SlideAnimatedContentState();
}
class SlideAnimatedContentState extends State<SlideAnimatedContent>
with TickerProviderStateMixin {
AnimationController animationController;
Animation<Offset> animationSlideUp;
@override
void initState() {
animationController = new AnimationController(
vsync: this,
duration: new Duration(milliseconds: 600),
);
animationSlideUp = new Tween(
begin: Offset(0.0, 5.0),
end: Offset(0.0, 0.0),
).animate(CurvedAnimation(parent: animationController, curve: ));
if () {
();
}
();
}
@override
void didUpdateWidget(SlideAnimatedContent oldWidget) {
if (widget != oldWidget) {
if ( && !) {
(from: 0.0);
} else if (!) {
();
}
}
(oldWidget);
}
@override
Widget build(BuildContext context) {
return SlideTransition(
position: animationSlideUp,
child: FadeTransition(
opacity: animationController,
child: ,
),
);
}
@override
void dispose() {
();
();
}
}The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.