我有一个“无缝”的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中,左侧是我面临的问题,右侧是一个伪造的”示例,该示例显示了当我在两个标签之间“补间”时我希望左侧的动画做什么。