时间戳

首页 > 解决方案 > 内联 SVG 动画功能

animation - 内联 SVG 动画功能

问题描述

我想知道这支笔是否可以通过内联 SVG 动画 (SMIL) 创建——无需 CSS 或任何 javascript。特别感兴趣的是使发光圆圈的模糊和起伏，以及非常自然地淡入和淡出不透明的随机浮动能量粒子。请帮忙！

继续削减到下面，但它不那么复杂:(

<g id="particle1">
<animateTransform
attributeName="transform"
type="translate"
values="0 0; -10 0; 0 0; 10 0"
dur="3s"
repeatCount="indefinite"/>
<g>
  <circle cx="100" cy="200" r="2.5" fill="#899dff">
    <animateTransform
    attributeName="transform"
    type="translate"
    from="0 0"
    to="0 -200"
    dur="3s"
    repeatCount="indefinite"/>
    <animate attributeName="opacity"
        from="1" to="0" dur="3s"
        repeatCount="indefinite"/>
  </circle>
</g>
</g>

<g id="particle2">
<animateTransform
attributeName="transform"
type="translate"
values="0 0; 15 0; 0 0; -20 0"
dur="3s"
repeatCount="indefinite"/>
<g>
  <circle cx="100" cy="200" r="2.5" fill="#899dff">
    <animateTransform
    attributeName="transform"
    type="translate"
    from="25 30"
    to="25 -200"
    dur="3s"
    repeatCount="indefinite"/>
    <animate attributeName="opacity"
        from="0" to="1" dur="3s"
        repeatCount="indefinite"
        begin="2s"/>
  </circle>
 </g>
 </g>

标签： animationsvg

解决方案

我之前的评论说 SVG 中没有随机数生成器 - 嗯，这并不完全正确。过滤器中包含一个伪随机数生成<feTurbulence>器（注意seed您必须设置）。你可以使用它，通过一些创造性的调整来产生闪烁的星星。我还没有找到单独闪烁星星的变体，但这也是原版没有实现的。

所以，这里是部分答案。它不会重新创建整个笔，而只是重新创建闪烁的伪随机星星。

越大baseFrequency，您获得的星星越多，但同时您必须调整<feColorMatrix>值的最后一个数字。这是试验和错误。对我来说，这似乎有效：

baseFrequency="0.04" => values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.6 0 0 0 10 -7.8"
baseFrequency="0.1" => values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.6 0 0 0 10 -6.7"

颜色也通过颜色矩阵定义。第五个数字定义红色通道：0 等于 0，1 等于 255。第十个数字是绿色通道，第十五个数字是蓝色通道。我的星星有rgb(255, 0, 153).

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="500" width="100%">
  <defs>
    <filter id="twinkle" style="color-interpolation-filters:sRGB">
      <feTurbulence stitchTiles="stitch" seed="500" type="fractalNoise" numOctaves="2" baseFrequency="0.1" />
      <feGaussianBlur stdDeviation="2" />
      <feColorMatrix result="blob" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.6 0 0 0 10 -6.7" />
      <feGaussianBlur result="blur" stdDeviation="2" />
      <feMerge>
        <feMergeNode in="blob" />
        <feMergeNode in="blur" />
        <feMergeNode in="blur" />
      </feMerge>
    </filter>
  </defs>
  <rect height="100%" width="100%" />
  <g id="field" >
    <rect style="filter:url(#twinkle)" height="500" width="100%">
      <animate attributeName="opacity" dur="1s" repeatCount="indefinite"
               keyTimes="0;0.5;1" values="0.3;0.8;0.3" keySplines=".5 0 .4 1;.6 0 .5 1" />
      <animateTransform attributeName="transform" type="translate" dur="10s" repeatCount="indefinite"
               from="0 0" to="0 -500" />
    </rect>
  </g>
  <use xlink:href="#field" y="500" />
</svg>

推荐阅读