尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

第10篇 Flutter 交错动画:优雅的序列动效

第10篇 Flutter 交错动画:优雅的序列动效 第10篇 Flutter 交错动画优雅的序列动效写在前面今天想和你聊聊 Flutter 中让多个动画依次播放的技术——交错动画。在我眼里交错动画就像是指挥家手中的指挥棒让每一个动画元素按节奏依次登场。什么是交错动画交错动画让多个动画按照一定的时间间隔依次执行创造出优雅的序列效果。AnimationController( vsync: this, duration: Duration(milliseconds: 1000), ); Interval(0.0, 0.5, curve: Curves.easeOut)实际应用列表项依次出现ListView.builder( itemBuilder: (context, index) { return AnimatedBuilder( animation: controller, builder: (context, child) { return FadeTransition( opacity: Tween(begin: 0.0, end: 1.0) .animate(CurvedAnimation( parent: controller, curve: Interval(index * 0.1, 1.0), )), child: child, ); }, ); }, )写在最后Flutter 交错动画让界面更加生动有趣。记住像素不能偏差 1px。
返回列表