时间戳

首页 > 解决方案 > 模拟颤动的 z-index 效果

flutter - 模拟颤动的 z-index 效果

问题描述

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

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

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

我试图做这样的事情：

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

有点工作，但因为我需要在中间对齐的文本o只在短语中使用隐藏的单词，所以调整对齐方式（或不调整对齐方式）将是一场噩梦

标签： flutteranimationstack

解决方案

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

切口需要沿着你的荧光棒移动以产生预期的效果。查看此示例以了解它是否是合适的解决方案。

推荐阅读