An example of picture enlargement

Key points:

  • AnimationController, used to set the execution time of the animation, as well as the animation opening, reversing and other actions.

controller = new AnimationController(duration: const Duration(seconds: 4), vsync: this);

  • Animation is used to set the value range of Animation and add Animation listener. AddListener is a frame listener. Each frame will be called back.

Animation = new Tween(begin: 100.0, end: 300.0). Animate (controller).. // Use setState to redraw setState(() => {}); });

  • Controller.forward () // Start animation
  • Controller.dispose () // Dispose animation resources

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { AnimationController controller; Animation<double> animation; initState() { super.initState(); Controller = new AnimationController(duration: const duration (seconds: 4), vsync: this); Animation = new Tween(begin: 100.0, end: 300.0). Animate (controller).. // Use setState to redraw setState(() => {}); }); // Start the animation Controller.forward (); } @override Widget build(BuildContext context) { return new Center( child: Image.asset("images/avatar.jpg", width: animation.value, height: animation.value), ); Dispose () {dispose() {dispose(); super.dispose(); }}Copy the code
2. Value change curve

The change value, from begin to end, is linear by default. The change process can be set as a curve function, such as:

  • animation=CurvedAnimation(parent: controller, curve: Curves.bounceIn);

Curves Vary in many ways:

  • Linear linear
  • BounceIn elastic
  • Ease begins quickly and then slowly
  • EaseIn is slow at first, then fast
  • .
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { AnimationController controller; Animation<double> animation; initState() { super.initState(); Controller = new AnimationController(duration: const duration (seconds: 3), vsync: this); Animation =CurvedAnimation(parent: controller, curve: Curves. BounceIn); Animation = new Tween(begin: 100.0, end: 400.0). Animate (animation).. // Use setState to redraw setState(() => {}); }); // Start the animation Controller.forward (); } @override Widget build(BuildContext context) { return new Center( child: Image.asset("images/avatar.jpg", width: animation.value, height: animation.value), ); Dispose () {dispose() {dispose(); super.dispose(); }}Copy the code
3. AnimatedWidget

The above uses addListener and setState for redrawing, and the AnimatedWidget simplifies this. After inheriting the AnimatedWidget, you can use the value of the animation directly.

class AnimatedImage extends AnimatedWidget { AnimatedImage({Key key, Animation<double> animation}) : super(key: key, listenable: animation); Widget build(BuildContext context) { final Animation<double> animation = listenable; return new Center( child: Image.asset("images/avatar.jpg", width: animation.value, height: animation.value ), ); } } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { AnimationController controller; Animation<double> animation; initState() { super.initState(); Controller = new AnimationController(duration: const duration (seconds: 3), vsync: this); Animation =CurvedAnimation(parent: controller, curve: Curves. BounceIn); Animation = new Tween(begin: 100.0, end: 400.0). Animate (animation); // Start the animation Controller.forward (); } @override Widget build(BuildContext context) { return AnimatedImage(animation: animation,); Dispose () {dispose() {dispose(); super.dispose(); }}Copy the code
Four AnimatedBuilder.

Construction method:

const AnimatedBuilder({
    Key key,
    @required Listenable animation,
    @required this.builder,
    this.child,
  }) 
Copy the code
  • Animation Defines an animation
  • The object of child’s action is which widget to animate
  • Build encapsulates the drawing process
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { AnimationController controller; Animation<double> animation; initState() { super.initState(); Controller = new AnimationController(duration: const duration (seconds: 3), vsync: this); Animation = CurvedAnimation(parent: controller, curve: Curves. BounceIn); Animation = new Tween(begin: 100.0, end: 400.0). Animate (animation); // Start the animation Controller.forward (); } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: animation, child: Image.asset("images/avatar.jpg"), builder: (BuildContext context, Widget child) { return new Center( child: Container( height: animation.value, width: animation.value, child: child, ), ); }); Dispose () {dispose() {dispose(); super.dispose(); }}Copy the code
Five. Encapsulate animation

Separate the animation from the target, specify the animation process, and pass in the target Child Widget.

class GrowTransition extends StatelessWidget { GrowTransition({this.child, this.animation}); // Pass in the target and animate the final Widget child; final Animation<double> animation; Widget Build (BuildContext Context) {return new Center(Child: new AnimatedBuilder(animation: animation, builder: (BuildContext context, Widget child) { return new Container( height: animation.value, width: animation.value, child: child ); }, child: child ), ); } } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { AnimationController controller; Animation<double> animation; initState() { super.initState(); Controller = new AnimationController(duration: const duration (seconds: 3), vsync: this); Animation = CurvedAnimation(parent: controller, curve: Curves. BounceIn); Animation = new Tween(begin: 100.0, end: 400.0). Animate (animation); // Start the animation Controller.forward (); } @override Widget build(BuildContext context) { return GrowTransition( animation: animation, child: Image.asset("images/avatar.jpg"), ); Dispose () {dispose() {dispose(); super.dispose(); }}Copy the code
6. Status listener
  • AddListener is the listener callback for each frame
  • AddStatusListener monitors the state of the animation process, including:
    • Animation stop
    • Forward Animation starts forward execution
    • The reverse animation starts to run in reverse
    • Completed The animation completes
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { AnimationController controller; Animation<double> animation; initState() { super.initState(); Controller = new AnimationController(duration: const duration (seconds: 3), vsync: this); Animation = CurvedAnimation(parent: controller, curve: Curves. BounceIn); Animation = new Tween(begin: 100.0, end: 400.0). Animate (animation); / / add state monitor animation. AddStatusListener ((status) {if (status = = AnimationStatus.com pleted) {/ / executed at the end of the reverse animation animation controller.reverse(); } else if (status = = AnimationStatus dismissed) {/ / animation to return to the initial state when performing animation (positive) controller. Forward (); }}); // Start the animation Controller.forward (); } @override Widget build(BuildContext context) { return GrowTransition( animation: animation, child: Image.asset("images/avatar.jpg"), ); Dispose () {dispose() {dispose(); super.dispose(); }}Copy the code