Animotion - ビジュアルCSSアニメーションアプリ

 (cssanimotion.pages.dev)
4 ポイント 投稿者 GN⁺ 2023-11-26 | 1件のコメント | WhatsAppで共有
  • HNのタイトルは ビジュアルCSSアニメーションアプリ を指しているが、確認できるページ内容は MathML Input と LaTeX Output が中心
  • ページのメタデータ上では、このサイトは MathMLをLaTeXに変換 する無料のオンラインツールとして紹介されている
  • 実際の変換例、出力結果、精度、対応範囲といった 利用判断に必要な情報 は本文から確認しにくい
  • 別の領域には Drift Hunters Unblocked のゲーム実行リンクも含まれている
  • 現在の情報だけでは、CSSアニメーションアプリ機能とMathML変換器の動作方式の両方を明確に検証するのは難しい

確認できるページ構成

  • 上部の本文には MathML Input セクションと LaTeX Output セクションがある
  • メタ説明では、MathConvertを使ってMathMLをLaTeXに変換する無料オンラインコンバーターだと説明している
  • 学生、教育者、研究者向けの数式変換ツールとして紹介されているが、実際の入力フィールドやサンプル数式、対応するMathMLの範囲は提示されていない

あわせて表示されているゲームリンク

  • Play Online Games の下に Drift Hunters Unblocked の項目がある
  • この項目では、リアルなドリフトと車のカスタマイズを提供し、学校や職場でも動作すると案内している
  • Play Now リンクからゲームページへ移動できる

関連記事

1件のコメント

 
GN⁺ 2023-11-26
Hacker News のコメント

  • CSS3 が 1999 年に登場したにもかかわらず、2023 年にこうしたアプリが HN に載るほど興味を集めるというのは、簡単でアクセスしやすく、プログラミングや検査が可能な キーフレームベースのアニメーションがどれほど停滞していたかを示している
    Flash は 10 年ほど前に死んで空白を残し、残ったのは Adobe Animate という抜け殻と、その周辺にあるぱっとしないフレームワークやコミュニティだけだった
    CSS/SVG ベースの堅牢なアニメーションはほとんどが空約束のままで、良い例はあっても、いまだに狭い分野の技術に近い

    • After Effects は無料の bodymovin/Lottie プラグインで CSS/SVG/canvas アニメーションを書き出せる
      個人的には、Web のキーフレームアニメーションや要素を作るときに主に使っている方法
      After Effects のすべての機能を書き出せるわけではないが、このワークフローでは私が見つけた中で最も良く安定した解決策だった。以前から AE を使った経験があることも影響しているかもしれない
      現在の対応機能: http://airbnb.io/lottie/#/supported-features
    • この停滞は Adobe の責任が大きいと思う。Adobe が Macromedia を買収したとき、まさにこうなると予測していた人が多かったのを覚えている
      Adobe は意図的に何かを殺す会社で、Steve Jobs にも一定の責任がある
      もう彼らにお金を払わなくてよくなったのは本当に良いことだ。Serif ありがとう
    • 1999 年には Transitions と Transforms はなかった
      キーフレームを使ったまともな CSS アニメーションが初めて可能になったのは 2009 年で、その頃もブラウザ対応は良くなく、moz-、webkit- のようなプレフィックスやポリフィルが多く必要だった
      IE8 で動かない CSS3 アニメーションをわざわざ使う理由はなく、クロスブラウザの UI アニメーション提供という点では jQueryUI のほうがずっと先を行っていた
    • Web アニメーションはページを良くする場合が 5%、悪くする場合が 95% なので、こうした停滞が大きな問題だとはあまり感じない
      一生 Flash の「Loading…」画面をこれ以上見たくないし、特にナビゲーションメニューを見るためにそんなものを待つ必要はない
      即座に読み込まれるブロードバンド環境でも、ナビゲーションメニューはアニメーションがないほうが良く、マストヘッド下の機能紹介エリアもアニメーションがないほうが良い
    • Flash は、より高速で安価なインターネットと 動画ストリーミング・ホスティングが普及するまでの隙間を埋めた技術のように感じる
      今でも需要はあるが、あまりにニッチになっており、人々は主にモバイル端末でコンテンツを消費し、リッチメディアコンテンツも動画形式で十分に提供されている

  • 最初に試したかったのは キーフレームの位置を移動することだったが、まだ機能としてはなさそう

    • カット＆ペーストで キーフレームの位置を変えられる

  • 出力がライブラリに縛られた JavaScript コードではなく CSS なのが良い

  • モバイルでアイコンが何をするのかを知らせる ツールチップやヒントをうまく提供する方法はあるだろうか？
    いくつかのアイコンは意味がわからず、押してみればいいのだが、上で述べたように元に戻す機能がないので気が重い

    • 元に戻す/やり直しが追加された

  • エディタは本当に直感的で良さそう
    もう少し高度なタイムラインが必要な人は Theatre.js も確認してみるとよい。Web プラットフォームでモーション関連ツールが増えるのはうれしい

  • 素晴らしいツールなので、少し CSS アニメーションで遊んでみたくなった
    アニメーションプリセットにいくつか タイミング関数を追加すると良さそう。今はそれらがないので、少し単調に見える

  • ソースはここにある: https://github.com/animotionjs/animotion

  • モバイルでも驚くほど 直感的

    • アニメーションをその場で編集して、動きに合わせてキーフレームで要素を伸ばすようにして 柔らかい感じを追加でき、かなり満足だった
      ただ、元に戻す/やり直しが見つからなかった。モバイルやデスクトップにそういう機能はあるのだろうか？

  • GPT-4 も 複雑な CSS アニメーションを生成するのにかなり優れていることがわかった