Flutter SliverAnimatedOpacity 透明渐变动画效果

我就是我 2023-10-07 16:53 51阅读 0赞

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

SliverAnimatedOpacity 是一个轻量级的实现渐变动画效果的组件，是在 CustomScrollView 中使用的组件  
本文章实现的效果是  
![在这里插入图片描述][cf55413536894d40bceabe132655889c.gif_pic_center]

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 从入门 到精通系列文章在这里][Flutter _]
 *  [当然也必需是要有源码的 在这里了][Link 1]
 *  [github 有点慢 不妨来看看码云的源码吧][github _]
 *  [系列学习教程在这里][Link 2]

[cf55413536894d40bceabe132655889c.gif_pic_center]: https://img-blog.csdnimg.cn/cf55413536894d40bceabe132655889c.gif#pic_center
[Flutter _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[Link 1]: https://gitee.com/android.long/flutter-ho/blob/279b5185f50a3379c71a74fc6c51b421f59c0354/lib/src/pages/demo/demo18/demo_DateRangPage.dart
[github _]: https://github.com/zhaolongs
[Link 2]: https://study.163.com/instructor/1021406098.htm?_trace_c_p_k2_=09d88ef1f37645abadcc2b58620d4b00