使用 TimelineMax 在 Three.js 中同时补间两个属性答案

【问题标题】：Tween two properties at once in Three.js with TimelineMax使用 TimelineMax 在 Three.js 中同时补间两个属性
【发布时间】：2019-04-30 16:07:53
【问题描述】：

TweenMax 不允许您在 Three.js 中在同一个补间中同时补间 2 个或多个属性。例如，您不能同时对 rotation 和 position 进行补间。您只能在一个补间或position 中补间rotation，但不能同时补间。

我设法通过将 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 个用于位置。

【问题讨论】：

标签： three.js gsap

【解决方案1】：

解决方案来自 PointC 和 Dipscom 的 the GSAP forums。特别感谢！

第一个也是更简单的解决方案是使用标签或position parameters。 Check the video tutorial.

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

Working demo

第二种解决方案是使用 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

希望这会有所帮助。

【讨论】：