Animotion — application visuelle d’animations CSS

 (cssanimotion.pages.dev)
4 points par GN⁺ 2023-11-26 | 1 commentaires | Partager sur WhatsApp
  • Le titre sur HN indique une application visuelle d’animations CSS, mais le contenu vérifiable de la page est centré sur MathML Input et LaTeX Output
  • D’après les métadonnées de la page, ce site est présenté comme un outil en ligne gratuit pour convertir du MathML en LaTeX
  • Les informations utiles pour juger du service, comme des exemples de conversion réels, les résultats de sortie, la précision ou l’étendue de la prise en charge, sont difficiles à vérifier dans le corps de la page
  • Une section distincte contient également un lien pour lancer le jeu Drift Hunters Unblocked
  • Avec les seules informations disponibles actuellement, il est difficile de vérifier clairement à la fois les fonctionnalités de l’application d’animations CSS et le fonctionnement du convertisseur MathML

Structure vérifiable de la page

  • Le corps principal en haut de page comporte une section MathML Input et une section LaTeX Output
  • La méta-description indique qu’il s’agit d’un convertisseur en ligne gratuit utilisant MathConvert pour convertir du MathML en LaTeX
  • L’outil est présenté comme destiné aux étudiants, enseignants et chercheurs pour convertir des formules, mais aucun champ de saisie réel, exemple de formule ni périmètre MathML pris en charge n’est fourni

Lien de jeu également affiché

  • Sous Play Online Games, on trouve l’élément Drift Hunters Unblocked
  • Celui-ci est décrit comme proposant du drift réaliste et de la personnalisation de voitures, et comme fonctionnant à l’école et au travail
  • Le lien Play Now permet d’accéder à la page du jeu

À lire aussi

1 commentaires

 
GN⁺ 2023-11-26
Avis sur Hacker News

  • Même si CSS3 est sorti en 1999, le fait qu’une application de ce type soit encore suffisamment intéressante pour arriver sur HN en 2023 montre à quel point l’animation basée sur des keyframes, simple, accessible, programmable et inspectable, a stagné
    Flash est mort il y a une dizaine d’années en laissant un vide, et il ne reste qu’une coquille nommée Adobe Animate, avec autour d’elle des frameworks et communautés assez quelconques
    Les animations solides basées sur CSS/SVG sont pour l’essentiel restées des promesses creuses et, même s’il existe de bons exemples, cela reste une compétence de niche

    • After Effects peut exporter des animations CSS/SVG/canvas via le plugin gratuit bodymovin/Lottie
      Personnellement, c’est la méthode que j’utilise le plus souvent pour créer des animations à keyframes et des éléments web
      Toutes les fonctionnalités d’After Effects ne peuvent pas être exportées, mais pour ce workflow, c’est la solution la meilleure et la plus stable que j’aie trouvée. Mon expérience préalable avec AE a peut-être aussi joué
      Fonctionnalités actuellement prises en charge : http://airbnb.io/lottie/#/supported-features
    • Je pense que cette stagnation est en grande partie la faute d’Adobe. Je me souviens que beaucoup de gens avaient prédit exactement cela quand Adobe a racheté Macromedia
      Adobe est une entreprise qui tue délibérément des choses, et Steve Jobs porte aussi une part de responsabilité
      Je suis vraiment content de ne plus avoir à leur donner d’argent. Merci Serif
    • En 1999, il n’y avait pas de Transitions ni de Transforms
      Les véritables animations CSS avec keyframes ne sont devenues possibles qu’en 2009, et même alors la prise en charge par les navigateurs était mauvaise, avec beaucoup de préfixes comme moz-, webkit- et de polyfills nécessaires
      Il n’y avait pas vraiment de raison d’utiliser des animations CSS3 qui ne fonctionnaient pas dans IE8, et jQueryUI était largement en avance pour fournir des animations d’interface cross-browser
    • Les animations web améliorent les pages dans 5 % des cas et les dégradent dans 95 % des cas, donc je ne trouve pas que cette stagnation soit un gros problème
      Je ne veux plus jamais voir d’écrans « Loading… » de Flash de toute ma vie, surtout pas devoir attendre ça pour voir un menu de navigation
      Même dans un contexte haut débit où tout charge instantanément, les menus de navigation sont meilleurs sans animation, et les zones de présentation sous le masthead aussi
    • Flash me donne l’impression d’avoir été une technologie qui a comblé le fossé avant la généralisation d’un Internet plus rapide et moins cher, ainsi que du streaming et de l’hébergement vidéo
      Il y a encore de la demande aujourd’hui, mais c’est devenu très niche, et les gens consomment surtout du contenu sur mobile, tandis que les contenus multimédias riches peuvent être fournis de manière tout à fait suffisante sous forme de vidéo

  • La première chose que j’ai voulu essayer, c’était déplacer la position d’une keyframe, mais cela ne semble pas encore exister comme fonctionnalité

    • On peut changer la position d’une keyframe avec couper/coller

  • J’aime le fait que le résultat soit du CSS, et non du code JavaScript lié à une bibliothèque

  • Existe-t-il une bonne façon, sur mobile, de fournir des tooltips ou des indices expliquant ce que font les icônes ?
    Pour certaines icônes, je ne comprends pas leur signification ; on peut toujours appuyer dessus pour voir, mais comme dit plus haut, sans annulation, ça met un peu la pression

    • Annuler/rétablir a été ajouté

  • L’éditeur a vraiment l’air intuitif et réussi
    Les personnes qui ont besoin d’une timeline plus avancée peuvent aussi jeter un œil à Theatre.js. C’est réjouissant de voir davantage d’outils liés au mouvement arriver sur la plateforme web

  • C’est un excellent outil, qui m’a donné envie de jouer un peu avec les animations CSS
    Ce serait bien d’ajouter quelques fonctions de temporisation aux préréglages d’animation. Pour l’instant, leur absence donne un rendu un peu plat

  • Le code source est ici : https://github.com/animotionjs/animotion

  • C’est étonnamment intuitif même sur mobile

    • J’ai pu modifier directement l’animation et ajouter une sensation élastique en étirant les éléments sur les keyframes en fonction du mouvement, et le résultat m’a plutôt satisfait
      En revanche, je n’ai pas trouvé la fonction annuler/rétablir. Existe-t-elle sur mobile ou desktop ?

  • J’ai découvert que GPT-4 est aussi assez bon pour générer des animations CSS complexes