Um dia, nosso designer de UI veio até mim e disse que eu deveria substituir as animações que escrevi no programa pelas animações json que eles me deram. A razão é que algumas animações são muito complicadas e não podem atingir os efeitos esperados se eu mesmo as escrever (. Quando escrevi isso, de repente pensei em uma pergunta: por que você não usa gif para uma animação tão complicada. O desenvolvedor Android sentado à minha frente respondeu que a qualidade do gif pode não ser alta quando reproduzido, ok, acredito)
EU:? ? ? ? O cliente pode adicionar animação json. Nunca ouvi falar de páginas H5 capazes de ler animação json.
O designer parecia certo e disse que sim, existe uma versão web.
Enquanto escrevo isso, eu realmente quero elogiar nossas garotas designers. Quase muitas boas soluções foram encontradas sob sua pressão (ah, elas também podem escrever páginas H5... elas querem que eu faça a série Qual é a utilidade.
Então aí vem a pergunta, como usar animação json na página H5?
Como usar animação json na página H5Neste momento, o designer me enviou um link, veja aqui lottie-web, cliquei nele para saber mais sobre ele. É uma biblioteca de animação de código aberto do Airbnb. Essa biblioteca pode completar muitas animações legais e é muito simples de usar. O designer só precisa exportar o arquivo JSON através de animação feita por AE. software e, em seguida, o front-end usa Lottie para carregar diretamente o arquivo JSON para gerar animação. Não exige que o designer corte muitos gifs, nem o front-end precisa realizar desenhos complexos. , e Lottie está disponível em todas as plataformas, incluindo iOS, Android, web e React. O nativo pode ser usado, ocupa menos memória e carrega sem problemas. (Por que só estou descobrindo uma coisa tão mágica agora?
Dito isso, como utilizá-lo nas páginas H5?
É muito simples. A pasta gerada pelo designer é enviada para você (o designer só precisa adicionar um plug-in lottie no AE e exportá-lo. Depois de abri-lo, deverá ficar assim). sei como funciona. Usei (então ainda estou escrevendo artigos técnicos aqui)
Brincadeiras à parte, na verdade encontrei muitas armadilhas durante o uso. Aqui estão algumas coisas que você deve prestar atenção ao usá-los.
1. Há muitas coisas embutidas em demo.html que são desagradáveis quando usadas.Dê uma olhada mais de perto. Na verdade, demo.html coloca js e json nele. Neste momento, podemos separar js e json separadamente.
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script>
Os dados json necessários para a animação são colocados no arquivo data.json, mas o formato dos dados no arquivo json fornecido é o seguinte (é muito longo e não pode ser cortado)
Se você quiser usar um script para introduzir um arquivo json em um HTML separado, um erro será relatado, então você precisa modificar o arquivo json, adicionar variáveis na frente e atribuir valores. Conforme mostrado abaixo:
Desta forma, você pode importar o json da mesma forma que o arquivo js.
<script type=text/javascript src=./data.json></script>
Desta forma, o demo.html disponível fica reduzido ao seguinte
<html xmlns=http://www.w3.org/1999/xhtml><meta charset=UTF-8><head> <style> body{ background-color:black; margem: 0px altura: 100%; : oculto; } #lottie{ cor de fundo:#fff; largura:100% altura:100%; traduzir3d(0,0,0); alinhamento de texto: centro: 1; } </style></head><body><div id=lottie></div><script type=text/javascript src= https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script><script type=text/javascript src=./data.json></script><script> var params = { container: document.getElementById('lottie'), renderizador: 'svg', loop: true, reprodução automática: true, AnimationData: AnimationData }; anim; anim = lottie.loadAnimation(params);</script></body></html>Claro, se você estiver usando programação modular js, você pode simplesmente importá-la diretamente, sem alterar data.json, da seguinte maneira:
importar animaçãoData de './data.json'2. Adapte animações para dispositivos móveis
A razão pela qual acho que isso é uma armadilha é porque a animação que o designer me deu era em tela cheia e não transparente. Então ela me pediu para posicionar a animação com largura de 100% e uma interceptação centralizada verticalmente. o navegador., na tela 360*640, a largura é 100%, a expressão é a seguinte (parece que a altura é 100%, a largura é adaptada ao centro e a cor de fundo preta vaza em ambos os lados , veja a parte com moldura azul na imagem abaixo)
Mudando para a tela do iPhone
Este layout é tão familiar que se comporta da mesma forma que quando o atributo object-fit de img é definido para conter (object-fit também é um tesouro. Estudantes interessados podem estudá-lo, é muito fácil de usar)
Para resolver as necessidades do designer aqui, adiciono principalmente o seguinte código:
parte js: setTimeout(function() { document.getElementsByTagName('svg')[0].style.height = 'auto';}, 50); %; altura:100%;transform:translate3d(0,0,0);alinhamento do texto:centro: 1; esquerda: 0; índice z: 3; exibição: flex; direção: linha; justificar-conteúdo: centro;Efeito final:
ResumirAs capturas de tela da imagem acima são todas estáticas, mas na verdade têm um efeito dinâmico. Não sei como adicionar animações, então não fiz isso.
Âmbito de aplicação: Acho que geralmente animações em tela cheia ou parcialmente complexas podem usar esse método. É mais suave que o GIF e tem boa compatibilidade. Alguns produtos Android usam esse método para abrir a tela de uma forma legal, como as páginas H5. Nesse caso, animações simples geralmente podem ser implementadas pelo seu próprio programa e você pode evitar armadilhas.
Links de referência:
site oficial da loteria
endereço lottie-web github
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.