Анимация перехода не работает "путь"
Я не могу понять, почему плавный переход не работает - как здесь
<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>
Оказывается, анимация прыгает с одной позиции на другую.
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>