Question

我不明白为什么无法进行平滑过渡-like here

<path class="st4" d="M1278.4000244,0c0,0-302.7999878,70.4000244-412.5999756,267.9000244s-47.5,285.5999756-172.7000122,423.5 C569.2999878,827.9000244,477.6000061,894.5999756-0.3,1022.2000122v55.8999634c0,0.1999512,0,0.4000244,0,0.5999756 c0.1,0.4000244,0.1,0.8000488,0.1,1.1999512c0,0.1999512,0,0.4000244,0,0.5999756H716.5 c0,0,342.5-392.2000122,434.8000488-485.2000122s244.9000244-240.7000122,393.4000244-339.5 s128.0999756-96.7000122,278.5999756-159.2000122c56.5-23.5,84.3000488-42.9000244,97.0999756-58.0999756V0H1278.4000244z">

  <animate dur="2s" repeatCount="indefinite" attributeName="d"
           values=" M1278.4000244,0c0,0-302.7999878,70.4000244-412.5999756,267.9000244s-47.5,285.5999756-172.7000122,423.5 C569.2999878,827.9000244,477.6000061,894.5999756-0.3,1022.2000122v55.8999634c0,0.1999512,0,0.4000244,0,0.5999756 c0.1,0.4000244,0.1,0.8000488,0.1,1.1999512c0,0.1999512,0,0.4000244,0,0.5999756H716.5 c0,0,342.5-392.2000122,434.8000488-485.2000122s244.9000244-240.7000122,393.4000244-339.5 s128.0999756-96.7000122,278.5999756-159.2000122c56.5-23.5,84.3000488-42.9000244,97.0999756-58.0999756V0H1278.4000244z;

                   M1278.4000244,0c0,0-302.7999878,70.4000244-412.5999756,267.9000244s-47.5,285.5999756-172.7000122,423.5 C569.2999878,827.9000244,477.6000061,894.5999756-0.3,1022.2000122v55.8999634c0,0.1999512,0,0.4000244,0,0.5999756 c0.1,0.4000244,0.1,0.8000488,0.1,1.1999512c0,0.1999512,0,0.4000244,0,0.5999756H716.5 c248.9938354-689.5708618,423.4897461-842.3468628,541.8529053-835.0881348 c68.5238037,4.2022705,177.447876,65.6728516,286.347168,10.3881226 c51.019043-25.9007568,64.4385986-51.3814697,151.5378418-100.8539429 c28.6922607-16.2972412,61.8179932-31.2513428,127.0621338-58.3460693c56.5-23.5,84.3000488-42.9000244,97.0999756-58.0999756V0 H1278.4000244z;"/>
</path>

事实证明，动画从一个位置跳到另一位置。

Answer 1

正如我所评论的，两个路径必须具有相同数量的点和相同的命令。现在，values属性具有3个值：第一条路径；第二条路第一条路。在Illustrator中绘制路径时，可以计算点数。尽管有时Illustrator可以更改命令，但这可能很有用。

<svg viewBox="-50 -50 2000 2000">
<path class="st4" 
      d="M1278.4000244,0
        c0,0-302.7999878,70.4000244-412.5999756,267.9000244s-47.5,285.5999756-172.7000122,423.5 
         C569.2999878,827.9000244,477.6000061,894.5999756-0.3,1022.2000122v55.8999634
         c0,0.1999512,0,0.4000244,0,0.5999756
         c0.1,0.4000244,0.1,0.8000488,0.1,1.1999512
         c0,0.1999512,0,0.4000244,0,0.5999756
         H716.5 
         c0,0, 342.5-392.2000122, 434.8000488-485.2000122
         s244.9000244 -240.7000122, 393.4000244 -339.5 
         s128.0999756 -96.7000122,278.5999756-159.2000122
         c56.5-23.5,84.3000488-42.9000244,97.0999756-58.0999756
         V0
         H1278.4000244z">

  <animate dur="2s" repeatCount="indefinite" attributeName="d"
           values="
M1278.400, 0.000 
C1278.400, 0.000 975.600, 70.400 865.800, 267.900 
C756.000, 465.400 818.300, 553.500 693.100, 691.400 
C569.300, 827.900 477.600, 894.600 -0.300, 1022.200 
C-0.300, 1040.833 -0.300, 1059.467 -0.300, 1078.100 
C-0.300, 1078.300 -0.300, 1078.500 -0.300, 1078.700 
C-0.200, 1079.100 -0.200, 1079.500 -0.200, 1079.900 
C-0.200, 1080.100 -0.200, 1080.300 -0.200, 1080.500 
C238.700, 1080.500 477.600, 1080.500 716.500, 1080.500 
                   
C716.500, 1080.500 1059.000, 688.300 1151.300, 595.300 
C1243.600, 502.300 1396.200, 354.600 1544.700, 255.800 
C1693.200, 157.000 1672.800, 159.100 1823.300, 96.600
                   
C1879.800, 73.100 1907.600, 53.700 1920.400, 38.500 
C1920.400, 25.667 1920.400, 12.833 1920.400, 0.000 
C1706.400, 0.000 1492.400, 0.000 1278.400, 0.000 z;

M1278.400, 0.000 
C1278.400, 0.000 975.600, 70.400 865.800, 267.900 
C756.000, 465.400 818.300, 553.500 693.100, 691.400 
C569.300, 827.900 477.600, 894.600 -0.300, 1022.200 
C-0.300, 1040.833 -0.300, 1059.467 -0.300, 1078.100 
C-0.300, 1078.300 -0.300, 1078.500 -0.300, 1078.700 
C-0.200, 1079.100 -0.200, 1079.500 -0.200, 1079.900 
C-0.200, 1080.100 -0.200, 1080.300 -0.200, 1080.500 
C238.700, 1080.500 477.600, 1080.500 716.500, 1080.500
                   
C965.494, 390.929 1139.990, 238.153 1258.353, 245.412 
C1326.877, 249.614 1435.801, 311.085 1544.700, 255.800 
C1724.930, 138.649 1758.056, 123.695 1823.300, 96.600
                   
C1879.800, 73.100 1907.600, 53.700 1920.400, 38.500 
C1920.400, 25.667 1920.400, 12.833 1920.400, 0.000 
C1706.400, 0.000 1492.400, 0.000 1278.400, 0.000 z;

                   
M1278.400, 0.000 
C1278.400, 0.000 975.600, 70.400 865.800, 267.900 
C756.000, 465.400 818.300, 553.500 693.100, 691.400 
C569.300, 827.900 477.600, 894.600 -0.300, 1022.200 
C-0.300, 1040.833 -0.300, 1059.467 -0.300, 1078.100 
C-0.300, 1078.300 -0.300, 1078.500 -0.300, 1078.700 
C-0.200, 1079.100 -0.200, 1079.500 -0.200, 1079.900 
C-0.200, 1080.100 -0.200, 1080.300 -0.200, 1080.500 
C238.700, 1080.500 477.600, 1080.500 716.500, 1080.500 
                   
C716.500, 1080.500 1059.000, 688.300 1151.300, 595.300 
C1243.600, 502.300 1396.200, 354.600 1544.700, 255.800 
C1693.200, 157.000 1672.800, 159.100 1823.300, 96.600
                   
C1879.800, 73.100 1907.600, 53.700 1920.400, 38.500 
C1920.400, 25.667 1920.400, 12.833 1920.400, 0.000 
C1706.400, 0.000 1492.400, 0.000 1278.400, 0.000 z;"/>
</path>
  
</svg>

过渡动画不起作用“路径”

1 个答案: