Animation 如何在相同的屏幕路径上创建英雄风格的动画？

我正在尝试创建一个上面的模型中描述的动态动画。我需要的是：

• 表示化身的圆形（例如，用户pic）
• 在它下面居中的文字
• 在那些（使用一半屏幕的）页面下方是一个可滚动的

  页面视图

动画应如下所示：

开始：在

堆栈中

都位于开始的中心。
动画：缩小并滑动必须位于化身右侧的文本（长度可变）。
结束：作为模型中的第二个图像。边到边，而下面的内容保持滚动

将

SliverPersistentHeader

与

CustomMultiChildLayout

结合使用，但问题是文本开始居中，结束向左对齐，我可以动态设置动画。我试图在最后删除居中文本的偏移量，但感觉不对

---

任何帮助或仅与此动画示例将不胜感激。多谢各位

您将需要一个小条来根据滚动偏移设置布局动画。更具体地说，在你的情况下

但这不是必需的，您可以使用tweens和align/padding/stuff获得相同的结果。但是如果你的布局开始变得太复杂，你可以试一试

诀窍是使用SliverPersistentHeader给出的滚动偏移量来计算当前进度。然后使用该级数将元素定位在其原始位置和最终位置之间

以下是一个原始示例：

类转换Appbar扩展了无状态小部件{
最终小工具化身；
最终小部件标题；
const TransitionAppBar（{this.avatar，this.title，Key}）：super（Key:Key）；
@凌驾
小部件构建（构建上下文）{
回程滑动头(
对,，
代表：_TransitionAppBarDelegate(
阿凡达：阿凡达，
标题:标题,，
),
);
}
}
类_TransitionAppBarDelegate扩展SliverPersistentHeaderDelegate{
最终的(虚拟世界)=
中间尺寸（开始：尺寸（150.0，150.0），结束：尺寸（50.0，50.0））；
最终_avatarMarginTween=
EdgeInSetTween（开始：EdgeInsets.zero，结束：仅限EdgeInsets.only（左：10.0））；
决赛=
对齐二者（开始：对齐.topCenter，结束：对齐.centerLeft）；
最终标题精加工间=边缘精加工间(
开始：仅限边集（顶部：150.0+5.0），
结束：仅边缘设置（左：10.0+50.0+5.0））；
最后一题=
对齐之间（开始：对齐.居中，结束：对齐.居中左）；
最终小工具化身；
最终小部件标题；
_TransitionAppBarDelegate（{this.avatar，this.title}）
：assert（化身！=null），
断言（标题！=null）；
@凌驾
小部件构建(
BuildContext上下文、双收缩偏移、布尔重叠内容）{
最终进度=收缩偏移/200.0；
最终虚拟化=_avatarTween.lerp（进度）；
final avatarMargin=\u avatarMarginTween.lerp（progress）；
final avatarAlign=_avatarAlignTween.lerp（进度）；
最终titleMargin=_titleMarginTween.lerp（进度）；
最终标题对齐=_titleAlignTween.lerp（进度）；
返回堆栈(
fit:StackFit.expand，
儿童：[
填充物(
填充：阿凡达精，
子对象：对齐(
对齐：虚拟签名，
child:SizedBox.fromSize（大小：avatarSize，child:avatar），
),
),
填充物(
填充：titleMargin，
子对象：对齐(
校准：titleAlign，
子项：DefaultTextStyle(
样式：Theme.of（context.textTheme.title，child:title），
),
)
],
);
}
@凌驾
double get maxExtent=>200.0；
@凌驾
double-get-minExtent=>100.0；
@凌驾
布尔应该重建（\u TransitionAppBarDelegate oldDelegate）{
返回化身！=oldDelegate.avatar | | title！=oldDelegate.title；
}
}

可与CustomScrollView一起使用：

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      TransitionAppBar(
        avatar: Material(
          color: Colors.blue,
          elevation: 3.0,
        ),
        title: Text("Hello World"),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
          return ListTile(
            title: Text('$index'),
          );
        }),
      )
    ],
  ),
);

脚手架(
正文：自定义滚动视图(
条子：[
过渡ppbar(
阿凡达：材料(
颜色：颜色，蓝色，
标高：3.0，
),
标题：文本（“你好世界”），
),
银表(
委托：SliverChildBuilderDelegate（（上下文，索引）{
返回列表块(
标题：文本（“$index”），
);
}),
)
],
),
);

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      TransitionAppBar(
        avatar: Material(
          color: Colors.blue,
          elevation: 3.0,
        ),
        title: Text("Hello World"),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
          return ListTile(
            title: Text('$index'),
          );
        }),
      )
    ],
  ),
);