Animation 如何使用anime.js反向设置svg动画?

Animation 如何使用anime.js反向设置svg动画?,animation,svg,anime.js,Animation,Svg,Anime.js,我从anime.js文档中调整了SVG动画的示例: 我正在尝试将单词从单词的末尾画到单词的开头。Anime.js能做到这一点吗方向:“反转”没有像我希望的那样工作。它以相反的方式设置动画,但以完整的svg开始,以零结束 我也有这样的想法,如果动画不能做到这一点,是否有一个解决方案来反向重画SVG 谢谢大家!:-) SVG掩码解决方案 我们的想法是先用遮罩隐藏单词,然后使用遮罩的笔划dashoffset动画逐渐显示单词。 遮罩将有一条宽的线来显示底部单词,在单词的不同部分有不同的线宽 为此,我们

我从anime.js文档中调整了SVG动画的示例:

我正在尝试将单词从单词的末尾画到单词的开头。Anime.js能做到这一点吗<代码>方向:“反转”没有像我希望的那样工作。它以相反的方式设置动画,但以完整的svg开始,以零结束

我也有这样的想法,如果动画不能做到这一点,是否有一个解决方案来反向重画SVG

谢谢大家!:-)

SVG掩码解决方案 我们的想法是先用遮罩隐藏单词,然后使用遮罩的
笔划dashoffset
动画逐渐显示单词。
遮罩将有一条宽的线来显示底部单词,在单词的不同部分有不同的线宽

为此,我们需要在向量编辑器中绘制一条中心线,重复较低单词的所有弯曲

图中的红线是遮罩宽线的中心线

正文{
高度:100vh;
宽度:100%;
背景色:#35dad2;
显示器:flex;
证明内容:中心;
对齐项目:居中;
对齐内容:居中对齐;
}
svg{
宽度:40em;
}
#话{
填充物:白色;
}
#msk{
填充:无;
冲程:#fff;
笔画宽度:12;
行程阵列:1100px;
行程偏移:1100px;
}