我同意。 " animate" SVG元素就是你想要的。对于任何想要使用javascript来设置这种动画并进行管理的人来说,这是我使用的方法:
const BLINK_DURATION_ERROR = "0.5s";
const BLINK_DURATION_WARNING = "0.75s";
var svgNS = "http://www.w3.org/2000/svg";
LCARSComponent.prototype.setBlinking = function(enabled, color, duration) {
/** If the duration argument is null, set a default blink duration. */
if(duration == null) {
duration = BLINK_DURATION_WARNING;
}
/** If blinking is enabled... */
if(enabled) {
/** Create the DOM object for shape animation, and set its attributes. */
this.animateElement = document.createElementNS(svgNS, "animate");
this.animateElement.setAttribute("attributeType", "XML");
this.animateElement.setAttribute("attributeName", "fill");
this.animateElement.setAttribute("values", this.getBlinkColors(color));
this.animateElement.setAttribute("dur", duration);
this.animateElement.setAttribute("repeatCount", "indefinite");
/** Append the animation element to the shape element. */
this.shapeElement.appendChild(this.animateElement);
/** Create the DOM object for the shape's text animation, and set its attributes. */
this.textAnimateElement = document.createElementNS(svgNS, "animate");
this.textAnimateElement.setAttribute("attributeType", "XML");
this.textAnimateElement.setAttribute("attributeName", "fill");
this.textAnimateElement.setAttribute("values", "#000;" + LCARS.getTextColor(color));
this.textAnimateElement.setAttribute("dur", duration);
this.textAnimateElement.setAttribute("repeatCount", "indefinite");
/** Append the animation element to the text element. */
this.textElement.appendChild(this.textAnimateElement);
}
/** Else if blinking is not enabled... */
else {
/** If the shape animate element exists, remove it. */
if(this.animateElement != null) {
this.shapeElement.removeChild(this.animateElement);
}
/** If the text animate element exists, remove it. */
if(this.textAnimateElement != null) {
this.textElement.removeChild(this.textAnimateElement);
}
}
}
不会自我控制。如果要运行它,可以使用以下工作示例访问整组代码: