0
J'utilise la bibliothèque d'animation de chaussettes vertes pour faire des animations. Voici mon code.Greensock: TweenMax Redémarrage de la ligne de temps multiple
Code TweenMax:
var slide4 = (function() {
function animate() {
var timelineFour = new TimelineLite();
timelineFour.to("#brand-welcome-para", 1, {
'margin-top': 0,
'opacity': 1,
'delay': 1
})
.to("#slide-1-creator-icon", 0.6, {
'top': 300,
'left': 45,
'width': 155,
'height': 155,
ease: Elastic.easeOut
})
.to("#avatar-one", 0.6, {
'left': 27,
rotation: '-360'
})
.to("#avatar-two", 0.6, {
'left': 100,
rotation: '-360'
})
.to("#avatar-four", 0.6, {
'left': '-50',
rotation: '360'
})
.to("#cover-one", 1, {
width: 0,
ease: Linear.easeNone
}, 'firstLoop')
.to("#slide-1-tandem-icon", 0.6, {
'top': 300,
'width': 155,
'height': 155,
ease: Elastic.easeOut
})
.to("#cover-one-two", 1, {
width: 0,
ease: Linear.easeNone
})
.to("#slide-1-brand-icon", 0.6, {
'top': 300,
'right': 45,
'width': 155,
'height': 155,
ease: Elastic.easeOut
})
.to("#cover-two", 2, {
width: 0,
ease: Linear.easeNone
});
var timelineChild = new TimelineMax({
repeat: -1,
onComplete: complete,
delay: 4
});
timelineChild.to("#rotator", 1, {
rotation: -90,
delay: 1
}, 'firstLoop')
.to("#avatar-one", 1, {
rotation: -270,
delay: 1
}, 'firstLoop')
.to("#avatar-two", 1, {
rotation: -270,
delay: 1
}, 'firstLoop')
.to("#avatar-three", 1, {
rotation: -270,
delay: 1
}, 'firstLoop')
.to("#avatar-four", 1, {
rotation: -270,
delay: 1
}, 'firstLoop')
.to("#rotator", 1, {
rotation: -180,
delay: 1
}, 'secondLoop')
.to("#avatar-one", 1, {
rotation: -180,
delay: 1
}, 'secondLoop')
.to("#avatar-two", 1, {
rotation: -180,
delay: 1
}, 'secondLoop')
.to("#avatar-three", 1, {
rotation: -180,
delay: 1
}, 'secondLoop')
.to("#avatar-four", 1, {
rotation: -180,
delay: 1
}, 'secondLoop')
.to("#rotator", 1, {
rotation: -270,
delay: 1
}, 'thirdLoop')
.to("#avatar-one", 1, {
rotation: -90,
delay: 1
}, 'thirdLoop')
.to("#avatar-two", 1, {
rotation: -90,
delay: 1
}, 'thirdLoop')
.to("#avatar-three", 1, {
rotation: -90,
delay: 1
}, 'thirdLoop')
.to("#avatar-four", 1, {
rotation: -90,
delay: 1
}, 'thirdLoop')
.to("#rotator", 1, {
rotation: -360,
delay: 1
}, 'fourthLoop')
.to("#avatar-one", 1, {
rotation: 0,
delay: 1
}, 'fourthLoop')
.to("#avatar-two", 1, {
rotation: 0,
delay: 1
}, 'fourthLoop')
.to("#avatar-three", 1, {
rotation: 0,
delay: 1
}, 'fourthLoop')
.to("#avatar-four", 1, {
rotation: 0,
delay: 1
}, 'fourthLoop');
function complete(timelineChild) {
timelineChild.restart(); // 0 sets the playhead at the end of the animation
}
}
function restart() {
timelineFour.restart();
}
function getTimeline() {
return timelineFour;
}
return {
animate: animate,
restart: restart,
timeline: getTimeline
}
})();
Je veux redémarrer cette ligne de temps sur un bouton de clic HTML.
peut vous mettre en place un violon s'il vous plaît? en regardant votre code, il n'est pas très clair sur ce qui se passe actuellement. également, montrez-nous le code que vous avez essayé de cliquer sur un bouton et essayez de redémarrer la timeline. –
@TahirAhmed: Il est très difficile de mettre tout le code de travail ensemble. comme la vue est rendue en utilisant la déroute angulaire. Justement, je veux juste savoir comment puis-je redémarrer deux timelines en même temps en utilisant une fonction qui est elle. –
peut-être des appels simples à 'timelineFour.restart();' & 'timelineChild.restart();' ferait à l'intérieur de votre gestionnaire de clic de bouton. tir dans le noir ici parce que je ne peux pas comprendre le tout. Vous semblez déjà connaître cette solution, je pense. –