Question

我可以组合多个补间并使用一个简易功能运行它们吗？像这样：

var el = $('#some-element');

var tw1 = new TweenMax.to(el, 1, {left: 100});
var tw2 = new TweenMax.to(el, 1, {left: 200});
var tw3 = new TweenMax.to(el, 1, {left: 300});

var tl = new TimelineMax({ease:Power2.easeOut})
    .add(tw1)
    .add(tw2)
    .add(tw3);

我为此问题制作了沙盒示例：http://codepen.io/panych/pen/qpjCK
那么如何使用普通的缓和方式移动框？

UPD

新沙箱：

http://codepen.io/panych/pen/qpjCK
http://codepen.io/panych/pen/aLHGy

我们需要使用一个常见的缓动函数来移动第一个示例中的框，如第二个示例中所示，但不删除中间补间。

Answer 1

实现此目的的一种方法是补间时间轴progress value，如下所示：

var el = $('#some-element');

var tw1 = new TweenMax.to(el, 1, {left: 100});
var tw2 = new TweenMax.to(el, 1, {left: 200});
var tw3 = new TweenMax.to(el, 1, {left: 300});

var tl = new TimelineMax()
.add(tw1)
.add(tw2)
.add(tw3);

TweenLite.to(tl, tl.duration, {progress:1, ease:Power2.easeOut});

此外，add() method允许您添加一个补间数组，然后将对齐作为字符串传递，如下所示：

var el = $('#some-element');

var tw1 = new TweenMax.to(el, 1, {left: 100});
var tw2 = new TweenMax.to(el, 1, {left: 200});
var tw3 = new TweenMax.to(el, 1, {left: 300});

var tl = new TimelineMax()
.add([tw1,tw2,tw3], 'sequence');

就像那个数组中的补间一个接一个地播放。

此外，您可以补充时间轴的时间属性，如Jamie Jefferson在此代码中所示：

http://codepen.io/jamiejefferson/pen/zsEAt

看一下具有惊人用途的add（）方法。

罗德里戈。

编辑：我忘了在add（）方法中添加position参数。此方法接受位置参数和对齐参数，由于两者都是字符串，因此必须包含两者。

所以代码看起来像这样：

var el = $('#some-element');

var tw1 = new TweenMax.to(el, 1, {left: 100});
var tw2 = new TweenMax.to(el, 1, {left: 200});
var tw3 = new TweenMax.to(el, 1, {left: 300});

var tl = new TimelineMax()
.add([tw1,tw2,tw3], '+=0', 'sequence');

在+ = 0的情况下，我们告诉GSAP在时间轴的末尾按顺序包含所有这些元素。

Answer 2

仅使用一个补间（最终目标），如果需要传递点，请使用BezierPlugin添加它们。

http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html#bezierThrough();

使用一个常用的缓动函数（GSAP）运行多个补间

2 个答案: