Greensock-屏幕外无缝循环SVG

时间:2018-10-12 18:21:29

标签: animation svg css-animations greensock

我有一个带有各种云插图的SVG,我想从右到左在屏幕上浮动。我有动画循环,但无法找到使重复无缝的方法。现在,我必须等到所有云完全消失后才能进行重复。理想情况下,最左侧的云将在最终完全脱离屏幕之前从最终的云的右侧再次开始拖尾。有什么办法解决吗?

https://codepen.io/kylehagler/pen/jeLazp

var clouds = document.getElementsByClassName("cloud");

for(var i = 0; i < clouds.length; i++) {
  TweenMax.fromTo(clouds[i], 5,
                  {x:"100%"},
                  {x:"-100%", ease:Power0.easeNone, repeat:-1});
}

0 个答案:

没有答案