持续时间之间SVG的添加剂=“和”有什么区别

Question

以下代码的区别？

为什么结果不同？

我以为是一样的。

但是，当单元实际动画时，结果不同。

 <svg width="1000" height="1000"> <circle cx="10" cy="10" r="10"> <animate attributeType="XML" attributeName="cx" dur="10s" values="100; 200; 100" repeatCount="indefinite" /> <animate attributeType="XML" attributeName="cx" dur="10s" values="0; 300; 0" repeatCount="indefinite" additive="sum" /> </circle> </svg> 

---

 <svg width="1000" height="1000"> <circle cx="10" cy="10" r="10"> <animate attributeType="XML" attributeName="cx" dur="19s" values="100; 200; 100" repeatCount="indefinite" /> <animate attributeType="XML" attributeName="cx" dur="1s" values="0; 300; 0" repeatCount="indefinite" additive="sum" /> </circle> </svg> 

Answer 1

它不是时间的累加，如果这就是您的想法，则不是属性（cx）的值。

由于您同时运行2个动画，因此cx将作为每个动画上cx值的组合而建立。

在第二个示例中。 由于其中一个动画只有1秒长，因此它会在较慢的动画之上快速波动。

如果您暂时忘记了添加剂，只需将两个第二个cx值都替换为cy，您就会明白为什么动画也从根本上有所不同。