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),
);
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;
}
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)