Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
anime.js und SVG Animationen
#1
Question 
Hallo :Smile Habe mich gerade registriert und hoffe es stört niemanden, dass ich direkt mit einer banalen Frage komme. Ich probiere mich derzeit an SVG animationen und bin dabei auf anime.js gestoßen. In einem << Tutorial>> fand ich einen praktischen Anwendungsfall für mich. Leider funktioniert das animieren so rein gar nicht bei mir, und egal welche Parameter ich verändere ich krieg es nicht zum laufen. Wie gesagt, wahrscheinlich mache ich etwas grundlegendes falsch und finde es einfach nicht  Huh  Confused

Hoffe ihr könnt mir helfen: 


Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>

<link rel="stylesheet" href="style.css">
<script src="anime.min.js"></script>
</head>

<body>
    
    
    
    <svg viewBox="0 0 300 100">
        <rect class="polymorph" width="100%" height="100%"/>
        <polygon class="polymorph" points="300,100 0,100 0,0 58.7,0 300,0"/>
    </svg>

    
    
    <script>
        
var morphing = anime({
 targets: '#morphing .polymorph',
 points: [
   { value: '300,100 0,100 0,0 58.7,0 78,70' }
   
 ],
 easing: 'easeOutQuad',
 duration: 2000,
 loop: true
});
</script>
    
    
    
</body>
</html>
Zitieren
#2
Achso, vielleicht wundert sich jetzt jemand warum der HTML Teil minimal anders aussieht als es der Kerl am Video vormacht. In der version wie im Video gezeigt wird, wird bei mir nicht einmal die SVG Grafik angezeigt. Darum hab ich folgende Codezeile beigelassen:

Code:
<rect class="polymorph" width="100%" height="100%"/>
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste