анимационные ключевые кадры внутри smil animateTransform - PullRequest
Новая
       43

анимационные ключевые кадры внутри smil animateTransform

0 голосов
/ 25 мая 2018

В настоящее время я работаю над анимацией с использованием animateTransform 

<animateTransform xmlns="http://www.w3.org/2000/svg" attributeName="transform" type="scale" additive="sum" begin="mouseenter" from="1" to="1.2" dur="1" />

Пока это работает, но ничего не хватает, я хочу создать плавную анимацию, поэтому начало должно соответствовать конечной точке.К сожалению, я не могу найти способ установить несколько ключевых кадров.

В css это выглядело бы так 

@keyframe foo {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  }
}

Любые идеи, как создать анимацию в теге svg / animateTransform?

1 Ответ

0 голосов
/ 25 мая 2018

В синтаксисе SMIL аналог синтаксиса ключевых кадров CSS заключается в использовании values и keyTimes атрибутов, содержащих разделенные точкой с запятой списки: 

<animateTransform xmlns="http://www.w3.org/2000/svg"
    attributeName="transform" type="scale" additive="sum"
    begin="mouseenter" dur="1"
    values="1;1.2;1" keyTimes="0;0.5;1 />

Использование from / to и values является взаимоисключающим.

В обоих списках должно быть одинаковое количество элементов.keyTime значения являются значениями с плавающей запятой от 0 до 1, представляющими пропорции длительности.Каждое последующее время должно быть больше или равно предыдущему значению времени.Для непрерывной анимации первое значение времени должно быть 0, а последнее - 1.

...