以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  svg绘制的气球动画，很美~  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=35847)

--  作者：tamefox
--  发布时间：7/20/2006 3:42:00 PM

--  svg绘制的气球动画，很美~
<svg width="100%" height="100%"
 xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
  onload="startup(evt)"
>
<script>
<![CDATA[
 var svgDocument;
  balloon=null;
  count=0
  running=true
  xlow=-200
  xhigh=100
  x=xlow
  incr=5
  dir=1
  xdir=1
  ydir=1
  xspeed=.7
  yspeed=.4
  xcur=50
  ycur=50
  ylow=-25
  yhigh=100
  numlines=35
  rightedge=null
  Hi=new Array()
  Up=new Array()
  bottomedge=null
  svgns = 'http://www.w3.org/2000/svg';
  xlinkns = 'http://www.w3.org/1999/xlink';
function startup(evt) {
 O=evt.target
 O.setAttribute("onclick","running=!running;animate()")
 svgDocument = O.ownerDocument;
 balloon = svgDocument.getElementById("balloon");
 path=svgDocument.getElementById("Q")
 A=getDisplaySize()
 rightedge=A.width
 bottomedge=A.height - 40
 sky=svgDocument.getElementById("sky")
 sky.setAttribute("cy",50)
 sky.setAttribute("cx",rightedge/2)
 sky.setAttribute("r",rightedge/1.45)
 draw("peaks2",7,90,30)
 draw("peaks",10,80,25)
 draw("mountains",15,55,22)
 draw("foothills",22,35,15)
 
 moredraw();
}
function getDisplaySize()
{
//function due to G. Wade Johnson <svg-developers.yahoogroups.com>
//Date: Mon, 12 Dec 2005 20:57:49 -0600
//Subject: Re: [svg-developers] Screen extents
    var extents = null;
    try{
        var view = document.documentElement.viewport;
        extents = {width: view.width,height: view.height};
    }
    catch(e){
        extents = {width: window.innerWidth, height: window.innerHeight};
    }
    return extents;
}
P=new Array()
offset=50
function draw(id,humps,hi,up){
 IDS[IDS.length]=id
 Hi[id]=hi
 Up[id]=up
 var peaks=3*humps
 P[id]=new Array;
 t=svgDocument.getElementById(id)
 for (i=0;i<peaks;i++){
  P[id][i]= {x: Math.floor(Math.random()*(rightedge+2*offset)-offset),
    y: Math.floor(Math.random()*hi)+up};
 }
 P[id].sort(compare)
 s=render(P[id],0)
 t.setAttribute("d",s)
}
function compare(x,y){
 if (x.x<y.x) return -1
 else return 1
}
function render(Arr,lo){
 
 var low=Math.floor(bottomedge*.9)
 var s="M "+(-offset)+" "+(low)+" "
 s+=(7-offset)+" "+(low - Arr[0].y)+" "
 for (i=1;i<Arr.length;i++){
  if ((i)%3==0) s+="C "+Arr[i].x+" "+(low - Arr[i].y)+" "
  else
  s+=Arr[i].x+" "+(low - Arr[i].y)+" "
 }
 s+="L "+(rightedge+offset)+" "+(low )+" Q "+(rightedge/2)+" "+(low)+" "+(-offset)+" "+(low)+" z"
 return s
}
function moredraw(){
 for (j=0;j<numlines;j++) another(100+j*10)
 Pa = svgDocument.createElementNS(svgns,"path");
 Pa.setAttribute("d", "M 194 340 C 185 360 215 360 206 340");
 Pa.setAttribute("stroke", "#440")
 Pa.setAttribute("stroke-width", "3")
 Pa.setAttribute("fill", "#551")
 balloon.appendChild(Pa);
 animate()
}
var xlinkns = "http://www.w3.org/1999/xlink";
function another(x){
 Pa = svgDocument.createElementNS(svgns,"path");
 Pa.setAttribute("id", "P"+count); count++
 Pa.setAttribute("d", "M 100 0 C 200 200 300 200 100 300");
 Pa.setAttribute("stroke", color(16,16,12))
 Pa.setAttribute("stroke-width", "5")
 Pa.setAttribute("fill", "none")
 balloon.appendChild(Pa);
}
function animate(){
 if (!running) return
 x+=incr*dir
 if ((x<xlow+incr)||(x>xhigh+incr))dir=-dir
 onestep(x)
 window.setTimeout("animate()",10)
}
IDS=new Array
mea=0
function onestep(x){
 mea++
 balloon.setAttribute("transform","translate("+xcur+","+ycur+")")
 for (i=0;i<count;i++){
  Pa = svgDocument.getElementById("P"+i);
  Pa.setAttribute("d", "M 200 20 C "+((i*18)+x)+" 100 "+(220- x/2)+" 250 200 340 ");
 }
 adj=0
 for (id in IDS){
  for (j=0;j<P[IDS[id]].length;j++){
   P[IDS[id]][j].x-=(adj*adj/4+1)/2
  }
  adj++
  if(P[IDS[id]][3].x<0){
   st=rightedge+offset
   for (k=0;k<3;k++){
    newx=st+Math.ceil(80*Math.random()/P[IDS[id]].length)
    Q={x: newx,
     y: Math.floor(Math.random()*Hi[IDS[id]]+Up[IDS[id]])}
     st=newx
    P[IDS[id]].push(Q);
    R=P[IDS[id]].shift()
   }
  }
  s=render(P[IDS[id]],R.y)
  t=svgDocument.getElementById(IDS[id])
  t.setAttribute("d",s)
 }
 xcur=xcur+xspeed*xdir
 ycur=ycur+yspeed*ydir
 if((xcur<xlow+150)||(xcur>rightedge/1.5)) xdir=-xdir
 if((ycur<ylow)||(ycur>yhigh)) ydir=-ydir
 if (Math.floor(xcur)%10==0)recolorone(color(16,12,8))
 if (Math.floor(xcur)%20==1)recolorone(color(16,16,0))
 if (Math.floor(xcur)%30==2)recolorone("#da0")
}
first=true
function recolorone(c){
 r=Math.floor(Math.random()*count)
 Pa = svgDocument.getElementById("P"+r);
 Pa.setAttribute("stroke",c);
}
function color(xr,xg,xb){
 r=Math.floor(Math.random()*xr)
 R=r.toString(16)
 g=Math.floor(Math.random()*xg)
 G=g.toString(16)
 b=Math.floor(Math.random()*xb)
 B=b.toString(16)
 return "#"+R+B+G
}
 //]]>
</script>
<def>
<path id="Q" stroke="black" stroke-width="3"/>
<linearGradient id="backsky" x1="0%" y1="0%" x2="0%" y2="100%">
 <stop offset="0" stop-color="#888"/>
 <stop offset=".5" stop-color="#0ff"/>
 <stop offset=".9"  stop-color="#ec7"/>
 
 
</linearGradient>
<radialGradient id="sky" cx="500" cy="300" r="500" gradientUnits="userSpaceOnUse">
 <stop  offset="0" stop-color="#0ff" stop-opacity="1"/>
 <stop  offset=".2" stop-color="#0ff" stop-opacity=".6"/>
 <stop  offset=".71" stop-color="#000" stop-opacity="0"/>
 <stop  offset=".80" stop-color="#8ff" stop-opacity="1"/>
</radialGradient>
<linearGradient id="peak2" x1="0%" y1="0%" x2="0%" y2="100%">
 <stop offset="0" stop-color="#eff"/>
 <stop offset=".2" stop-color="#9cd"/>
 <stop offset=".4" stop-color="#88b"/>
 <stop offset=".9" stop-color="#9a9"/>
</linearGradient>
<linearGradient id="peak" x1="0%" y1="0%" x2="0%" y2="100%">
 <stop offset="0" stop-color="#ddc"/>
 <stop offset=".2" stop-color="#998"/>
 <stop offset=".4" stop-color="#a8b"/>
 <stop offset=".9" stop-color="#aa6"/>
</linearGradient>
<linearGradient id="mount" x1="0%" y1="0%" x2="0%" y2="100%">
 <stop offset="0" stop-color="#589"/>
 <stop offset=".2" stop-color="#869"/>
 <stop offset=".6" stop-color="#898"/>
</linearGradient>

<linearGradient id="foot" x1="0%" y1="0%" x2="0%" y2="100%">
 <stop offset="0" stop-color="#b87"/>
 <stop offset=".1" stop-color="#b63"/>
 <stop offset=".70" stop-color="#c86"/>
 <stop offset=".90"  stop-color="#bc7"/>
</linearGradient>
</def>
<rect  height="100%" width="100%" opacity="1" fill="url(#backsky)"/>

<path id="peaks2" d="M 0 500 400 400 800 500 z" fill="url(#peak2)" />
<path id="peaks" d="M 0 500 400 400 800 500 z" fill="url(#peak)" />
<path id="mountains" d="M 0 500 400 400 800 500 z" fill="url(#mount)" />

<path id="foothills" d="M 0 500 400 400 800 500 z" fill="url(#foot)" stroke="none"/>
<rect  height="100%" width="100%" opacity="1" fill="url(#sky)"/>
<g id="balloon" opacity="0.7">
</g>
</svg>

具体效果可查看：
http://srufaculty.sru.edu/david.dailey/svg/balloon.svg

--  作者：wlzm
--  发布时间：11/29/2006 5:33:00 AM

--  
楼主 给的代码有问题
--  作者：tamefox
--  发布时间：11/29/2006 3:17:00 PM

--  
不好意思，其中有两行末尾的  '  发表后变成了 '
改一下这两个地方就好了！另外你可以直接访问我给你的网址，看效果！
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 46.875ms