Flutter built-in animation

Even the AnimatedBuilder has to specify the widget properties that participate in the animation changes. To make things easier, we have added the following built-in animation libraries to the AnimatedWidget. The ones in Android, of course, a few more:

  • SlideTransition– Self multiple displacement animation
  • AlignTransition– No information
  • PositionedTransition– Zoom animation, limiting the parent layout to stack only
  • FadeTransition– Transparency animation
  • ScaleTransition– Zoom animation, this is the android zoom animation, you can specify the center point
  • SizeTransition– Width and height animation, the limitation is that only one dimension can be executed at a time, width and height can not be used together, that is the zoom animation
  • RotationTransition– Rotation animation, characterized by its value between 0 and 1, rotation 90 degrees = 0.25

The characteristic of these transitions is that they accept the animation and write the widget with a child as an argument

FadeTransition

FadeTransition is a opacity animation, the parameter is a specified animation, child write widget is not

animationController = AnimationController(
  duration: Duration(milliseconds: 300),
  vsync: this,); animation = CurvedAnimation(parent: animationController, curve: Curves.bounceInOut); animation = Tween(begin:0.0, end: 1.0).animate(animationController);
Copy the code
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          FadeTransition(
            opacity: animation,
            child: Container(
              margin: EdgeInsets.only(bottom: 20),
              width: 300,
              height: 300,
              color: Colors.blueAccent,
            ),
          ),
          RaisedButton(
            child: Text("Enlarge"), onPressed: () { animationController? .forward(); },),],),); }}Copy the code

SlideTransition

The SlideTransition animation uses offset to hold the x and y axes. Note that the values in Offset(0.0, 0.0) are multiples, which means SlideTransition only supports multiples of the width and width of the widget itself

  void initState() {
    super.initState();

    animationController = AnimationController(
      duration: Duration(milliseconds: 300),
      vsync: this,); animation = Tween(begin: Offset(0.0.0.0), end: Offset(1.0.1.0))
        .animate(animationController);
  }
Copy the code
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SlideTransition(
            position: animation,
            child: Container(
              margin: EdgeInsets.only(bottom: 20),
              width: 100,
              height: 100,
              color: Colors.blueAccent,
            ),
          ),
          RaisedButton(
            child: Text("Enlarge"), onPressed: () { animationController? .forward(); },),],),); }Copy the code

PositionedTransition

PositionedTransition scale animation, which must be used within the stack using a RelativeRect that is relative to the top, right, and bottom four corners of the stack’s parent layout:

    animation = RelativeRectTween(
            begin: RelativeRect.fromLTRB(0.0.0.0),
            end: RelativeRect.fromLTRB(50.200.50.200))
        .animate(animationController);
Copy the code

Here’s a picture:

Basically this idea, there are some restrictions, here is the example code, not the above GIF code:

  Animation<RelativeRect> animation;
  AnimationController animationController;
  CurvedAnimation curve;

  void initState() {
    super.initState();

    animationController = AnimationController(
      duration: Duration(milliseconds: 300),
      vsync: this,); curve = CurvedAnimation(parent: animationController, curve: Curves.bounceInOut); animation = RelativeRectTween( begin: RelativeRect.fromLTRB(0.0.0.0),
            end: RelativeRect.fromLTRB(50.200.50.200))
        .animate(curve);
  }
Copy the code
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        children: <Widget>[
          PositionedTransition(
            rect: animation,
            child: Container(
              width: 300,
              height: 300,
              color: Colors.blueAccent,
            ),
          ),
          Positioned(
            top: 20,
            left: 20,
            child: RaisedButton(
              child: Text("Enlarge"), onPressed: () { animationController? .forward(); },), [,],),); }Copy the code

Finally, note that the value within the RelativeRectTween Begin affects the width and height of the widget when it is initially displayed

ScaleTransition

ScaleTransition This is a traditional scale animation, using alignment: align.topleft to specify the center of the scale

  Animation<double> animation;
  AnimationController animationController;
  CurvedAnimation curve;

  @override
  void initState() {
    super.initState();

    animationController = AnimationController(
      duration: Duration(milliseconds: 300),
      vsync: this,); curve = CurvedAnimation(parent: animationController, curve: Curves.bounceInOut); animation = Tween( begin:1.0,
      end: 0.3,
    ).animate(curve);
  }

Copy the code
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        children: <Widget>[
          ScaleTransition(
            alignment: Alignment.topLeft,
            scale: animation,
            child: Container(
              width: 300,
              height: 300,
              color: Colors.blueAccent,
            ),
          ),
          Positioned(
            top: 20,
            left: 20,
            child: RaisedButton(
              child: Text("Enlarge"), onPressed: () { animationController? .forward(); },), [,],),); }Copy the code

SizeTransition

The SizeTransition animation can only be set to one dimension at a time. It cannot be the same size as the height

Axis: Axis. Horizontal specifies the width or height of the animation

  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        children: <Widget>[
          SizeTransition(
            axis: Axis.horizontal,
            sizeFactor: animation,
            child: Container(
              color: Colors.blueAccent,
              child: Icon(Icons.access_alarm, size: 300),
            ),
          ),
          Positioned(
            top: 20,
            left: 20,
            child: RaisedButton(
              child: Text("Enlarge"), onPressed: () { animationController? .forward(); },), [,],),); }Copy the code

RotationTransition

RotationTransition is a rotation animation with values between 0 and 1, rotated 90 degrees = 0.25, and can still set the origin

animation = Tween(
  begin: 0.0,
  end: 0.25,
).animate(curve);
Copy the code
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        children: <Widget>[
          RotationTransition(
            turns: animation,
            alignment: Alignment.center,
            child: Container(
              color: Colors.blueAccent,
              child: Icon(Icons.access_alarm, size: 300),
            ),
          ),
          Positioned(
            top: 20,
            left: 20,
            child: RaisedButton(
              child: Text("Enlarge"), onPressed: () { animationController? .forward(); },), [,],),); }Copy the code