我想添加褪色'blob' - PNG太大了，有什么选择吗？

时间：2011-09-11 20:36:59

标签： jquery flash

我想做一个很好的效果，可以这样做： enter image description here

到目前为止，我在photoshop中为每种颜色制作了一个单独的图层，我希望这些图层慢慢淡入淡出。但问题是，如果我使用PNG，每个blob大约是140KB。有没有更好的选择，比如在向量中执行此操作并在jquery中模糊它？谢谢:)）

2 个答案:

答案 0 :(得分：1)

JEP。

看看svg。没有任何图像，浏览器呈现它

SVG支持动画（声明性）和完整的javascript脚本（使用与html相同的DOM访问）。

请注意，上述浏览器支持显示已过时。许多高级SVG演示在我的Opera浏览器中完美运行

Blurring 

<html>
<body>

<p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

</body>
</html>

Gradients 

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:0" />
      <stop offset="1000%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

</body>
</html>

Fading (animation) 

<html>
<body>

<p><b>Note:</b> This example only works in Firefox and Google Chrome.</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="20" y="20" width="250" height="250" style="fill:blue">
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

</body>
</html>

答案 1 :(得分：1)

下面几分钟的工作，但我仍然没有找到它作为最佳解决方案...我已经克服了简单渐变的模糊问题 - 更快...褪色应该是JavaScripted。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,0,0); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:0" />
    </radialGradient>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:0" />
    </radialGradient>
    <radialGradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,255,255); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:0" />
    </radialGradient>
    <radialGradient id="grad4" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,255); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:0" />
    </radialGradient>
  </defs>  
  <rect width="100%" height="100%"  style="fill:gray;stroke-width:1;stroke:rgb(0,0,0)" />

  <circle cx="300" cy="200" r="300"  fill="url(#grad1)" >
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
  </circle>
  <circle cx="700" cy="600" r="200"  fill="url(#grad2)" >
    <animate attributeType="CSS" attributeName="opacity" from="0" to="1" dur="2s" repeatCount="indefinite" />
  </circle>
  <circle cx="100" cy="400" r="150"  fill="url(#grad3)" >
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" />
  </circle>
  <circle cx="400" cy="700" r="500"  fill="url(#grad4)" >
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="7s" repeatCount="indefinite" />
  </circle>

</svg>
相关问题
最新问题