Обратная анимация улыбки в зависимости от пути - PullRequest
Новая
       20

Обратная анимация улыбки в зависимости от пути

0 голосов
/ 08 марта 2019

Я новичок в SVG и пытаюсь запустить анимацию в обратном порядке, а не запускать ее с самого начала.Есть ли способ сделать это с помощью SMIL или я должен просто переключиться на ключевые кадры? 

`https://codepen.io/anon/pen/LayQRL`

Заранее всем спасибо за помощь!

1 Ответ

0 голосов
/ 08 марта 2019

Вы можете использовать атрибут values вместо to следующим образом: Красный путь - это то, что у вас есть, синий использует 3 values

Я надеюсь, что это то, что вы спрашиваете. 

svg {
 border:1px solid;
}
<svg width="200" viewBox="0 0 849 681">
       
    <path fill="red" d="M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z" id="path-2">
      <animate attributeName="d" dur="5000ms" repeatCount="indefinite" to="M44.2832799,.535103 C157.481114,64.166986 100.550155,550.259161 500.490405,700.811627 C812.90078,787.640326 488.600718,1162.61771 1328.65457,953.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z" rotate="auto" keyPoints="1;0">
      </animate>
    </path>
 
</svg>

<svg viewBox="0 0 849 681" width="200">
         
    <path fill="skyblue" d="M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z" >
      <animate attributeName="d" dur="5000ms" repeatCount="indefinite"
         values="M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z;
                 
          M44.2832799,.535103 C157.481114,64.166986 100.550155,550.259161 500.490405,700.811627 C812.90078,787.640326 488.600718,1162.61771 1328.65457,953.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z;
                 
          M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z "      
      />
  </path>
  
</svg>
...