SVG使用Javascript将形状平滑地变形为其他预定义形状 我希望在形状之间进行平滑过渡(下面的示例显示了一个突然的过渡,以便您了解我需要平滑过渡的位置) 形状的顺序由Javascript决定(例如,我修复了一个任意序列,但在实际问题中,用户输入决定选择哪个形状,因此事先不知道)
SVG使用Javascript将形状平滑地变形为其他预定义形状 我希望在形状之间进行平滑过渡(下面的示例显示了一个突然的过渡,以便您了解我需要平滑过渡的位置) 形状的顺序由Javascript决定(例如,我修复了一个任意序列,但在实际问题中,用户输入决定选择哪个形状,因此事先不知道),javascript,animation,svg,svg-morphing,Javascript,Animation,Svg,Svg Morphing,example.svg: <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 400 400"> <script> window.anim
example.svg
:
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 400 400">
<script>
window.animate = function( fromId, toId, next )
{
return function()
{
var elem = document.getElementById( 'elem' );
/* Here a smooth animation is supposed to happen. */
elem.setAttribute( 'xlink:href', '#' + toId );
if( next )
{
window.setTimeout( next, 1000 );
}
};
};
window.onload = function()
{
/* The animation order is determined by javascript. */
var step3 = window.animate( 'path-2', 'path-1', null );
var step2 = window.animate( 'path-1', 'path-2', step3 );
var step1 = window.animate( 'path-0', 'path-1', step2 );
var step0 = window.animate( 'path-0', 'path-0', step1 );
step0();
};
</script>
<style>path{stroke:#000;}</style>
<defs>
<path id="path-0" style="fill:#fcc" d="M0,0 h100 v100 h-100 v-100" />
<path id="path-1" style="fill:#ccf" d="M0,0 h50 l50 50 l-100 50 v-100" />
<path id="path-2" style="fill:#cfc" d="M0,0 h150 l-50 50 l-100 50 v-100" />
</defs>
<use id="elem" xlink:href="#path-0" x="150" y="150" />
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 400 400">
<script>
window.set_animation = function( animId, fromId, toId )
{
var anim = document.getElementById( animId );
var from = document.getElementById( fromId );
var to = document.getElementById( toId );
anim.setAttribute( 'from', from.getAttribute( 'd' ) );
anim.setAttribute( 'to', to.getAttribute( 'd' ) );
};
window.onload = function()
{
/* The animation order is determined by javascript. */
window.set_animation( 'anim-0', 'path-0', 'path-1' );
window.set_animation( 'anim-1', 'path-1', 'path-2' );
window.set_animation( 'anim-2', 'path-2', 'path-1' );
/* Can start animation only once animation steps are defined. */
var anim = document.getElementById( 'anim-0' );
anim.beginElement();
};
</script>
<style>path{stroke:#000;}</style>
<defs>
<path id="path-0" style="fill:#fcc" d="M0,0 l100,0 l0,100 l-100,0 l0,-100" />
<path id="path-1" style="fill:#ccf" d="M0,0 l50,0 l50,50 l-100,50 l0,-100" />
<path id="path-2" style="fill:#cfc" d="M0,0 l150,0 l-50,50 l-100,50 l0,-100" />
</defs>
<path id="elem" x="150" y="150" d="">
<animate id="anim-0" begin="indefinite" attributeType="XML" attributeName="d" dur="2s" from="[set by javascript]" to="[set by javascript]" />
<animate id="anim-1" begin="anim-1.end" attributeType="XML" attributeName="d" dur="2s" from="[set by javascript]" to="[set by javascript]" />
<animate id="anim-2" begin="anim-2.end" attributeType="XML" attributeName="d" dur="2s" from="[set by javascript]" to="[set by javascript]" />
</path>
</svg>
使用
时,规则是两条路径必须:
path-0: M h v h v
path-1: M h l l v
正如我在这里所做的那样,将所有值放入一个动画中更容易。如果不这样做,则必须在前一个动画完成时开始后续动画,这是可行的,但更复杂 您将需要IE/Chrome的或,但在Firefox上不使用插件也可以使用
函数创建动画(动画ID、路径、属性)
{
var anim=document.getElementById(animId);
var values=path.map(函数(项){return document.getElementById(项).getAttribute(属性)}).join(“;”);
anim.setAttribute('values',values);
}
window.set_animation=函数(animId,路径)
{
创建动画(animId,路径,“d”);
创建动画(animId+'-color',路径,“fill');
};
window.onload=函数()
{
/*动画顺序由javascript确定*/
设置动画('anim-0',['path-0','path-1','path-2']);
};
路径{stroke:#000;}
好的。我知道有些命令不兼容,但并非所有命令都不兼容(h
,v
和l
毕竟都是行)。修正了。尽管如此,它仍然不太管用(我听说
将被删除?)。是的,SMIL动画可能会被至少一些浏览器删除,以取代新的Web动画API。但是会有第三方提供向后兼容性的polyfills。我在单独的动画中使用了它,因为各个动画片段的持续时间是可变的,我知道这应该可以通过
实现,但我不知道如果它都在一个动画中,我应该如何实现它。你能修改你的答案吗?或者我应该问一个新问题吗?你可以用关键时刻来实现这一点。如果你想要更多,问一个新问题。