Flutter SliverAnimatedOpacity 透明渐变动画效果

Posted 2021-09-01 早起的年轻人

志在巅峰的攀登者，不会陶醉在沿途的某个脚印之中，在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

SliverAnimatedOpacity 是一个轻量级的实现渐变动画效果的组件，是在 CustomScrollView 中使用的组件
本文章实现的效果是

  const SliverAnimatedOpacity({
    Key? key,
    this.sliver,
    required this.opacity,
    Curve curve = Curves.linear,
    required Duration duration,
    VoidCallback? onEnd,
    this.alwaysIncludeSemantics = false,
  }) 

• sliver 子Widget ,要求 Sliver家族的组件
• opacity 透明度 ，从 0.0 ~ 1.0 ,变化时，子 Widget 动态效果
• curver 动画曲线
• duration 动画的时间
• onEnd 动画执行完成回调的方法

使用 Demo 如下

class DemoAnimatedOpacity extends StatefulWidget {
  @override
  _DemoAnimatedOpacityState createState() => _DemoAnimatedOpacityState();
}

class _DemoAnimatedOpacityState extends State<DemoAnimatedOpacity> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("这里是首页")),
      body: CustomScrollView(
        slivers: [
          SliverAnimatedOpacity(
            //动画执行完毕
            onEnd: () {},
            //动画曲线
            curve: Curves.fastOutSlowIn,
            //透明度
            opacity: 1.0,
            //动画时间
            duration: Duration(seconds: 2),
            //子 Widet
            sliver: SliverFixedExtentList(
                delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  return Container(
                    color: index % 2 == 0
                        ? Colors.deepOrange[200]
                        : Colors.deepOrange[400],
                    child: Text("早起的年轻人"),
                  );
                }),
                itemExtent: 100.0),
          )
        ],
      ),
    );
  }
}

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

• Flutter 从入门 到精通系列文章在这里
• 当然也必需是要有源码的 在这里了
• github 有点慢 不妨来看看码云的源码吧
• 系列学习教程在这里