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({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

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

4

2 回答 2

8

一种方法是补间时间线的进度值，如下所示：

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');

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

您还可以对时间线的时间属性进行补间，例如此 codepen 中说明的 Jamie Jefferson：

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

看看具有惊人用途的 add() 方法。

罗德里戈。

编辑：我忘记在 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], '+=0', 'sequence');

使用 +=0，我们告诉 GSAP 在时间线的末尾依次包含所有这些元素。

于 2013-12-16T15:09:23.913 回答
0

仅使用一个补间（最终目的地），如果需要通过点，请使用 BezierPlugin 添加它们。

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

于 2013-11-12T14:11:03.473 回答