Question

我无法设置Anime.js的默认属性或启动属性。如果将set更改为add，则可以使用，但也可以将原始状态添加为关键帧。如何使圆圈从0.1缩放到0.5？我已经在最初的时间轴和一些CSS中尝试过scale:0.1，但都没有用。

此外，无法弄清楚如何将变换原点设置为相对于圆的中心而不是SVG根。

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>

Anime.js设置启动属性

0 个答案: