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

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

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

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


svg animation smil
person laidback1    schedule 08.03.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать атрибут 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>

person enxaneta    schedule 08.03.2019
comment
Спасибо, это в принципе то, что я искал. Не могли бы вы указать, что означают 3 значения, которые вы присвоили? Первый — начальный, второй — то, к чему он переходит, а третий — то, к чему возвращается анимация? - person laidback1; 08.03.2019
comment
3 значения — это значение атрибута d в начале, в середине и в конце анимации. Первый и последний одинаковы (атрибут d для красного пути в вашем примере). Второе значение — это то, которое вы используете для атрибута to элемента <animate>. - person enxaneta; 08.03.2019