Question

在KonvaJS中，如何使文本显示为0到100％（折叠效果）

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

我尝试给节点设置宽度0，然后在补间中将宽度增加到100％。但这并没有给我想要的效果。文字逐个字符显示。

TIA

Answer 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

如何使文本在KonvaJs中从0到100％出现（折叠效果）

1 个答案: