Anime. js установить стартовые свойства - PullRequest
Новая
       121

Anime. js установить стартовые свойства

0 голосов
/ 20 июня 2020

Я не могу установить свойства по умолчанию или начальные свойства для аниме. js. Если я изменю set на add, он будет работать, но также добавлю исходное состояние в качестве ключевого кадра. Как сделать круги go от масштаба 0,1 до 0,5? Я пробовал scale:0.1 на начальной шкале времени и некоторые CSS, но ничего из этого не работает.

Кроме того, не могу понять, как установить origin-origin в центре относительно круг, а не SVG root. 

var tl = anime.timeline({
  targets: '.container circle',
  delay:  function(el, i) { return i*100 }, //manual stagger 
  duration: 500, 
  easing: 'easeOutExpo', 
  direction: 'alternate', 
  loop: true, 
  scale: 0.1 //Doesn't work
});


tl.set({ //Doesn't work. 
  fill:"#00FF00",
  scale: 0.1
})
.add({
  fill:"#FF0000",
  scale: 0.5
});
<script src="//cdn.jsdelivr.net/combine/npm/jquery@3.5.1,npm/animejs@3.2.0,npm/greensock@1.20.2"></script>


<div class="container">
<svg height="810" width="900">
  <circle cx="100" cy="100" r="100" transform-origin = "50 50"/>
  <circle cx="300" cy="100" r="100" transform-origin = "50 50" />  
  <circle cx="500" cy="100" r="100" transform-origin = "50 50" />
</svg>  
</div>
...