Затухание разных предметов и разное время с помощью Greensock Tween

Я действительно новичок в GSAP, и я думаю, что это потрясающе. Однако я не могу понять, как постепенно добавлять эти элементы по отдельности.

1-й (это нормально) для 2-го желания исчезать в определенное время и 3-го в определенное время.

JavaScript:

function startFinalAnimation(){
    var fa = new TimelineLite();
    fa.to(finalAvatar, 2, {scale: 0.45, delay: 0, opacity: 1, transformOrigin:"-3% 8.8%"});
    fa.to(finalContent, 4, {delay: 0, opacity: 1});
    fa.to(logo, 5, {delay: 0, opacity: 1});
}

javascript gsap
person James    schedule 21.08.2015    source источник
comment
Вы можете добавить имя к каждой анимации и установить для нее задержку greensock.com/docs/ #/HTML5/GSAP/TimelineLite   -  person    schedule 21.08.2015
comment
Также рекомендую посмотреть их видео-пример — greensock.com/sequence-video.   -  person    schedule 21.08.2015

Ответы (1)


arrow_upward
1
arrow_downward

TimelineLite .to() синтаксис метода следующий:

timeline.to(target, duration, vars, position);

Этот четвертый параметр position — это то, что вы можете использовать для точного позиционирования вашего твина там, где вы хотите, чтобы он появлялся. Итак, вы могли бы, например, сделать:

function startFinalAnimation(){
    var fa = new TimelineLite();
    fa.to(finalAvatar, 2, { scale: 0.45, opacity: 1, transformOrigin:"-3% 8.8%" });
    fa.to(finalContent, 4, { opacity: 1 }, '-=1');
    fa.to(logo, 5, { opacity: 1 }, '-=2');
}

Здесь -=1 (и -=2) в основном говорят, что анимация должна быть добавлена ​​с наложением 1 секунды на конец предыдущей анимации, а не по умолчанию, которая должна добавляться в самом конце ранее добавленной анимации.

Существует множество способов предоставления position. Выше я использовал -=. Другие варианты (взято из приведенной ниже ссылки):

  • в абсолютное время (1).
  • относительно конца временной шкалы с учетом пробелов ("+=1") или перекрытий ("-=1").
  • по метке ("someLabel").
  • относительно метки ("someLabel+=1").

Подробнее о параметре position читайте здесь: Совет по временной шкале: понимание параметра положения.

person Tahir Ahmed    schedule 21.08.2015
comment
Вроде не работает, просто все происходит одновременно. - person James; 21.08.2015
comment
Не могли бы вы приготовить быструю скрипку, пожалуйста? - person Tahir Ahmed; 21.08.2015
comment
вам нужно сначала установить начальные переменные, прежде чем вы сможете добраться до переменных назначения. Метод .fromTo() от TimelineLite может помочь вам с этим. - person Tahir Ahmed; 21.08.2015
comment
Другой способ решения той же проблемы с установкой значений: это. - person Tahir Ahmed; 21.08.2015
comment
возможно, вы захотите поделиться скрипкой со всем своим контентом :) - person Tahir Ahmed; 21.08.2015
comment
Он слишком большой и сложный со всем остальным кодом, я дважды запускал функцию, вот почему это происходило. Однако, похоже, он показывает finalContent при загрузке страницы, а затем исчезает и снова появляется по этому таймеру ... я посмотрю, не вызывает ли это что-то еще, но думал, что он скрывался, чтобы начать с него? - person James; 21.08.2015
comment
также есть ли способ отложить начало первой анимации, поэтому подождите несколько секунд, прежде чем сработает transformOrigin? - person James; 21.08.2015
comment
вы можете отложить всю последовательность временной шкалы, добавив параметр delay в конструктор объекта TimelineLite следующим образом: ... = new TimelineLite({ delay: xxx });. - person Tahir Ahmed; 21.08.2015
comment
или вы также можете добавить задержки к отдельным анимациям, например, к тому, что у вас есть в вашем вопросе. - person Tahir Ahmed; 21.08.2015
comment
у тебя тоже есть таймер? Мне интересно, какой у вас здесь подход. - person Tahir Ahmed; 21.08.2015
comment
Хорошо, удалось разобраться :) еще раз спасибо за вашу помощь. - person James; 21.08.2015
comment
рад, что вы сделали. без проблем. - person Tahir Ahmed; 21.08.2015