DEV Community

kalokli8
kalokli8

Posted on

What are those curve values in staggered menu animation?

https://docs.flutter.dev/cookbook/effects/staggered-menu-animation

In the above official doc, it does not explain this code

final animationPercent = Curves.easeOut.transform(_itemSlideIntervals[i].transform(
_staggeredController.value),
);
Enter fullscreen mode Exit fullscreen mode
List<Widget> _buildListItems() {
  final listItems = <Widget>[];
  for (var i = 0; i < _menuTitles.length; ++i) {
    listItems.add(
      AnimatedBuilder(
        animation: _staggeredController,
        builder: (context, child) {
          final animationPercent = Curves.easeOut.transform(
            _itemSlideIntervals[i].transform(_staggeredController.value),
          );
          final opacity = animationPercent;
          final slideDistance = (1.0 - animationPercent) * 150;

          return Opacity(
            opacity: opacity,
            child: Transform.translate(
              offset: Offset(slideDistance, 0),
              child: child,
            ),
          );
        },
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 36, vertical: 16),
          child: Text(
            _menuTitles[i],
            textAlign: TextAlign.left,
            style: const TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ),
    );
  }
  return listItems;
}

Enter fullscreen mode Exit fullscreen mode

After some studying, these three values are all between 0.0 to 1.0.

_staggeredController.value represents the current progress of the overall animation,

_itemSlideIntervals[i].transform(_staggeredController.value) is used to control the timing of the animation for each menu item, and

Curves.easeOut.transform(_itemSlideIntervals[i].transform(_staggeredController.value)) applies an easing curve to the animation.

Top comments (0)