如何在svg中实现闪烁效果

这是我的汽车背光元素，正在组合在一起。我想将分组元素设置为闪烁红色效果请帮帮我。

<g i:extraneous="self">
		<rect id="_x3C_Slice_x3E_" x="25" y="376" fill="none" width="370" height="179"/>
		<g>
		
		
		<path fill="#FFFFFF" d="M934.067,311.165c12.26,1.315,28.337,3.037,44.412,4.777c0.821,0.089,1.632,0.312,2.437,0.517
				c14.782,3.774,16.479,5.841,16.588,20.831c0.045,6.153-0.094,12.312-0.33,18.462c-0.104,2.691-0.441,5.433-4.343,5.3
				c-12.757-0.435-24.096,3.744-34.514,10.815c-2.962,2.01-5.089,2.588-8.159-0.861c-6.928-7.784-14.555-14.961-22.084-22.191
				c-8.966-8.611-20.62-10.899-32.251-12.689c-9.62-1.481-19.398-1.921-29.04-3.289c-2.269-0.322-5.744-2.283-6.011-3.922
				c-0.309-1.899,1.863-4.823,3.736-6.346c6.921-5.632,15.353-7.756,23.996-8.483C902.341,312.92,916.222,312.277,934.067,311.165z"/>
          
<path fill="#FFFFFF"d="M995.938,362.712c0.686,17.885,10.416,32.693,16.896,48.64c1.773,4.363,3.789,8.627,5.984,13.594
				c-11.115-0.752-20.116-4.749-27.361-11.47c-12.607-11.695-24.51-24.149-37.111-36.686
				C967.094,366.515,980.419,361.753,995.938,362.712z"/>
          
<path fill="#FFFFFF" d="M1015.687,485.421c-0.813,4.715-1.888,9.404-2.351,14.153c-0.34,3.49-2.639,4.195-4.724,3.059
				c-2.714-1.479-5.705-3.691-6.968-6.352c-3.524-7.421-6.233-15.231-9.236-22.897c-2.169-5.538-1.751-6.154,4.18-6.392
				C1008.343,466.518,1015.764,473.82,1015.687,485.421z"/>
          <path fill="#FFFFFF" d="M1005.334,503.453c2.788,0.592,5.757,0.801,8.263,1.988c0.855,0.405,0.547,3.267,0.771,5.006
				c-0.399,0.32-0.798,0.639-1.197,0.959c-2.851-2.272-5.702-4.544-8.554-6.816C1004.857,504.21,1005.096,503.831,1005.334,503.453z
				"/>

以下是闪烁动画的示例：http://jsfiddle.net/pLh05ypL/1/

<svg width="320" height="320" viewBox="0 0 320 320">
        <path
        fill="#FFFFFF" stroke="#000"
        d="M160,100 Q200,100,200,300 Q100,300,100,200 Z">
        <animate
            attributeType="XML"
            attributeName="fill"
            values="#800;#f00;#800;#800"
            dur="0.8s"
            repeatCount="indefinite"/>
        </path>
 </svg>

animate元素正是您所需要的。

您也可以使用CSS：http://jsfiddle.net/aruqen/yrqjo6k8/10/

<svg width="400" height="400" viewBox="0 0 400 400">
  <g>
    <rect fill="#FFFFFF" stroke="#000" x="50" y="50" width="150" height="150" />
    <rect fill="#FFFFFF" stroke="#000" x="200" y="200" width="150" height="150" />
  </g>
</svg>

@keyframes blink {
  100%,
  0% {
    fill: #500;
  }
  60% {
    fill: #f00;
  }
}
g rect {
  animation: blink 0.8s infinite;
}

使用SVG使某些东西"闪烁"需要它在某些时间是透明的，并在另一时间有一定的填充。您可以通过使用calcMode="discrete"属性使用SVG SMIL动画来实现这一点，该属性将使动画将fill属性更改为填充或透明，但不介于两者之间（tweening）。

<rect fill="transparent" width="10" height="10">
  <animate
    attributeName="fill"
    values="#cccccc;transparent"
    begin="0s"
    dur="2s"
    calcMode="discrete"
    repeatCount="indefinite"
  />
</rect>

我同意。"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);
    }
}

}

不会自我控制。如果你想运行它，你可以访问整个代码集的工作示例：

https://github.com/agent-P/LCARS-Javascript-Framework

相关内容

最新更新

热门标签：