Heute werde ich eine atemberaubende Webanimation basierend auf JQuery und SVG mit Ihnen teilen. Der Animationseffekt ist sehr cool. Unten gibt es außerdem Schaltflächen für Wiedergabe, Zeitlupe und Rückwärtsanimation. Der Effekt ist sehr schön. Werfen wir einen Blick auf die Renderings:
Implementierungscode.
http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink „
version="1.1" id="ihtLogo" x="0" y="0" viewbox="0 0 308.8 152.1" xml:space="preserve"
enable-background="new 0 0 308.8 152.1">
.tomatoLeft, .tomatoRight
{
füllen: #D74022;
}
.bracketLeft, .bracketRight
{
füllen: #4D4D4F;
}
.s2
{
füllen: keine;
Strichzeilenkappe: rund;
Hub-Gehrungsgrenze: 10;
Strichstärke: 10;
Schlaganfall: #FFF;
}
.tomatoLeaves
{
Füllung: #95D600;
}
& lt; Pfad d = "M122.3 127c12.1 12.1 29 19.4 47,6 18.8 33.7-1.1 61.1-28.5 62.2-62.2 0.6-18.6-6.7-35.5-18.8-47.6L122.3 127z" Class = "Tomatoright"/& Gt;
http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink „
version="1.1" id="ihtText" x="0" y="0" viewbox="0 0 148.2 23" enable-background="new 0 0 148.2 23"
xml:space="preserve">
<script><br>
var tomato = $('#tomato'), BracketRight = $('.bracketRight'), BracketLeft = $('.bracketLeft'), tomatoLeft = $('.tomatoLeft'), tomatoRight = $('.tomatoRight') , tomatoLeaves = $('.tomatoLeaves'), Buchstaben = $('#ihtText path'), $btnPlay = $('#btnPlay'), $btnSlowMo = $('#btnSlowMo'), $btnReverse = $(' #btnReverse'), tl;<br>
tl = new TimelineMax();<br>
tl.set([tomatoLeft], { xPercent: 23.6 });<br>
tl.set([tomatoLeaves], { xPercent: 41 });<br>
tl.set([Tomate], {<br>
xPercent: 2,<br>
Rotation: 13,<br>
transformOrigin: 'center center'<br>
});<br>
tl.set(tomato, { yPercent: -200 });<br>
tl.set(bracketRight, { xPercent: 200 });<br>
tl.set(bracketLeft, { xPercent: -200 });<br>
tl.to([<br>
KlammerRechts,<br>
KlammerLinks<br>
], 0,3, {<br>
xPercent: 0,<br>
Leichtigkeit: Power4.easeOut<br>
}, 0,5).to(Tomate, 0,5, {<br>
yProzent: 0,<br>
Leichtigkeit: Bounce.easeOut<br>
}).to(Tomate, 0,2, {<br>
Rotation: 0,<br>
xProzent: -4<br>
}).to([<br>
tomatoLeft,<br>
Tomatenblätter<br>
], 0.2, { xPercent: 0 }, 'split').to(tomato, 0.2, {<br>
Rotation: 0,<br>
xPercent: 0<br>
}, 'split').to(tomatoRight, 0.2, { xPercent: 2 }, 'split').staggerFrom(letters, 0.01, { autoAlpha: 0 }, 0.03).add('end');<br>
$btnPlay.click(function () {<br>
tl.timeScale(1).seek(0);<br>
});<br>
$btnSlowMo.click(function () {<br>
tl.timeScale(0.2).seek(0.5);<br>
});<br>
$btnReverse.click(function () {<br>
tl.timeScale(1).seek('end').reverse();<br>
});<br>
//@ sourceURL=pen.js<br>
</script>