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

我想只有少数 css 规则被 gojs 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 属性。
我做了一个使用 GoJS 动画的简单示例，您可以根据需要应用 TextBlock 节点模板中的代码和动画方法。

更多信息，您可以按照说明和示例进行操作here。

GoJS 中的动画图标

Animate icon in GoJS

javascript

gojs