Твин два свойства одновременно в Three.js с TimelineMax - PullRequest
Новая
       142

Твин два свойства одновременно в Three.js с TimelineMax

0 голосов
/ 30 апреля 2019

TweenMax не позволяет вам анимировать 2 или более свойств одновременно в Three.js для одной и той же анимации.Например, вы не можете анимировать 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 для положения.

1 Ответ

0 голосов
/ 30 апреля 2019

Решение пришло от форумов GSAP от PointC и Dipscom . Отдельное спасибо!

Первое и более простое решение - использовать метки или position parameters. Проверьте видеоурок. 

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

Рабочая демоверсия

Второе решение заключается в использовании 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);

Рабочая демоверсия

Надеюсь, это поможет.

...