模拟颤动的 z-index 效果答案

【问题标题】：Simulate z-index effect on flutter模拟颤动的 z-index 效果
【发布时间】：2021-07-01 11:40:15
【问题描述】：

我在堆栈内有一个动画，其中部分文本内容被隐藏，并且仅当动画背景通过堆栈内它自身的项目上方时才可见，示例代码：

Stack(
  children: [
    Text('Something...'),
    AnimatedBackground(),
    AnimatedLightStick(),
  ],
)

这个想法是，荧光棒会沿着背景移动（实际上是隐藏文本的前景）并显示它，因为背景是使用中间透明的渐变绘制的，而且效果很好，Here 是一个例子。但我想更灵活地划分Text 小部件，以便只有一个单词或一半的文本保留在背景后面，而另一部分则不可见，这很容易做到，只需玩弄cssz-index属性，我搜索了但是没有找到类似flutter的东西，是否可以模拟这种效果只将部分文本向前？

我试图做这样的事情：

Stack(
  children: [
    Text('Hidden text...'),
    AnimatedBackground(),
    AnimatedLightStick(),
    Text('Visible text')
  ],
)

有点效果，但由于我需要在中间对齐文本，或者只在短语中使用隐藏的单词，调整对齐方式（或不调整对齐方式？）将是一场噩梦

【问题讨论】：

z 索引由children 列表中的位置定义
@pskink 是的，我知道，这就是我试图找到解决方案的原因，以便我可以破坏我的文本并包裹在一些 ZIndex 小部件中
我不认为您可以轻松地将文本分解为单词：您需要知道每个单词的呈现宽度，这并不容易获得
如果出现断句并使用z-index，我可以使用RichText并为每个TextSpan设置索引，如果没有解决方案，我将不得不像你说的那样做，但很难对齐
刚刚找到 this 解决方案，我的帮助，我会尝试根据文本大小实现一些东西

标签： flutter animation stack

【解决方案1】：

我不知道你的基于 z-index 的方法，但对于 Flutter，你可以使用 CustomClipper 来剪掉你的背景。

切割片需要沿着荧光棒移动才能产生预期的效果。查看this example 以了解它是否是一个合适的解决方案。

【讨论】：