Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.
Xiao CAI has not been familiar with animation, recently learned some superficial knowledge about animation, there are many online materials, Xiao CAI according to their own understanding.
Animation
Animation can generate values in the Animation process. The generated values are not single doubles, but also Size/Color, etc. The Animation can get the state but not the screen content.
AnimationController
The AnimationController is a special Animation that generates a new value when the screen is refreshed. When using need to pass vsync value, used to prevent the screen outside the animation, can inherit TickerProviderStateMixin vsync values, if the current page is only one controller can also use SingleTickerProviderStateMixin;
AnimationController has two common methods:
- The forward() method is used to start the animation from scratch;
- The reverse() method is used to start the animation backwards, from something to nothing;
Classification of animation
Flutter provides two kinds of Animation, namely, Tween Animation and physics-based Animation. Side dish is understood as linear uniform animation and nonlinear animation.
TweenAnimation
Tween animation is stateless and only generates begin and end values evenly within a fixed time, which can be obtained by animation.value.
AnimationController controller = AnimationController(duration: const Duration(milliseconds: 300), vsync: this); Animation<double> Animation = Tween(begin: 0.0, end: 1.0). Animate (controller); Animation<double> Animation = Tween(begin: 0.0, end: 1.0). Animate (controller); animation.addListener(() { setState(() {}); });Copy the codeCurvedAnimation
The animation process of CurvedAnimation is non-linear, and there are many kinds of curves, which are more consistent with the physical process of daily life, such as fast first and then slow, or increase to a peak value and then decrease, etc. The animation process of Curve can also be customized functions.
AnimationController controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn);
Copy the codeRegardless of linear or nonlinear animation, can obtain the value in the animation process, according to this value can be flexibly used in the required scene; The most common use of animated scenes is transparency/rotation/zoom/pan etc.
AnimatedWidget
Flutter provides a Widget with animation properties that makes it easy to use simple animations, including transparency, rotation, zoom, and pan. However, the disadvantages are obvious. These Widget properties are relatively specific, which is not suitable if multiple animation properties are required.
A brief introduction to a few of the daily use of animation components;
XXXTransition
Show hidden FadeTransition
FadeTransition(opacity: animation, child: FlutterLogo(size: 100.0))
Copy the codeScaleTransition zoom
ScaleTransition(scale: animation, child: FlutterLogo(size: 100.0))
Copy the codeRotationTransition rotation
RotationTransition(Turns: Animation, Child: FlutterLogo(size: 100.0)Copy the codeTransform. XXX
The Transform, scale zoom
Transform.scale(scale: curve.value, child: FlutterLogo(size: 100.0))
Copy the codeThe Transform. The rotate rotation
Transform.rotate(angle: curve.value * pi, child: FlutterLogo(size: 100.0))
Copy the codeThe Transform. Translate translation
Offset: offset (100.0 * curve.value, 0.0), Child: FlutterLogo(size: 100.0)Copy the codeAnimatedXXX
AnimatedOpacity transparency
AnimatedOpacity(animation.value, duration: duration (milliseconds: 2000), Child: FlutterLogo(size: 100.0))Copy the codeCore code:
class _AnimationPageState extends State<AnimationPage03> with TickerProviderStateMixin { AnimationController controller; Animation<double> animation; CurvedAnimation curve; bool isForward = false; @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this); curve = CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn); Animation = Tween(begin: 0.0, end: 1.0). Animate (controller); animation.addListener(() { setState(() {}); }); } @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text('Animation Demo'), ), body: Stack(children: <Widget>[ ListView(children: <Widget>[ Padding( padding: EdgeInsets. All (5.0), child: Row(children: <Widget>[Expanded(Flex: 1, child: Center(child: Text('FadeTransition'))), Expanded( flex: 1, child: Center(child: Text('ScaleTransition'))) ])), Row(children: <Widget>[ Expanded( flex: 1, child: FadeTransition( opacity: animation, child: FlutterLogo(size: Expanded(Flex: 1, Child: ScaleTransition(Scale: animation, child: FlutterLogo(size: All (5.0), child: Row(children: <Widget>[Expanded(flex: 1, child: Center(child: Text('RotationTransition'))), Expanded( flex: 1, child: Center(child: Text('AnimatedOpacity'))) ])), Row(children: <Widget>[ Expanded( flex: 1, child: RotationTransition( turns: Animation, Child: FlutterLogo(size: 100.0)), Expanded(Flex: 1, Child: AnimatedOpacity(opacity: Animation.value, duration: duration (milliseconds: 2000), Child: FlutterLogo(size: 100.0))]), Padding(Padding: EdgeInsets. All (5.0), child: Row(children: <Widget>[Expanded(Flex: 1, child: Center(child: Text('Transform.translate'))), Expanded( flex: 1, child: Center(child: Text('Transform.rotate'))) ])), Row(children: <Widget>[Expanded(flex: 1, child: transform. translate(offset: offset (100.0 * curve.value, 0.0), child: FlutterLogo(size: 100.0)), Expanded(Flex: 1, child: transform.rotate (Angle: curve.value * PI, child: FlutterLogo(size: 100.0)))]), Padding(Padding: EdgeInsets. All (5.0), child: Row(children: <Widget>[Expanded(flex: 1, child: Center(child: Text('Transform.scale'))), Expanded(flex: 1, child: Center(child: Text('Position'))) ])), Row(children: <Widget>[ Expanded( flex: 1, child: Transform.scale( scale: curve.value, child: FlutterLogo(size: 100.0)),])]), posWid()]), floatingActionButton: New floatingActionButton (ToolTip: 'Animation', child: new Icon(Icons.lightbulb_outline), onPressed: () { isForward ? controller.reverse() : controller.forward(); isForward = ! isForward; })); } Widget posWid() { return Positioned( bottom: 16 + 314 * animation.value, right: 16 + 84 * animation.value, child: The Container (child: FlutterLogo (size: 100.0))); }}Copy the codeSmall dish to animation research is not deep, only sort out some basic animation methods, if there is wrong place hope more guidance!
Source: Little Monk A Ce