A review of Flutter Animation &Motion Widgets

This article has been authorized to be published and reprinted exclusively by the wechat official account YYGeeker, please indicate the source

AnimatedDefaultTextStyle

1, the introduction of

AnimatedDefaultTextStyleControl represents an animated control with varying text styles
AnimatedDefaultTextStyleBy modifying the style property of the component, the system will automatically animate it to the new style

constructors

AnimatedDefaultTextStyle({
    Key key,
    @required this.child,
    @required this.style,
    this.textAlign,
    this.softWrap = true.this.overflow = TextOverflow.clip,
    this.maxLines,
    Curve curve = Curves.linear,
    @required Duration duration,
    Duration reverseDuration,
})
Copy the code

Child: A child control, usually a Text component
Style: The style of the child control used for animation changes
TextAlign: Alignment of all newline fonts if the text is longer than 1 line. It can be left or right
SoftWrap: Whether text should be wrapped at soft newlines. Soft and hard newlines are word usage
Overflow: Clipping of areas that exceed the number of lines of text
MaxLines: Maximum number of lines of text, default is 1
Curve: Animation interpolator
Duration: animation playback duration
ReverseDuration: Indicates the playback duration of the backward animation

Example 3,

Switching styles is controlled by the _isSelected value

AnimatedDefaultTextStyle(
  softWrap: false,
  textAlign: TextAlign.right,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
  curve: Curves.linear,
  duration: Duration(seconds: 1),
  child: Text("Flutter message you!!!"),
  style: _isSelected
      ? TextStyle(
          fontSize: 10.0,
          color: Colors.red,
          fontWeight: FontWeight.bold,
        )
      : TextStyle(
          fontSize: 50.0,
          color: Colors.black,
          fontWeight: FontWeight.w300,
        ),
),
Copy the code

Style switching is controlled by a timer

Timer.periodic(Duration(seconds: 1), (timer) {
  setState(() {
    switch (time % 4) {
      case 0:
        _isSelected = false;
        break;
      case 2:
        _isSelected = true;
        break;
    }
    time++;
  });
});
Copy the code

AnimatedListState/AnimatedList

1, the introduction of

AnimatedListStateControl represents a list control with an animation
AnimatedListStateControl asAnimatedListControl key to control list animation and add and delete operations

constructors

const AnimatedList({
    Key key,
    @required this.itemBuilder,
    this.initialItemCount = 0.this.scrollDirection = Axis.vertical,
    this.reverse = false.this.controller,
    this.primary,
    this.physics,
    this.shrinkWrap = false.this.padding,
})
Copy the code

ItemBuilder: The builder of list items
InitialItemCount: Number of initialized items in the list
ScrollDirection: indicates the scrolling direction
Reverse: Indicates whether to reverse
Controller: scroll controller
Primary: Whether this view scrolls to the top when the user clicks on the status bar. IOS only, supported by default
Physics: Controls the user’s scrolling view interaction
- AlwaysScrollableScrollPhysics: always scrollable list
- PageScrollPhysics: Slide a list of pages, generally used for the slide effect of the PageView control, sliding to the end of a large popup
- ClampingScrollPhysics: No rebound effect when scrolling
- NeverScrollableScrollPhysics: even if the content range of list will not slide
- BouncingScrollPhysics: BouncingScrollPhysics BouncingScrollPhysics BouncingScrollPhysics BouncingScrollPhysics
- FixedExtentScrollPhysics: only scroll to children without any offset, must be used together with the use of FixedExtentScrollController scrollable object
ShrinkWrap: Whether to set the length of the ListView based on the total length of the child widgets
Padding: Inner margin of the parent control

Example 3,

Click the plus sign to randomly generate strings to add to the list, and click the delete icon of the item to delete the list

class WeWidgetState extends State<WeWidget> {
  var data = <String>[];
  var tween = Tween<Offset>(begin: Offset(1.0), end: Offset(0.0));
  final animatedKey = GlobalKey<AnimatedListState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('day19'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          var str = Random().nextInt(1000).toString();
          data.add(str);
          var index = data.lastIndexOf(str);
          animatedKey.currentState.insertItem(index);
        },
        child: Icon(Icons.add),
      ),
      body: AnimatedList(
        physics: BouncingScrollPhysics(),
        padding: EdgeInsets.all(12.0),
        scrollDirection: Axis.vertical,
        primary: true,
        reverse: false,
        shrinkWrap: false,
        key: animatedKey,
        initialItemCount: data.length,
        itemBuilder: (context, int index, Animation<double> animation) {
          returnanimationListItem(data[index], animation); },),); }Widget animationListItem(String str, animation) {
    return SlideTransition(
      position: animation.drive(tween),
      child: listItem(str),
    );
  }

  Widget listItem(String str) {
    return ListTile(
      title: Text('$str', style: TextStyle(fontSize: 30)), trailing: IconButton( icon: Icon(Icons.delete_forever), onPressed: () { var index = data.indexOf(str); data.remove(str); animatedKey.currentState.removeItem( index, (context, animation) => animationListItem(str, animation)); },),); }}Copy the code

AnimatedModalBarrier

1, the introduction of

AnimatedModalBarrierControl represents an animated control with color value changes
AnimatedModalBarrierControl prevents the user from interacting with the widget behind itself, and color animations can be used for transitions
AnimatedModalBarrierControl for example, when a dialog box appears on the screen, the page below the dialog box is usually removedModalBarrierdim

constructors

const AnimatedModalBarrier({
    Key key,
    Animation<Color> color,
    this.dismissible = true.this.semanticsLabel,
    this.barrierSemanticsDismissible,
})
Copy the code

Color: Color value animation changes
Dismissible: Whether or not to touch the presentModalBarrierThe current route will pop up, with click the event to pop up the route
SemanticsLabel: indicates the semantic label
Whether to include barrierSemanticsDismissible: semantic treeModalBarrierThe semantic

Example 3,

Widget _buildColumn(a) {
    return Center(
      child: Container(
        width: 200,
        height: 200,
        child: AnimatedModalBarrier(
          semanticsLabel: "StackBarrier",
          barrierSemanticsDismissible: true,
          dismissible: true,
          color: _animation,
        ),
      ),
    );
}
Copy the code

AnimatedOpacity

1, the introduction of

AnimatedOpacityControl represents an animated control with transparency changes

constructors

const AnimatedOpacity({
    Key key,
    this.child,
    @required this.opacity,
    Curve curve = Curves.linear,
    @required Duration duration,
})
Copy the code

Child: child control
Opacity: opacity animation change value
Curve: Interpolator for animation
Duration: indicates the duration of the animation

Example 3,

Change transparency by timer

