Através do estudo das três lições anteriores, dominamos o método de fazer animação, embora a animação produzida ainda seja muito rudimentar. Você ainda se lembra que quando estava aprendendo o básico, ficou muito tempo exposto a um único bloco de cores? Isso não afetou o nível atual de desempenho de todos. Da mesma forma, em breve começaremos a fazer animações mais detalhadas. Mas antes que tudo isso aconteça, todos devem aprender o pensamento de design necessário. O chamado design thinking refere-se ao planejamento e às considerações antes de fazer animações. Esse planejamento inclui muitos aspectos.
Primeiro, vamos falar sobre a organização das camadas. A animação final finalizada não contém informações de camada. As camadas aqui mencionadas referem-se apenas àquelas em produção. Para animações produzidas usando mudanças de posição de camada, um problema óbvio é que as camadas devem ser organizadas razoavelmente , porque a menor unidade de movimento é a camada, portanto, se você precisar fazer vários objetos com trajetórias de movimento diferentes, eles devem ser distribuídos em diferentes camadas. Você também precisa considerar a distância do movimento com antecedência. O tamanho e o posicionamento da imagem precisam deixar espaço suficiente para o movimento.
A segunda é considerar se ela irá se cruzar com outras camadas e como lidar com a interseção, quem cobrirá quem, ou seja, o arranjo hierárquico das camadas. A figura a seguir lista três maneiras de se cruzar. são Quando ambas as camadas estão em 100%, o verde cobre o vermelho. Os outros dois mostram os diferentes efeitos de cobertura de diferentes camadas com 50% de opacidade. Se o verde cobrir o vermelho, a interseção será mais verde e vice-versa. Tudo isso está no modo de mesclagem normal. Se você escolher outros modos de mesclagem, como sobreposição, deverá prestar mais atenção à camada.
Os mencionados acima são todos problemas técnicos, agora vamos falar sobre problemas de enredo. De modo geral, se um objeto está sempre em movimento na imagem, não há necessidade de considerá-lo. Mas se o objeto não estava originalmente na imagem, mas entrou na imagem mais tarde, ou estava originalmente na imagem e depois saiu da imagem, você precisa explicar o aparecimento e o desaparecimento do objeto. Essa explicação é uma transição, permitindo a transição. espectador tenha uma mudança psicológica mais natural. Uma técnica comum é fazer com que os objetos apareçam gradualmente (também chamado de fade-in) ou desapareçam gradualmente (também chamado de fade-out). Conforme mostrado na figura abaixo, ela demonstra a comparação do efeito de fading in e fading out no mesmo movimento de texto.
Você pode mover o mouse para dentro da área de reprodução para observar o efeito de animação real e mover o mouse para fora da área de reprodução para interromper a reprodução. Através da comparação, acredito que todos sentirão que o efeito da adição de processamento de fade-in e fade-out é melhor.
Além disso, a configuração do loop também é um problema de enredo. Já mencionamos isso antes, ou seja, em algumas situações, a animação em loop infinito pode ser usada, enquanto em outras situações não é adequada. Por exemplo, se a animação do texto do título de uma coluna desaparecer continuamente, isso fará com que toda a página da web pareça confusa e fará com que os espectadores se sintam desconfortáveis. A abordagem mais adequada neste momento é reproduzi-lo uma vez, para que o efeito possa ser exibido sem afetar a página geral da web. Um ciclo definido para 2 a 3 vezes é geralmente aceitável, e mais não é bom.
No entanto, as animações que são reproduzidas apenas uma vez são melhor posicionadas no topo da página da web para que possam ser vistas assim que você entrar na página da web. Se colocada na parte inferior da página da web, a animação pode ter terminado de ser reproduzida quando o visualizador chegar a esse ponto. Nesse caso, não faria sentido criar animações e seria melhor usar imagens estáticas.
Deve-se observar que a imagem GIF animada será reproduzida novamente sempre que for chamada. Se algumas pessoas já tiverem conhecimento de produção de páginas web, elas poderão usar esta propriedade para definir ações correspondentes no software de produção de páginas web. Por exemplo, é assim que você move o mouse aqui para ver a animação do exemplo. A animação sempre começa do início após cada movimento. Desta forma, mesmo que a animação seja reproduzida apenas uma vez, ela poderá ser reproduzida várias vezes na página web. Não se preocupe se você não tiver conhecimento sobre produção de páginas web. Isso não afetará nosso aprendizado subsequente de animação. .
Uma questão importante a considerar em relação aos efeitos de fade que parecem ótimos é que os navegadores podem ser configurados para desativar animações. Neste momento, a animação exibirá apenas o primeiro quadro da animação. Em seguida, uma animação semelhante ao "indo e vindo silenciosamente" acima ficará em branco na página da web, porque o primeiro quadro está originalmente em branco. Isso pode facilmente causar mal-entendidos entre os telespectadores.
Talvez você pense que ninguém desligará deliberadamente a exibição da animação, mas como esse fator não pode ser descartado, precisamos considerar a situação do visitante no nível mais amplo. No layout geral da página da web, evite usar animações de esmaecimento em textos importantes ou partes de indicadores. Depois de colocar a animação na página web, é melhor desligar manualmente a reprodução da animação para verificar se há algum problema. Além de desligar a reprodução da animação, caso o visitante pressione a tecla ESC no momento da exibição da página, a reprodução da animação também será interrompida, e a tela permanecerá no momento da interrupção.
Se você deseja cuidar dos visitantes que estão proibidos de reproduzir animações e daqueles que têm permissão para reproduzir animações ao mesmo tempo, e encontrar um equilíbrio entre os dois, então você deve seguir um princípio na produção de animações, ou seja, a parte principal não deve se mover e as partes modificadas devem ser animadas. Conforme mostrado na imagem abaixo, o texto em si não é animado, apenas as bordas do texto são animadas. Desta forma, mesmo que a animação estática seja reproduzida ou interrompida durante a reprodução, isso não afetará a compreensão do conteúdo pelo espectador.
No entanto, desde que o conteúdo possa ser refletido com precisão em todos os momentos e o desaparecimento do texto ou a deformação excessiva sejam evitados, o texto principal também pode ser movido.
O conteúdo descrito nesta lição não está relacionado à tecnologia de produção de animação. No entanto, quando você deseja aplicar animação a páginas da web, deve considerar os métodos de produção e desempenho da animação de uma perspectiva ampla. Simplesmente aprender esses conteúdos é um pouco chato. Basta deixar uma impressão em todos e aplicar em produções futuras.
Esta tarefa é criar a animação de "Quietly Come and Go". Além disso, as duas animações derivadas a seguir também são produzidas.
Na próxima seção, apresentamos como expressar fade-in e fade-out em animação.