javascript - GoJS 中的动画图标

Question

我有一个包含图标的节点图:

$(go.TextBlock, {
  font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',
  margin: new go.Margin(0, 5, 0, -34),
},
  new go.Binding('text', 'statusIcon')),

我想无限旋转 statusIcon，但前提是 statusIcon匹配一个值。
我已经查看了如何添加这样的 CSS 规则。

font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',      
margin: new go.Margin(0, 5, 0, -34),animation:'spin 4s linear infinite';

但我得到一个错误

Trying to set undefined property "animation" on object: TextBlock

我想 gojs 只接受很少的 css 规则 TextBlock .
如何仅将动画添加到节点子元素？

Answer 1

我创建了一个 StackBlitz 示例 here .

$(go.TextBlock, {
  font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',
  margin: new go.Margin(0, 5, 0, -34),
},
  new go.Binding('text', 'statusIcon'),
  new go.AnimationTrigger("angle")),

animate() {
    this.dia.commit(diag => {
      var node = this.dia.nodes.first();
      var textblock = node.findObject("TEXTBLOCK_TO_ROTATE");
      textblock.angle = textblock.angle + 30;
    });
  }

动画不是您在上面使用的属性。如果你想旋转，你应该使用 AnimationTrigger和 angle属性(property)。
我做了一个简单的例子来使用 GoJS 动画，你可以应用 TextBlock 的节点模板中的代码和你想要的动画方法。
有关更多信息，您可以按照说明和示例 here .