class WeWidgetState extends State<WeWidget> {
  WeWidgetState() {
    Timer.periodic(Duration(milliseconds: 1000), (timer) {
      setState(() {
        switch (time % 2) {
          case 0:
            _opacity = 0.3;
            break;
          case 1:
            _opacity = 1.0;
            break;
        }
        time++;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("day21"),
      ),
      body: _buildColumn(),
    );
  }

  Widget _buildColumn(a) {
    return Center(
      child: AnimatedOpacity(
        curve: Curves.fastOutSlowIn,
        opacity: _opacity,
        duration: Duration(seconds: 1),
        child: FlutterLogo(
          style: FlutterLogoStyle.horizontal,
          size: 200,),),); }}Copy the code

AnimatedPhysicalModel

1, the introduction of

AnimatedPhysicalModelControl represents a control with a shaded background animation

constructors

const AnimatedPhysicalModel({
    Key key,
    @required this.child,
    @required this.shape,
    this.clipBehavior = Clip.none,
    this.borderRadius = BorderRadius.zero,
    @required this.elevation,
    @required this.color,
    this.animateColor = true,
    @required this.shadowColor,
    this.animateShadowColor = true,
    Curve curve = Curves.linear,
    @required Duration duration,
})
Copy the code

Child: child control
Shape: Shadow shape
ClipBehavior: Clipping of shadows
- Clip.none: Indicates no mode
- Clip. HardEdge: Slightly faster clipping speed, but prone to distortion and jagged
- Clip.antiAlias: clipping edge anti-aliasing for smoother clipping. This mode is faster than antiAliasWithSaveLayer but slower than hardEdge
- Clip. AntiAliasWithSaveLayer: after cutting with anti-aliasing properties and assign the screen buffer, all subsequent operations in the buffer
BorderRadius: Border of the background
Elevation: Depth of the shadow color value
Color: background color
AnimateColor: Whether the background color is animated
ShadowColor: Animation value of the shadow
AnimateShadowColor: Whether shadows are animated
Curve: Interpolator for animation
Duration: indicates the duration of the animation

Example 3,

Widget _buildColumn(a) {
    return Center(
      child: AnimatedPhysicalModel(
        curve: Curves.fastOutSlowIn,
        color: Colors.grey.withOpacity(0.2),
        clipBehavior: Clip.antiAliasWithSaveLayer,
        borderRadius: BorderRadius.circular(12.0),
        animateColor: true,
        animateShadowColor: true,
        shape: BoxShape.rectangle,
        shadowColor: _shadowColor,
        elevation: 20.0,
        duration: Duration(seconds: 1),
        child: FlutterLogo(
          style: FlutterLogoStyle.horizontal,
          size: 200,),),); }Copy the code

AnimatedPositioned

1, the introduction of

AnimatedPositionedControl represents a control with a position change animation

constructors

const AnimatedPositioned({
    Key key,
    @required this.child,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    Curve curve = Curves.linear,
    @required Duration duration,
})
Copy the code

Child: child control
Left: left distance
Top: top distance
Right: distance to the right
-Leonard: Bottom distance
Width: indicates the width of the control
Height: Height of the control
Curve: Interpolator for animation
Duration: indicates the duration of the animation

Example 3,

Animations are played by changing the position and width of the upper left corner

class WeWidgetState extends State<WeWidget> {
  WeWidgetState() {
    Timer.periodic(Duration(milliseconds: 1000), (timer) {
      setState(() {
        switch (time % 2) {
          case 0:
            _width = 100.0;
            break;
          case 1:
            _width = 200.0;
            break;
        }
        time++;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("day23"),
      ),
      body: _buildColumn(),
    );
  }

  Widget _buildColumn(a) {
    return Stack(
      children: <Widget>[
        AnimatedPositioned(
          curve: Curves.fastOutSlowIn,
          width: _width,
          height: _width,
          top: _width,
          left: _width,
          duration: Duration(seconds: 1),
          child: FlutterLogo(
            style: FlutterLogoStyle.horizontal,
            size: 200[, [, [, [, [, [. }}Copy the code

AnimatedSize

1, the introduction of

AnimatedSizeControl represents a control with a sizing animation

constructors

const AnimatedSize({
    Key key,
    Widget child,
    this.alignment = Alignment.center,
    this.curve = Curves.linear,
    @required this.duration,
    this.reverseDuration,
    @required this.vsync,
})
Copy the code

Child: child control
Alignment: Indicates the alignment of child controls
Curve: Interpolator for animation
Duration: indicates the duration of the animation
ReverseDuration: indicates the duration of the inverted animation
Vsync: indicates whether vSYNC is enabled

Example 3,

class WeWidgetState extends State<WeWidget>
    with SingleTickerProviderStateMixin {
  WeWidgetState() {
    Timer.periodic(Duration(milliseconds: 1000), (timer) {
      setState(() {
        switch (time % 2) {
          case 0:
            _width = 100.0;
            break;
          case 1:
            _width = 200.0;
            break;
        }
        time++;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("day24"),
      ),
      body: _buildColumn(),
    );
  }

  Widget _buildColumn(a) {
    return Center(
      child: AnimatedSize(
        alignment: Alignment.center,
        curve: Curves.fastOutSlowIn,
        vsync: this,
        duration: Duration(seconds: 1),
        reverseDuration: Duration(seconds: 2), child: FlutterLogo( style: FlutterLogoStyle.horizontal, size: _width, ), ), ); }}Copy the code

The author

Hensen_

A review of Flutter Animation &Motion Widgets

AnimatedDefaultTextStyle

AnimatedListState/AnimatedList

AnimatedModalBarrier

AnimatedOpacity

AnimatedPhysicalModel

AnimatedPositioned

AnimatedSize

The author

Related Posts

May you survive loneliness, hidden under the stars of the sea

Vscode plug-in development guide (four) – combat – automatic completion implementation

Narrative visualization and data video