<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
[返回] 计算机科学论坛 →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → svg绘制的气球动画，很美~
(订阅本版)
2006/7/20 15:42:00
新浪微博
svg绘制的气球动画，很美~
