• 我添加了一个 AnimationController 和一个Animation来处理动画。还有一个ScrollController来监视滚动位置。
• 在initState方法中，我初始化动画控制器并使用Tween定义动画范围。
• 补间定义动画的开始值和结束值。我还在滚动控制器上设置了一个监听器，以根据滚动偏移量来确定是向前还是向后播放动画。

import 'package:flutter/material.dart';
    
    class DiffSliver extends StatefulWidget {
      const DiffSliver({Key? key}) : super(key: key);
    
      @override
      State<DiffSliver> createState() => _DiffSliverState();
    }
    
    class _DiffSliverState extends State<DiffSliver>
        with SingleTickerProviderStateMixin {
      late AnimationController _animationController;
      late Animation<double> _animation;
      final ScrollController _scrollController = ScrollController();
    
      @override
      void initState() {
        super.initState();
        _animationController = AnimationController(
          vsync: this,
          duration: Duration(milliseconds: 250),
        );
        _animation = Tween<double>(begin: 0.0, end: 1.0).animate(
          CurvedAnimation(
            parent: _animationController,
            curve: Curves.easeInOut,
          ),
        );
    
        _scrollController.addListener(() {
          if (_scrollController.offset > 150) {
            _animationController.forward();
          } else {
            _animationController.reverse();
          }
        });
      }
    
      @override
      void dispose() {
        _animationController.dispose();
        _scrollController.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          body: SafeArea(
            child: NestedScrollView(
              controller: _scrollController,
              headerSliverBuilder: (context, innerBoxIsScrolled) {
                return [
                  SliverAppBar(
                    pinned: true,
                    expandedHeight: 200,
                    flexibleSpace: FlexibleSpaceBar(
                      background: Container(
                        width: 100,
                        height: 100,
                        color: Colors.blue,
                      ),
                    ),
                  ),
                  SliverPersistentHeader(
                    pinned: true,
                    delegate: AnimatedContainerDelegate(animation: _animation),
                  ),
                  SliverPersistentHeader(
                    pinned: true,
                    delegate: ContainerDelegate(),
                  )
                ];
              },
              body: Container(
                color: Colors.white,
              ),
            ),
          ),
        );
      }
    }
    
    class ContainerDelegate extends SliverPersistentHeaderDelegate {
      @override
      Widget build(
          BuildContext context, double shrinkOffset, bool overlapsContent) {
        return Padding(
          padding: const EdgeInsets.all(20.0),
          child: Container(
            width: 150,
            height: 250,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.orange,
            ),
          ),
        );
      }
    
      @override
      // TODO: implement maxExtent
      double get maxExtent => 250;
    
      @override
      // TODO: implement minExtent
      double get minExtent => 250;
    
      @override
      bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
        return false;
      }
    }
    
    class AnimatedContainerDelegate extends SliverPersistentHeaderDelegate {
      final Animation<double> animation;
    
      AnimatedContainerDelegate({required this.animation});
    
      @override
      Widget build(
        BuildContext context,
        double shrinkOffset,
        bool overlapsContent,
      ) {
        return AnimatedBuilder(
          animation: animation,
          builder: (BuildContext context, Widget? child) {
            final double paddingValue = 40.0 * (1 - animation.value);
            final EdgeInsets padding = EdgeInsets.all(paddingValue);
            final double borderRadiusValue = 20.0 * animation.value;
            final BorderRadius borderRadius = BorderRadius.only(
              bottomLeft: Radius.circular(borderRadiusValue),
              bottomRight: Radius.circular(borderRadiusValue),
            );
    
            return Container(
              margin: padding,
              decoration: BoxDecoration(
                color: Colors.yellow,
                borderRadius: borderRadius,
              ),
            );
          },
        );
      }
    
      @override
      double get maxExtent => 200;
    
      @override
      double get minExtent => 50;
    
      @override
      bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
        return true;
      }
    }

This video is output