SVG变形动画看起来很陡峭

时间:2015-11-25 11:51:40

标签: animation svg

我试图变形两个矢量形状......但是形状不是从一个变形到另一个,它是从一个变为另一个......我有动画" d"属性使用" animate" svg标签..折线工作正常,但定制形状(鹿)根据需要没有发生......

以下是codepen链接... 我希望鹿的行为像折线......

http://codepen.io/theprash/pen/MadMjO#

<path fill="none" stroke="black" stroke-miterlimit="10" d="M343.5,646.6c0,0,18,4.8,25.5,15c7,9.5,10.1,18.3,9.5,19
    s14.3-27.5,22.5-44.9c8.1-17,21.3-52,28.5-68.9c8.6-20.2,39.4-55.8,49.2-65.6c13.8-13.7,33.7-23.3,45-28.7c12.8-6,50.6-16.6,59-18
    c9-1.5,80-1.6,108,6.3c23.3,6.5,51.5,19.3,51.5,19.3s19.7,10.1,23.5,14.1c3.8,4,24.2,37.8,25.7,55.5c1.5,17.7-1.7,16.5-3.2,16.8
    c-1.5,0.3-8.2,0.7-11.8-5.2s-6.7-19.3-7.8-19.3c-1.2,0-1.7,4.3-2,13.2c-0.3,8.8-2.2,34.8-7.7,52.8c1.5,25.5,25,44,29.5,68
    s-1,71-3,87s-7.5,30-7,33.5s-7.5,13-7.5,13h-21c0,0,6-14.5,9.5-18.5s7-7,7-8.5s-2.5-43-3.5-51s-2.5-40.5-2-45
    c-13-2-32-32.3-41.8-38.5c1,17,2.8,21,1.5,27.8S714,720,713,725.2s-4,23.3-5.3,29.3s-3.8,7.3-3.5,13s4.5,23.5,3.3,24.3
    s-8-1.3-11.5-0.3s-4.3,6.5-4.3,9.8c-11,0.3-21.8,0.3-21.8,0.3s-0.8-3.8,7-14.8s10.5-35.5,11.3-46s10.5-55,8-63s-29-55.5-30.5-71.5
    c-11.8,7-26.3,16.3-35.5,19.3s-51.8,8.3-58.3,7.5c-0.8,11-0.5,20.3-1.8,30.8s-2.8,25.3-2,30.3s5,17.8,7.8,63.3
    c-1.3,6.8-1.8,10-0.8,15s6,14.8,6,17.3s-4.5,2.8-8.3,3.5s-2.3,8-2.3,8l-20.5-0.3c0,0,3.5-8.5,4.3-10.3s0.5-6,0.3-13.3
    s-3-18.8-4.3-29s-0.5-19.8-9.3-42.3c-2.8-33.3-1-64.8-7-71.8c-4.5,14.3-8.5,41-5.3,57.8c0,0-1.8,16.8-0.5,22
    c-5,11.5-8.3,33.3-4.5,48.5c-3.8,16.5,1.5,32.8-3.3,38s-33.8-3-33.8-3l5.3-7c0,0,0.5-7.3,2.5-10.5s5.5-6,5.8-7.8s-0.5-50.3,1-77.8
    s-2.6-47.6-8.6-51.6c-1.7,2.8-8.5,3.5-9.7,1.3c-1-1.9-6.2,2-8.7,0.7c-2,1.8-6.3,3-12,4.3c-0.4-8.6-15.3,20.2-17.2,22.7
    c-2.1,2.8-8.1,15.5-9.5,20.6c0,0-2.9,7.4-3.5,9.9c-1.2,4.4-2.2,8.3-2.9,10.6c-2.2,7-4.4,10.1-6.6,15.7c-2.3,6.2-2,6.7-7.3,18.8
    c-6.3,14.4-11.2,51-35.3,53.2c-3.3-2.3-2.2-16.2-7.2-28.2c-4.3-5.2-9.6-13.9-12.1-21c0,0-4.4-16.3-8.1-20.3
    c-1.6-1.8-26.5,2.4-29.3,3c-3,0.6-13,35.9-28.2,40.2c-26.1,7.4,2.2-10.8,6-15.5c5.8-7.3,7.5-22.7,7.5-22.7s-38.8,11.5-47,12.5
    c-4,0.5-23.5,2.8-24.8-2.4c-1.4-5.4,18.6-4.3,23.8-6.1c7.3-2.5,24.3-8.3,26.7-12c2.1-3.3-39.7-31.1-62.9-33
    c-15-1.3-61.4,11.6-63,5.8c-1.1-3.9,47.9-15,54.6-20.8c4.3-3.8-44.7-43.3-60.7-47.7c-10.6-4-17.5-0.9-38.4-16.6
    c-13.6-10.2,48.4,5.6,48.4,5.6s-2.5-25.2-24.2-45.2c-18.1-16.6-0.8-9.8,4.8-6.7c5.7,3.2,24,20,27.5,24s8.8,11.3,10.3,32.3
    c24.5,27,46.8,49.8,56,55.8c13.5,8.8,57.5,38.8,60.2,35.8c6.8-7.7-8.4-31.8-12-38.7c-4-7.8-23.9-20.3-38-27.3
    c-13-6.4-24.4-17.3-22-22.7c1.1-2.5,51.5,26.2,56.7,22c6.7-5.3,2.2-42.8-24.3-73.9c-21.6-23.4-80.8-24.9-73.1-35.4
    c5.3-7.2,53,13.5,56,6.5c9.5-22.1-6.5-51-13-75.5c26,0.8,24.5,57,31,85c15.5,14,29,46.1,31.5,51c3.5,7,7.6,21,8.5,30.5
    c1,11-0.9,16.9-1,20.5c-0.2,4.5,13.5,59.6,19.7,59c7.2-0.7,21.3-5,21.3-5s-1-3.3-11-9c-10-5.7-10.3-11.7-10.3-11.7s2.3-7.2,36,4
    C357.2,683.2,343.5,646.6,343.5,646.6z">

    <animate attributeName="d" begin="0s" dur="1.75s" repeatCount="indefinite" from= "M343.5,646.6c0,0,18,4.8,25.5,15c7,9.5,10.1,18.3,9.5,19
    s14.3-27.5,22.5-44.9c8.1-17,21.3-52,28.5-68.9c8.6-20.2,39.4-55.8,49.2-65.6c13.8-13.7,33.7-23.3,45-28.7c12.8-6,50.6-16.6,59-18
    c9-1.5,80-1.6,108,6.3c23.3,6.5,51.5,19.3,51.5,19.3s19.7,10.1,23.5,14.1c3.8,4,24.2,37.8,25.7,55.5c1.5,17.7-1.7,16.5-3.2,16.8
    c-1.5,0.3-8.2,0.7-11.8-5.2s-6.7-19.3-7.8-19.3c-1.2,0-1.7,4.3-2,13.2c-0.3,8.8-2.2,34.8-7.7,52.8c1.5,25.5,25,44,29.5,68
    s-1,71-3,87s-7.5,30-7,33.5s-7.5,13-7.5,13h-21c0,0,6-14.5,9.5-18.5s7-7,7-8.5s-2.5-43-3.5-51s-2.5-40.5-2-45
    c-13-2-32-32.3-41.8-38.5c1,17,2.8,21,1.5,27.8S714,720,713,725.2s-4,23.3-5.3,29.3s-3.8,7.3-3.5,13s4.5,23.5,3.3,24.3
    s-8-1.3-11.5-0.3s-4.3,6.5-4.3,9.8c-11,0.3-21.8,0.3-21.8,0.3s-0.8-3.8,7-14.8s10.5-35.5,11.3-46s10.5-55,8-63s-29-55.5-30.5-71.5
    c-11.8,7-26.3,16.3-35.5,19.3s-51.8,8.3-58.3,7.5c-0.8,11-0.5,20.3-1.8,30.8s-2.8,25.3-2,30.3s5,17.8,7.8,63.3
    c-1.3,6.8-1.8,10-0.8,15s6,14.8,6,17.3s-4.5,2.8-8.3,3.5s-2.3,8-2.3,8l-20.5-0.3c0,0,3.5-8.5,4.3-10.3s0.5-6,0.3-13.3
    s-3-18.8-4.3-29s-0.5-19.8-9.3-42.3c-2.8-33.3-1-64.8-7-71.8c-4.5,14.3-8.5,41-5.3,57.8c0,0-1.8,16.8-0.5,22
    c-5,11.5-8.3,33.3-4.5,48.5c-3.8,16.5,1.5,32.8-3.3,38s-33.8-3-33.8-3l5.3-7c0,0,0.5-7.3,2.5-10.5s5.5-6,5.8-7.8s-0.5-50.3,1-77.8
    s-2.6-47.6-8.6-51.6c-1.7,2.8-8.5,3.5-9.7,1.3c-1-1.9-6.2,2-8.7,0.7c-2,1.8-6.3,3-12,4.3c-0.4-8.6-15.3,20.2-17.2,22.7
    c-2.1,2.8-8.1,15.5-9.5,20.6c0,0-2.9,7.4-3.5,9.9c-1.2,4.4-2.2,8.3-2.9,10.6c-2.2,7-4.4,10.1-6.6,15.7c-2.3,6.2-2,6.7-7.3,18.8
    c-6.3,14.4-11.2,51-35.3,53.2c-3.3-2.3-2.2-16.2-7.2-28.2c-4.3-5.2-9.6-13.9-12.1-21c0,0-4.4-16.3-8.1-20.3
    c-1.6-1.8-26.5,2.4-29.3,3c-3,0.6-13,35.9-28.2,40.2c-26.1,7.4,2.2-10.8,6-15.5c5.8-7.3,7.5-22.7,7.5-22.7s-38.8,11.5-47,12.5
    c-4,0.5-23.5,2.8-24.8-2.4c-1.4-5.4,18.6-4.3,23.8-6.1c7.3-2.5,24.3-8.3,26.7-12c2.1-3.3-39.7-31.1-62.9-33
    c-15-1.3-61.4,11.6-63,5.8c-1.1-3.9,47.9-15,54.6-20.8c4.3-3.8-44.7-43.3-60.7-47.7c-10.6-4-17.5-0.9-38.4-16.6
    c-13.6-10.2,48.4,5.6,48.4,5.6s-2.5-25.2-24.2-45.2c-18.1-16.6-0.8-9.8,4.8-6.7c5.7,3.2,24,20,27.5,24s8.8,11.3,10.3,32.3
    c24.5,27,46.8,49.8,56,55.8c13.5,8.8,57.5,38.8,60.2,35.8c6.8-7.7-8.4-31.8-12-38.7c-4-7.8-23.9-20.3-38-27.3
    c-13-6.4-24.4-17.3-22-22.7c1.1-2.5,51.5,26.2,56.7,22c6.7-5.3,2.2-42.8-24.3-73.9c-21.6-23.4-80.8-24.9-73.1-35.4
    c5.3-7.2,53,13.5,56,6.5c9.5-22.1-6.5-51-13-75.5c26,0.8,24.5,57,31,85c15.5,14,29,46.1,31.5,51c3.5,7,7.6,21,8.5,30.5
    c1,11-0.9,16.9-1,20.5c-0.2,4.5,13.5,59.6,19.7,59c7.2-0.7,21.3-5,21.3-5s-1-3.3-11-9c-10-5.7-10.3-11.7-10.3-11.7s2.3-7.2,36,4
    C357.2,683.2,343.5,646.6,343.5,646.6z" to="M485.5,367.5c0,0,0.6,22.1-10,29.1s-22.5,10.1-23.1,10.9
    s2.6,12.6,3.6,14.6s5.8,17.4,17,30.9s20.5,23.8,33.5,28.5s14.8,7.8,27,5s40-6.5,48.5-6.5s80.5-4,109.5-2s41,3.4,51,4
    c10,0.5,19.5,8.2,23.3,12.2c3.8,4,24.2,37.8,25.7,55.5c1.5,17.7-1.7,16.5-3.2,16.8c-1.5,0.3-8.2,0.7-11.8-5.2s-6.7-19.3-7.8-19.3
    c-1.2,0-1.7,4.3-2,13.2c-0.3,8.8-2.2,34.8-7.7,52.8c1.5,25.5,25,44,29.5,68s-1,71-3,87s-7.5,30-7,33.5s-7.5,13-7.5,13h-21
    c0,0,6-14.5,9.5-18.5s7-7,7-8.5s-2.5-43-3.5-51s-2.5-40.5-2-45c-13-2-32-32.3-41.8-38.5c1,17,2.8,21,1.5,27.8S714,720,713,725.2
    s-4,23.3-5.3,29.3s-3.8,7.3-3.5,13s4.5,23.5,3.3,24.3s-8-1.3-11.5-0.3s-4.3,6.5-4.3,9.8c-11,0.3-21.8,0.3-21.8,0.3s-0.8-3.8,7-14.8
    s10.5-35.5,11.3-46s10.5-55,8-63s-29-55.5-30.5-71.5c-11.8,7-26.3,16.3-35.5,19.3s-51.8,8.3-58.3,7.5c-0.8,11-0.5,20.3-1.8,30.8
    s-2.8,25.3-2,30.3s5,17.8,7.8,63.3c-1.3,6.8-1.8,10-0.8,15s6,14.8,6,17.3s-4.5,2.8-8.3,3.5s-2.3,8-2.3,8l-20.5-0.3
    c0,0,3.5-8.5,4.3-10.3s0.5-6,0.3-13.3s-3-18.8-4.3-29s-0.5-19.8-9.3-42.3c-2.8-33.3-1-64.8-7-71.8c-4.5,14.3-8.5,41-5.3,57.8
    c0,0-1.8,16.8-0.5,22c-5,11.5-8.3,33.3-4.5,48.5c-3.8,16.5,1.5,32.8-3.3,38s-33.8-3-33.8-3l5.3-7c0,0,0.5-7.3,2.5-10.5
    s5.5-6,5.8-7.8s-0.5-50.3,1-77.8s-9-63-15-67c-3.5,3-6.4,1.4-6.9-0.8s-0.5-7.3-3-8.6c-2,1.8-6.9,1.6-19-17
    c-0.4-8.6-14.5-17.1-16.5-19.5c-2-2.3-15.7-12-18.3-17c0,0-8.3-13-10.7-28s-5-25.3-6.7-35.3c-1.7-10-2.3-33.7-7-38.3
    c-4.7-4.7-12.3-11.5-25.2-13c-12.8-1.5-34.3-7.5-34.8-20.3c-0.3-8,18.8-7.8,32.7-16.5c4.4-2.8,8.2-7,13-10.7c0,0,18.3-9,19.3-11.2
    s-5.5-27.6-8.3-28.6s-39-7-45.5-26s12.3,2.5,17.5,5.5s24.8,6,24.8,6S372.5,309,372.2,305s-3.5-27.8-0.8-27.5s5.8,19.8,9,24.3
    s14.3,22.5,17,22.8s23-43.8,21.5-67s-19.5-59.2-15.8-60.7s27,51.5,31.3,51.3s28.3-43.3,34.8-59c4.9-6.4,3-38,14.8-50.3
    s1.8,51.8,1.8,51.8s24.5-10.5,38.8-30.5s8.8,1,8.8,1S523,183.2,519,186s-10,13.3-35.8,21.5c-22.5,30-44.8,54-48.8,64.2
    s-26.3,64.8-23.5,66s31.5-14.5,36.8-20.3s16.3-30.5,21.5-44s12.3-21.5,15-21.5s-16.3,54.5-12.5,60s48.5-5.8,72.3-37.3
    c10.3-15.3,13.3-73.2,22-75s-5,46.3,1,52.8c6,6.5,27.3,7.7,74-20.8c12.3,13-58,36-76.5,41c-12.3,12-48.5,39.8-52.8,43.3
    s-20.5,9.5-30,10.8s-13-0.3-16.3,1.3s-53,22.3-54.5,28.3s8.8,20.5,8.8,20.5s3.8-5,7.8-15.8s8.8-10,8.8-10s7.8,5.5,1.8,36.3
    C467.5,383.5,485.5,367.5,485.5,367.5z" />

</path>

</g>


<g id="Layer_1">
<polyline fill="none" stroke="#000000" stroke-miterlimit="10" points="134.8,218.5 266.5,218.5 440.8,218.5 633.4,218.5   " > <animate attributeName="points" begin="0s" dur="1.75s" repeatCount="indefinite" from= "134.8,218.5 266.5,218.5 440.8,218.5 633.4,218.5  " to="133.5,218.5 268,168.5 446.5,248.5 633.4,218.5     " />
    </polyline>

0 个答案:

没有答案