Question

TweenMax不允许您在同一补间中的Three.js中同时补间2个或更多属性。例如，您无法一次补间rotation和position。您只能在一个补间或rotation中补间position，但不能两者都补间。

我设法通过将2个补间推入数组并调用tl.insertMultiple(array)来做到这一点。

不幸的是，出于某些我未知的原因，它只能在第一次播放时发挥作用。 restart()之后，补间/时间轴断开/断断续续/跳过。

请注意，当颜色变为红色时，它不再是平滑的动画。

jsFiddle Demo

/* TWEENMAX ANIMATION STARTS HERE
 p = position
 r = rotation
 t = time
*/

var miroKeyframes = JSON.parse(`[
{"t":"0"},
{"p":{"x":"0.050","y":"0.220"},"r":{"x":"0.246","y":"-0.444","z":"0.014"},"t":"0.29"},
{"p":{"x":"0.010","y":"0.060"},"r":{"x":"0.109","y":"-0.150","z":"0.150"},"t":"1.01"},
{"p":{"x":"0.746","y":"0.738"},"r":{"x":"0.109","y":"-0.050","z":"0.013"},"t":"1.67"},
{"p":{"x":"-0.495","y":"0.804"},"r":{"x":"0.097","y":"-0.040","z":"0.105"},"t":"2.63"},
...
]`);

// Setup a timeline object. Restart on complete.
var tl = new TimelineMax({ onComplete:restart }),

tweens = [];


for (var i = 1; i < miroKeyframes.length ; i++) {

  var keyframe = miroKeyframes[i]; //current keyframe
  var dur = keyframe.t - miroKeyframes[i-1].t ; //auto-duration


  tweens.push( TweenMax.to( obj.rotation, dur, { x:keyframe.r.x, y:keyframe.r.y, z:keyframe.r.z, delay:keyframe.t, ease:Sine.easeIn} ));
  tweens.push( TweenMax.to( obj.position, dur, { x:keyframe.p.x*20, y:keyframe.p.y*20, delay:keyframe.t, ease:Sine.easeIn} ));

  //Works with either one of these but not both. It will execute each consequently. I need both at the same time.
  //tl.add( TweenMax.to( obj.position, dur, { x:keyframe.p.x, y:keyframe.p.y, ease:Sine.easeIn } ));
  //tl.add( TweenMax.to( obj.rotation, dur, { x:keyframe.p.x, y:keyframe.p.y, ease:Sine.easeIn } ));

}

tl.insertMultiple(tweens);

请让我知道如何解决此问题以及正在发生的事情。我不想使用2个对象-1个用于旋转，而1个用于位置。

Answer 1

该解决方案来自 PointC 和 Dipscom 。特别感谢！

第一个简便的解决方案是使用标签或position parameters。 the GSAP forums

 tl.to( obj.position, dur, { x:keyframe.p.x*10, y:keyframe.p.y*10, ease:Sine.easeIn }, "label" + i );
 tl.to( obj.rotation, dur, { x:keyframe.r.x, y:keyframe.r.y, ease:Sine.easeIn }, "label" + i );

Check the video tutorial.

第二种解决方案是使用2条时间线-1条主时间线和1条迷你时间线同时添加两个属性：

  tl2.to( obj.rotation, dur, { x:keyframe.r.x, y:keyframe.r.y, z:keyframe.r.z, ease:Sine.easeIn}, 0 );
  tl2.to( obj.position, dur, { x:keyframe.p.x*20, y:keyframe.p.y*20,  ease:Sine.easeIn}, 0);

  tl.add(tl2);

Working demo

希望这会有所帮助。

使用TimelineMax在Three.js中一次补间两个属性

jsFiddle Demo

1 个答案: