0
Guten Tag, Ich arbeite an einem Banner mit einer GreenSock-Animation. Für die Prägnanz habe ich alles entfernt und nur einen springenden Ball übrig gelassen. Die Animation wiederholt sich so oft, wie es in einer definierten Variablen ("loop") angegeben ist. Das erste Mal, wenn alles gut funktioniert, kommt das Problem auf die zweiten (und dritten usw.) Wiederholungen - eines der Tweens (das zweite) wird nicht korrekt ausgeführt, genauer gesagt, seine "Top" -Eigenschaft wird nicht ausgeführt. Wenn ich den Positionsparameter auf dem folgenden dritten Tween entferne, funktioniert alles gut, aber ich will es offensichtlich damit :). Vielen Dank! Hier ist der Code:GreenSock-Animation nicht ordnungsgemäß ausgeführt nach dem ersten Lauf
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/plugins/CSSPlugin.min.js"></script>
</head>
<body>
<div id="banner">
<img id="ball" src="ball.png"/>
</div>
<style>
#banner{
height: 600px;
width: 160px;
background-color: black;
}
#ball{
position: absolute;
height: 50px;
width: 50px;
top: -50px;
left: 60px;
}
</style>
<script>
var ball = document.getElementById("ball");
var loop = 2;
var tween1 = new TimelineLite({onComplete: onAnimationComplete});
tween1.to(ball, 0.1, {top: 100, left: 0})
.to(ball, 0.3, {top: 480, left: 52})
.to(ball, 0.3, {top: 160, rotation: 360}, '-=0.1')
.to(ball, 0.1, {top: 160})
.to(ball, 0.2, {top: 420})
.to(ball, 0.1, {left: -60, top: 530});
function onAnimationComplete() {
if (loop > 0) {
loop -= 1;
}
if (loop !== 0) {
setTimeout(function() {
tween1.pause().progress(0);
}, 2000);
setTimeout(function() {
tween1.restart();
}, 4000);
}
}</script>
</body>
</html>
Es kann etwas mit dem '- = 0.1' Wert zu tun, der an die 3. in das Tween übergeben wird. – CodeToad
Um das Testen zu erleichtern, habe ich einen Plunkr Ihres Codes (mit anderer Hintergrundfarbe und Ball für Convenience) hier erstellt: https://plnkr.co/edit/wM78M14dvHDotCWUPksk?p=preview – CodeToad
Danke Mann! Das Problem ist, dass ohne den Positionsparameter ("- = 0.1") die Animation gut funktioniert, aber damit sieht der Effekt eines springenden Balls viel besser aus und deshalb möchte ich ihn in der Zeitleiste haben. Eigentlich will ich es nach fünf Tagen nicht mehr haben, es macht mich nur wahnsinnig, dass ich es nicht lösen kann :) – Chonata