Анимация перехода не работает "путь" - PullRequest
Новая
       33

Анимация перехода не работает "путь"

0 голосов
/ 24 января 2019

Я не могу понять, почему плавный переход не работает - как здесь 

<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 Ответ

0 голосов
/ 24 января 2019

Как я прокомментировал, два пути должны иметь одинаковое количество точек и одинаковые команды.Атрибут 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>
...