如何在 KonvaJs 中使文本从 0% 显示到 100%（折叠效果）

【问题标题】：How to make a text appear from 0 to 100% (fold out effect) in KonvaJs如何在 KonvaJs 中使文本从 0% 显示到 100%（折叠效果）
【发布时间】：2018-09-26 09:25:18
【问题描述】：

在 KonvaJS 中如何使文本从 0% 显示到 100%（折叠效果）

我想创建与以下视频相同的效果，但带有文字 https://www.youtube.com/watch?v=HO6mco2MGH0

我尝试为节点指定宽度 0，然后在补间中将宽度增加到 100%。但这并没有给我想要的效果。文本是逐个字符出现的。

TIA

【问题讨论】：

标签： konvajs

【解决方案1】：

对于这种情况，您可以使用group clipping。

const group = new Konva.Group({
  clipX: 100,
  clipY: 0,
  clipWidth: 100,
  clipHeight: 100
});
layer.add(group);

const circle = new Konva.Circle({
  x: 0,
  y: 50,
  radius: 50,
  fill: 'green'
});
group.add(circle);

circle.to({
  x: 150,
  duration: 1
});

演示：http://jsbin.com/miketotuvo/1/edit?html,js,output

【讨论】：