[Animation widget] Flutter SlideTransition

Hello everyone, I am 17.

SlideTransition is a widget that produces animation effects according to the change of position. Some widgets have animation effects based on SlideTransition, so SlideTransition is a very important animation widget.

Introduction to SlideTransition

SlideTransition inherits from AnimatedWidget , and
the change of position is realized by FractionalTranslation . The dx,dy of the parameter Offset(dx,dy) is a proportional value.

Like FractionalTranslation , the position is already determined during the layout phase. To control the display range, you can use ClipRect

Use SlideTransition

const SlideTransition({
    
    
    super.key,
    required Animation<Offset> position,
    this.transformHitTests = true,
    this.textDirection,
    this.child,
  })

1. position Scale factor for position. For example, 0.5 means to offset 50% of width to the right.
2. transformHitTests defaults to true. Whether to convert the position of pointerEvent

final Offset transformedPosition = offset == null ? position : position - offset;

The result of the conversion is to subtract the offset during drawing, which is equivalent to eliminating the influence caused by the offset, so child hitTest passes. The entire area responds to clicks. transformHitTests If it is false, the overflow part cannot pass hitTest, because the position of pointerEvent is outside the range of child size.

3. Don't worry about textDirection, we usually go from left to right.

example

class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with SingleTickerProviderStateMixin {
    
    
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);
  late final Animation<Offset> _offsetAnimation = Tween<Offset>(
    begin: const Offset(-1, -1.0),
    end: const Offset(1, 1.0),
  ).animate(CurvedAnimation(
    parent: _controller,
    curve: Curves.elasticIn,
  ));

  @override
  void dispose() {
    
    
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    
    
    return SlideTransition(
      position: _offsetAnimation,
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: FlutterLogo(size: 150.0),
      ),
    );
  }
}

The animation track in this example is a slanted straight line from upper left to lower right. In fact, SlideTransition can only move in a straight line. If you want the SlideTransition child to respond to clicks during motion, in addition to ensuring that transformHitTests is true, you also need all parents to include the entire motion trajectory of the child.

Thoughts on SlideTransition user experience

transformHitTests is true by default, if the animation is slow, the user can accurately click on the position in the child. But if the animation is fast, it is difficult for the user to click on the position in the child, and the child may have gone to another position when the response is made. At this time, it is best to set transformHitTests to false. Only allow the user to click on the final position of the child. If the animation is done only once, then the final position is already stopped. If it is a repeated animation, there is no problem, because no matter where the child is, as long as you click this position, it will be successful.

The final position refers to position(0,0).

If the animation starts from position(0,0), then the click position can be set at the initial position.