以文本方式查看主题

-  中文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=63742)

--  作者：zpjdgp888
--  发布时间：6/14/2008 4:58:00 PM

--  [讨论]关于SVG实现管道的流动效果
因项目需要，想用SVG实现简单的管道流动效果，我自己的考虑是给多个图元增加
animateMotion 动画，然后利用起始时间的不同，实现流动效果
有一个问题就是刚开始的几秒，也就是各图元在等待起跑的时间里，就会全部集中在左上角，而且这个流动效果不能实现一开始就整个管道都在流动，各位给点建议啊

<svg contentScriptType="text/ecmascript" width="600" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" contentStyleType="text/css" height="400" viewBox="0 0 600.0 400.0" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:rtda="http://www.itris.fr/2003/animation" version="1.0">
<defs/>
<path style="stroke:#000000;visibility:visible;fill:none;" d="M110 163L466 100L566 320"/>

<ellipse rx="20" ry="10" style="fill:#6464ff;stroke:#000000;visibility:hidden" cx="0" cy="0">
<animateMotion dur="3s" rotate="auto" repeatCount="indefinite" style="fill:freeze;" begin="0s" path="M110 163L466 100L566 320" calcMode="paced"/>
<set attributeName="visibility" to="visible" begin="0s"/>
</ellipse>

<ellipse rx="20" ry="10" style="fill:#6464ff;stroke:#000000;visibility:hidden" cx="0" cy="0">
<animateMotion dur="3s" rotate="auto" repeatCount="indefinite" style="fill:freeze;" begin="0.5s" path="M110 163L466 100L566 320" calcMode="paced"/>
<set attributeName="visibility" to="visible" begin="0.5s"/>
</ellipse>

<ellipse rx="20" ry="10" style="fill:#6464ff;stroke:#000000;visibility:hidden" cx="0" cy="0">
<animateMotion dur="3s" rotate="auto" repeatCount="indefinite" style="fill:freeze;" begin="1s" path="M110 163L466 100L566 320" calcMode="paced"/>
<set attributeName="visibility" to="visible" begin="1s"/>
</ellipse>

<ellipse rx="20" ry="10" style="fill:#6464ff;stroke:#000000;visibility:hidden" cx="0" cy="0">
<animateMotion dur="3s" rotate="auto" repeatCount="indefinite" style="fill:freeze;" begin="1.5s" path="M110 163L466 100L566 320" calcMode="paced"/>
<set attributeName="visibility" to="visible" begin="1.5s"/>
</ellipse>

<ellipse rx="20" ry="10" style="fill:#6464ff;stroke:#000000;visibility:hidden" cx="0" cy="0">
<animateMotion dur="3s" rotate="auto" repeatCount="indefinite" style="fill:freeze;" begin="2s" path="M110 163L466 100L566 320" calcMode="paced"/>
<set attributeName="visibility" to="visible" begin="2s"/>
</ellipse>

<ellipse rx="20" ry="10" style="fill:#6464ff;stroke:#000000;visibility:hidden" cx="0" cy="0">
<animateMotion dur="3s" rotate="auto" repeatCount="indefinite" style="fill:freeze;" begin="2.5s" path="M110 163L466 100L566 320" calcMode="paced"/>
<set attributeName="visibility" to="visible" begin="2.5s"/>
</ellipse>

</svg>

--  作者：zpjdgp888
--  发布时间：6/16/2008 3:26:00 PM

--  
再具体一点，animateMotion动画有2个属性：keyPoints和keyTimes，这2个属性应该怎么样设置呢？
下面的代码有问题，出在 keyPoints="0;0.2;1" keyTimes="0;0.5;1"这2个属性上，如果将keyTimes改为只有2个数，就会正常，请问这2个属性是怎么用的呢

<svg contentScriptType="text/ecmascript" width="600" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" contentStyleType="text/css" height="400" viewBox="0 0 600.0 400.0" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:rtda="http://www.itris.fr/2003/animation" version="1.0">
<defs/>
<path style="stroke:#000000;visibility:visible;fill:none;" d="M110 110L510 110"/>
<ellipse rx="20" ry="10" style="fill:#6464ff;stroke:#000000" cx="0" cy="0">
<animateMotion calcMode="linear" keyPoints="0;0.2;1" keyTimes="0;0.5;1"
 dur="3s" rotate="auto" repeatCount="1" style="fill:freeze;" begin="0s" path="M110 110L510 110"/>
</ellipse>
</svg>


--  作者：zpjdgp888
--  发布时间：6/17/2008 1:38:00 PM

--  
找到问题了，是adobe svg viewer不支持keyPoints，把这段代码用Batik查看就正常，实现了完整的流动效果
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 54.688ms