过渡动画不起作用 "path"
Transition animation does not work "path"
我无法理解为什么平滑过渡不起作用 - 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>
原来是动画从一个位置跳到另一个位置
正如我所说,这两条路径必须具有相同数量的点和相同的命令。 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>
我无法理解为什么平滑过渡不起作用 - 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>
原来是动画从一个位置跳到另一个位置
正如我所说,这两条路径必须具有相同数量的点和相同的命令。 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>