Flutter(3)AnimatedOpacity

AnimatedOpacity透明动画

可以对一个颜色的透明度进行调整

class Myapp extends StatelessWidget {const Myapp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,home: Scaffold(body: Center(child: AnimatedOpacity(opacity: 1, //颜色透明度,1是全部显示,0是完全透明,0.5是一半透明duration: Duration(seconds: 1),child: Container(width: 300,height: 300,color: Colors.blue,),),),),);}
}

除此之外还可以设置动画曲线

curve:

class Myapp extends StatelessWidget {const Myapp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,home: Scaffold(body: Center(child: AnimatedOpacity(curve: Curves.bounceIn,//动画曲线opacity: 1, //颜色透明度,1是全部显示,0是完全透明,0.5是一半透明duration: Duration(seconds: 1),child: Container(width: 300,height: 300,color: Colors.blue,),),),),);}
}

效果是:

具体还有很多曲线效果如:

curve:Curves.linear//这是他的默认值，动画过程中速度保持一致
curve:Curves.ease//缓解，动画过程较快，结束时变慢
curve:Curves.decelerate//类似缓降效果
curve:Curves.easeIn//结束的时候比较僵硬，和缓降差不多
(有意思)curve:Curves.easeInBack//先回后退一点然后发射出去，和🏹️一样
(有意思)curve: Curves.elasticIn//线往后退两次(一次比一次远),在像🏹️一样发射出去(但是仅仅限于从下向上)
(有意思)curve:Curves.bounceIn//原地弹跳两下后移动到指定位置
(有意思)curve:Curves.bounceOut//开始时正常移动,结束的时候弹跳两下
(有意思)curve:Curves.bounceInOut//原地轻微跳动两下开始移动，结束时也轻微跳动两下
还有更多的可以自己尝试

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！