Animotion — aplicativo visual de animação CSS

 (cssanimotion.pages.dev)
4 pontos por GN⁺ 2023-11-26 | 1 comentários | Compartilhar no WhatsApp
  • Embora o título no HN aponte para um aplicativo visual de animação CSS, o conteúdo verificável da página é centrado em MathML Input e LaTeX Output
  • Pelos metadados da página, o site é apresentado como uma ferramenta online gratuita para converter MathML em LaTeX
  • Informações para avaliar o uso, como exemplos reais de conversão, resultados de saída, precisão e escopo de suporte, são difíceis de confirmar no corpo do texto
  • Uma área separada também inclui um link para executar o jogo Drift Hunters Unblocked
  • Com as informações atuais, é difícil verificar claramente tanto os recursos de aplicativo de animação CSS quanto o funcionamento do conversor de MathML

Estrutura verificável da página

  • O corpo principal no topo tem as seções MathML Input e LaTeX Output
  • A metadescrição informa que se trata de um conversor online gratuito que usa o MathConvert para converter MathML em LaTeX
  • Ele é apresentado como uma ferramenta de conversão de fórmulas voltada a estudantes, educadores e pesquisadores, mas não oferece campo de entrada real, fórmulas de exemplo nem o escopo de MathML suportado

Link de jogo exibido junto

  • Em Play Online Games, há o item Drift Hunters Unblocked
  • O item informa que oferece drift realista e customização de carros, e que funciona em escolas e locais de trabalho
  • É possível ir para a página do jogo pelo link Play Now

Leituras relacionadas

1 comentários

 
GN⁺ 2023-11-26
Comentários do Hacker News

  • O CSS3 saiu em 1999, e ainda assim o fato de um app desses ser interessante o bastante para aparecer no HN em 2023 mostra o quanto a animação baseada em keyframes que seja fácil, acessível e programável/inspecionável ficou estagnada
    O Flash morreu há uns 10 anos e deixou um vazio, e o que sobrou foi a casca chamada Adobe Animate e, ao redor dela, apenas frameworks e comunidades mais ou menos
    Animações robustas baseadas em CSS/SVG em sua maioria continuaram sendo promessas vazias, e embora existam bons exemplos, isso ainda parece uma tecnologia de nicho

    • O After Effects pode exportar animações CSS/SVG/canvas com o plugin bodymovin/Lottie, que é gratuito
      Pessoalmente, é a forma que mais uso para criar animações e elementos com keyframes para a web
      Nem todos os recursos do After Effects podem ser exportados, mas, nesse fluxo de trabalho, foi a melhor e mais estável solução que encontrei. Minha experiência anterior com AE também pode ter influenciado
      Recursos com suporte atualmente: http://airbnb.io/lottie/#/supported-features
    • Acho que essa estagnação é em grande parte culpa da Adobe. Lembro que muita gente previu exatamente isso quando a Adobe comprou a Macromedia
      A Adobe é uma empresa que mata coisas de propósito, e o Steve Jobs também tem parte da culpa
      É muito bom não precisar mais dar dinheiro para eles. Obrigado, Serif
    • Em 1999, Transitions e Transforms não existiam
      Animações CSS de verdade usando keyframes só se tornaram possíveis pela primeira vez em 2009, e mesmo assim o suporte dos navegadores era ruim, então era preciso usar muitos prefixos como moz- e webkit-, além de polyfills
      Não havia motivo para usar animações CSS3 que não funcionavam no IE8, e, em termos de oferecer animações de UI cross-browser, o jQueryUI estava muito mais à frente
    • Animações na web melhoram a página em 5% dos casos e pioram em 95%, então não sinto que essa estagnação seja um grande problema
      Não quero passar o resto da vida vendo telas de “Loading...” do Flash, especialmente para esperar só para ver um menu de navegação
      Mesmo em conexões rápidas com carregamento instantâneo, menus de navegação ficam melhores sem animação, e a área de destaque abaixo do masthead também fica melhor sem animação
    • O Flash parece ter sido uma tecnologia que preencheu a lacuna antes de internet mais rápida e barata e da popularização de streaming e hospedagem de vídeo
      Ainda existe demanda hoje, mas virou algo nichado demais, e as pessoas consomem conteúdo principalmente em dispositivos móveis, enquanto conteúdo rico em mídia já pode ser oferecido muito bem em formato de vídeo

  • A primeira coisa que eu quis fazer foi mover a posição de um keyframe, mas isso ainda não parece existir como recurso

    • Dá para mudar a posição do keyframe com cortar/colar

  • Gostei que o resultado é CSS, e não código JavaScript preso a uma biblioteca

  • Existe uma boa forma de oferecer tooltips ou dicas no mobile para explicar o que os ícones fazem?
    Não entendi o significado de alguns ícones, e até dá para ir apertando para descobrir, mas, como foi dito acima, isso dá receio porque não havia desfazer

    • Desfazer/refazer foi adicionado

  • O editor parece realmente intuitivo e muito bom
    Quem precisar de uma timeline mais avançada talvez queira conferir o Theatre.js também. É bom ver mais ferramentas relacionadas a motion surgindo na plataforma web

  • Ferramenta excelente; deu vontade de brincar um pouco com animações CSS
    Seria legal adicionar algumas funções de timing aos presets de animação. No momento elas não estão lá, então tudo parece um pouco sem graça

  • O código-fonte está aqui: https://github.com/animotionjs/animotion

  • Mesmo no mobile, é surpreendentemente intuitivo

    • Consegui editar a animação diretamente e adicionar uma sensação mais maleável, esticando elementos nos keyframes de acordo com o movimento, e fiquei bem satisfeito
      Só não consegui encontrar desfazer/refazer. Esse recurso existe no mobile ou no desktop?

  • Descobri que o GPT-4 também é bem bom para gerar animações CSS complexas