Animotion – visuelle CSS-Animations-App

 (cssanimotion.pages.dev)
4 Punkte von GN⁺ 2023-11-26 | 1 Kommentare | Auf WhatsApp teilen
  • Der HN-Titel verweist zwar auf eine visuelle CSS-Animations-App, der überprüfbare Seiteninhalt konzentriert sich jedoch auf MathML Input und LaTeX Output
  • Laut Seitenmetadaten wird die Website als kostenloses Online-Tool zur Umwandlung von MathML in LaTeX vorgestellt
  • Informationen zur Bewertung der Nutzung, etwa konkrete Umwandlungsbeispiele, Ausgaberesultate, Genauigkeit oder unterstützter Umfang, sind im Inhalt schwer zu finden
  • In einem separaten Bereich ist außerdem ein Link zum Spiel Drift Hunters Unblocked enthalten
  • Auf Basis der derzeitigen Informationen lassen sich weder die Funktionen der CSS-Animations-App noch die Funktionsweise des MathML-Konverters eindeutig verifizieren

Überprüfbare Seitenstruktur

  • Im oberen Hauptbereich gibt es die Abschnitte MathML Input und LaTeX Output
  • Die Meta-Beschreibung nennt MathConvert einen kostenlosen Online-Konverter zur Umwandlung von MathML in LaTeX
  • Das Tool wird als Formelkonverter für Studierende, Lehrkräfte und Forschende vorgestellt, bietet jedoch kein tatsächliches Eingabefeld, keine Beispielformeln und keine Angaben zum unterstützten MathML-Umfang

Zusätzlich angezeigter Spiele-Link

  • Unter Play Online Games gibt es den Eintrag Drift Hunters Unblocked
  • Dieser Eintrag beschreibt realistischen Drift und Fahrzeuganpassung und weist darauf hin, dass das Spiel in Schulen und am Arbeitsplatz funktioniert
  • Über den Link Play Now gelangt man zur Spieleseite

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-11-26
Hacker-News-Kommentare

  • Obwohl CSS3 schon 1999 erschien, zeigt die Tatsache, dass eine solche App 2023 interessant genug ist, um auf HN zu landen, wie sehr einfache, zugängliche sowie programmier- und prüfbare Keyframe-basierte Animationen stagniert haben
    Flash starb vor etwa zehn Jahren und hinterließ eine Lücke; übrig blieben nur die Hülle namens Adobe Animate und ein paar mittelmäßige Frameworks und Communities drumherum
    Solide Animationen auf CSS/SVG-Basis blieben größtenteils ein leeres Versprechen, und selbst wenn es gute Beispiele gibt, wirken sie noch immer eher wie eine Nischentechnik

    • After Effects kann mit dem kostenlosen bodymovin/Lottie-Plugin CSS/SVG/canvas-Animationen exportieren
      Persönlich ist das mein bevorzugter Weg, wenn ich Web-Keyframe-Animationen und Elemente erstelle
      Nicht alle Funktionen von After Effects lassen sich exportieren, aber für diesen Workflow war es die beste und stabilste Lösung, die ich gefunden habe. Meine frühere Erfahrung mit AE könnte dabei eine Rolle gespielt haben
      Aktuell unterstützte Funktionen: http://airbnb.io/lottie/#/supported-features
    • Ich denke, an dieser Stagnation trägt Adobe eine große Verantwortung. Ich erinnere mich, dass viele genau so etwas vorhergesagt hatten, als Adobe Macromedia kaufte
      Adobe ist ein Unternehmen, das Dinge absichtlich sterben lässt, und Steve Jobs trägt ebenfalls einen Teil der Verantwortung
      Es ist wirklich schön, ihnen jetzt kein Geld mehr geben zu müssen. Danke, Serif
    • 1999 gab es noch keine Transitions und Transforms
      Echte CSS-Animationen mit Keyframes wurden erst 2009 möglich, und selbst damals war die Browserunterstützung schlecht, sodass viele Präfixe wie moz-, webkit- und Polyfills nötig waren
      Es gab keinen wirklichen Grund, CSS3-Animationen zu nutzen, die in IE8 nicht funktionierten, und in Sachen browserübergreifender UI-Animationen war jQueryUI deutlich weiter
    • Webanimationen machen Seiten in 5 % der Fälle besser und in 95 % schlechter, daher empfinde ich diese Stagnation nicht als großes Problem
      Ich möchte in meinem Leben keine weiteren „Loading…“-Bildschirme von Flash sehen, schon gar nicht, nur um ein Navigationsmenü zu sehen
      Selbst in einer Breitbandumgebung mit sofortigem Laden sind Navigationsmenüs ohne Animation besser, und auch der Feature-Bereich unter dem Masthead ist ohne Animation besser
    • Flash fühlt sich wie eine Technologie an, die die Lücke überbrückte, bis schnelleres, günstigeres Internet sowie Videostreaming und -hosting massentauglich wurden
      Auch heute gibt es noch Nachfrage, aber sie ist zu sehr zur Nische geworden; Menschen konsumieren Inhalte hauptsächlich auf Mobilgeräten, und reichhaltige Medieninhalte lassen sich ausreichend gut als Video bereitstellen

  • Das Erste, was ich ausprobieren wollte, war, Keyframe-Positionen zu verschieben, aber das scheint noch keine Funktion zu sein

    • Per Ausschneiden/Einfügen kann man Keyframe-Positionen ändern

  • Mir gefällt, dass das Ergebnis CSS ist und kein an eine Library gebundener JavaScript-Code

  • Gibt es eine gute Möglichkeit, auf Mobilgeräten Tooltips oder Hinweise bereitzustellen, die erklären, was die Icons tun?
    Bei einigen Icons weiß ich nicht, was sie bedeuten, und man kann sie zwar einfach antippen, aber wie oben erwähnt gibt es kein Rückgängig, was die Hemmschwelle erhöht

    • Rückgängig/Wiederholen wurde hinzugefügt

  • Der Editor wirkt wirklich intuitiv und gut
    Wer eine etwas fortgeschrittenere Timeline braucht, sollte sich auch Theatre.js ansehen. Es ist schön zu sehen, dass es auf der Webplattform mehr Tools rund um Bewegung gibt

  • Ein großartiges Tool, das mich kurz dazu gebracht hat, mit CSS-Animationen herumzuspielen
    Es wäre schön, den Animations-Presets ein paar Timing-Funktionen hinzuzufügen. Im Moment fehlen sie, wodurch es etwas flach wirkt

  • Der Source ist hier: https://github.com/animotionjs/animotion

  • Auch auf Mobilgeräten überraschend intuitiv

    • Ich konnte die Animation direkt bearbeiten und etwa Elemente an Keyframes passend zur Bewegung strecken, um ein weiches, federndes Gefühl hinzuzufügen, und war ziemlich zufrieden damit
      Allerdings konnte ich Rückgängig/Wiederholen nicht finden. Gibt es diese Funktion auf Mobilgeräten oder Desktop?

  • Ich habe festgestellt, dass GPT-4 auch ziemlich gut darin ist, komplexe CSS-Animationen zu erzeugen