以尽可能“最短”的方式为两个标签之间的GSAP时间线设置动画

时间:2018-11-09 03:56:06

标签: animation gsap tweenmax timelinemax

我有一个“无缝”的GSAP(格林索克)动画,这意味着当它在无限循环中播放时,您无法分辨出哪个部分是开始,哪个部分是结束。

比方说,我有两个标签,一个靠近开始(大约占开始的10%),另一个靠近结束(大约占完成的90%):

|  start                               end   |
|----|----|----|----|----|----|----|----|----|

如果我从“开始”到“结束”创建一个tweenTo,它将“走很长的路”,将播放头从10%向前擦到90%。

Tween from 'start' to 'end' would go
"long ways" from the left to the right

     :==================================>
|  start                               end   |
|----|----|----|----|----|----|----|----|----|

到目前为止,对我来说这很有意义。

但是,如果我不希望这种情况发生怎么办?由于我的动画看起来很呆板,因此从技术上讲,动画可以从10%开始,然后向后向后播放,直到到达开始为止,然后循环到动画的结尾,然后继续反向播放,直到到达“结束”为止标签为90%。

But what if I wanted to go "backwards" from
'start' and loop around to 'end'?

/====:                                  <====/
|  start                               end   |
|----|----|----|----|----|----|----|----|----|

这将是这两个标签之间的“捷径”。

我的问题是,我将如何创建这样的效果?

也就是说,如果我有两个标签,是否可以在我的动画“环绕”时间轴而不是停留在时间轴中的位置之间进行动画处理?

有关此示例,请参见以下codepen-https://codepen.io/romellem/pen/yQOQar?editors=0010

在该Codepen中,左侧是我面临的问题,右侧是一个伪造的”示例,该示例显示了当我在两个标签之间“补间”时我希望左侧的动画做什么。

0 个答案:

没有答案