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

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

新沙箱:

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

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

Answer 1

一种方法是补间时间轴的进度值,如下所示:

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()方法允许您添加补间数组,然后将对齐作为字符串传递,如下所示:

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在时间线的末尾按顺序包含所有这些元素.