implementation
Opacity gradient
Animation<double> opacity = Tween<double>(begin: 0.0, end: 1.0,). Animate (CurvedAnimation(parent: _controller, curve: Interval(0.0, 0.1, Curve: easeIn,),);Copy the codeflip
Animation<double> rotate = Tween<double>(begin: 0.0, end: math.pi * 2,). Animate (CurvedAnimation(parent: _controller, curve: Interval(0.0, 0.2, curve: ease,),);Copy the codeThe displacement
Animation<EdgeInsets> movement = EdgeInsetsTween(begin: EdgeInsets. Only (top: 0.0), end: EdgeInsets. Only (top: .animate(Parent: _controller, curve: Interval(0.2, 0.375, curve: Curves.fastOutSlowIn, ), ), );Copy the codeSquare round
Animation<BorderRadius> radius = BorderRadiusTween(begin: Borderradius.circular (0.0), end: BorderRadius. Circular (100.0),). Animate (Parent: _controller, curve: Interval(0.5, 0.75, curve: Curves.ease, ), ), );Copy the codeColor gradient
Animation<Color> color = ColorTween( begin: Colors.blue[300], end: Color.blue [900],). Animate (Parent: _controller, curve: Interval(0.5, 0.75, curve: Curves.linear, ), ), );Copy the codeWide high gradient
Animation<double> height = Tween<double>(begin: 100.0, end: 200.0,). Animate (CurvedAnimation(parent: _controller, curve: Interval(0.375, 0.6, Curve: Interval. FastOutSlowIn,),);Copy the codeAnimation<double> width = Tween<double>(begin: 100.0, end: 200.0,). Animate (CurvedAnimation(parent: _controller, curve: Interval(0.375, 0.6, Curve: Interval. FastOutSlowIn,),);Copy the codecombination
Widget _buildAni(BuildContext context, Widget child) {
returnnew Container( padding: movement.value, transform: Matrix4.identity().. rotateZ(rotate.value), child: new Opacity( opacity: opacity.value, child: new Container( width: width.value, height: height.value, decoration: new BoxDecoration( color: color.value, border: new Border.all( color: Colors.black, width: 3.0,), borderRadius: radius.value,), Child: new Center(Child: new Text('staggered', style: new TextStyle(color: color.white, fontSize: 16.0),),),),); }Copy the code@override
Widget build(BuildContext context) {
return new Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Padding(
padding:
const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
child: new FlatButton(
textColor: Colors.black,
child: new Text('replay staggered'),
onPressed: () {
_startAnimation();
}),
),
new AnimatedBuilder(animation: _controller, builder: _buildAni)
],
);
}
Copy the codeAnimation types
• Tween animation: In Tween animation, start and end points, timelines, and curves that define transition times and speeds are defined, and then the framework automatically calculates how to transition from start to end points. Flutterchina. Club/animations,…
• Physics-based animation: In physics-based animation, motion is simulated to resemble real-world behavior. For example, when you throw a ball, where it lands depends on how fast it is thrown, how heavy it is, and how far it is from the ground. Similarly, a ball attached to a spring is dropped (and bounced) in a different way than a ball attached to a string. Flutterchina. Club/animations,…
Common animation mode
The animation list or grid (AnimatedList flutterchina. Club/catalog/Sam…
Shared elements conversion (Hero animation flutterchina. Club/animations /…).
• Staggered animation
Basic animation concepts and classes
Animation object:
The Animation object is a core class in the Flutter Animation library that generates values that guide the Animation.
The 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.
The Animation object in a Flutter is a class that generates values between intervals in turn over a period of time. The output of an Animation object can be linear, curvilinear, a stepping function, or any other mapping that can be designed. Depending on how the Animation object is controlled, the Animation can run in reverse, or even switch directions in between.
An Animation can also generate values of other types than double, such as an Animation or an Animation object that is stateful and can be accessed by accessing its value property to obtain the current value of the Animation
The Animation object itself has nothing to do with UI rendering
Interval
A curve that is 0.0 before [begin], then 0.0 to 1.0 and then 1.0 at [end] according to [curve]. You can use [Interval] to delay the animation. For example, using [Interval] to set [begin] to 0.5 and using [Interval] to 1.0 for [end], the 6-second animation will essentially become an animation that starts three seconds later.
CurvedAnimation: Defines the Animation process as a nonlinear curve, which belongs to the Animation type:
final CurvedAnimation curve =
new CurvedAnimation(parent: controller, curve: Curves.easeIn);
Copy the codeNote: The Curves class defines many common Curves, and you can create your own, such as:
class ShakeCurve extends Curve {
@override
double transform(double t) {
returnmath.sin(t * math.PI * 2); }}Copy the codeAnimationController:
The AnimationController is a special Animation object that generates a new value every frame that the screen refreshes. By default, The AnimationController will linearly generate numbers from 0.0 to 1.0 over a given period of time. This type of Animation has methods that control the Animation. For example, the.forward() method can start the Animation when creating an AnimationController, You need to pass a vsync parameter to prevent the presence of an off-screen animation (when the animation’s UI is not on the current screen) from consuming unnecessary resources. By putting a SingleTickerProviderStateMixin added to the class definition, can be stateful object as the value of vsync. If you want to use a custom State object as vsync, include TickerProviderStateMixin. // The following code creates an Animation object, but does not start it running:
final AnimationController controller = new AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
Copy the codeTween:
By default, the AnimationController object ranges from 0.0 to 1.0, and Tween is used to enable the animation to generate values for different ranges or data types.
Tween is a stateless object that requires begin and end values. Its sole purpose is to define the mapping from the input range to the output range.
Tween inherits from Animatable, not Animation. Animatable is similar to Animation in that it does not have to output a double. For example, ColorTween specifies the transition between two colors. The evaluate(Animation) method applies the mapping function to the current value of the Animation. The current value of the Animation object can be obtained using the value() method.
To use the Tween object, call its animate() method, passing in a controller object (tween.animate). Note that animate() returns an Animation, not an Animatable. / / In the following example, Tween generates values from -200.0 to 0.0
Final Tween doubleTween = new Tween >(begin: -200.0, end: 0.0);Copy the code// ColorTween specifies the transition between two colors
final Tween colorTween =
new ColorTween(begin: Colors.transparent, end: Colors.black54);
Copy the code// The following code generates integer values from 0 to 255 in 500 milliseconds
final AnimationController controller = new AnimationController(
duration: const Duration(milliseconds: 500), vsync: this);
Copy the codeAnimation alpha = new IntTween(begin: 0, end: 255).animate(controller);
// The following example builds a controller, a curve, and a Tween:
final AnimationController controller = new AnimationController(
duration: const Duration(milliseconds: 500), vsync: this);
Copy the codefinal Animation curve =
new CurvedAnimation(parent: controller, curve: Curves.easeOut);
Copy the codeAnimation<int> alpha = new IntTween(begin: 0, end: 255).animate(curve);
Copy the codeAnimation to inform
An Animation object can have Listeners and StatusListeners, which can be added with addListener() and addStatusListener()
Whenever the value of the animation changes, the listener is called
The StatusListener is called when an animation starts, ends, moves forward or backward (as defined by AnimationStatus)
The most common behavior of a Listener is to call setState() to trigger a UI rebuild.