Flutter(3)AnimatedOpacity

AnimatedOpacity透明动画

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

class Myapp extends StatelessWidget {
  const Myapp({Key? key}) : super(key: key);

  @override
  Widget 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);

  @override
  Widget 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//原地轻微跳动两下开始移动，结束时也轻微跳动两下
还有更多的可以自己尝试