Наистина съм нов с 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});
}
TimelineLite на .to() синтаксисът на метода е както следва:
timeline.to(target, duration, vars, position);
Този четвърти position параметър е нещо, което можете да използвате, за да позиционирате точно където искате да се появи вашият tween. Така че бихте могли например да направите:
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 тук: Съвет за времевата линия: Разбиране на параметъра за позиция.
.fromTo() методът на TimelineLite може да ви помогне с това.
- person Tahir Ahmed; 21.08.2015
delay към конструктора на TimelineLite обект по следния начин: ... = new TimelineLite({ delay: xxx });.
- person Tahir Ahmed; 21.08.2015
