Vamos falar primeiro sobre o dever de casa da última aula. As três animações que pedimos a todos que fizessem têm efeitos de fade-in e fade-out, mas se você olhar com atenção, encontrará diferenças.
A primeira animação aparece gradualmente à medida que o texto se move. O texto fica mais óbvio quando está na metade do movimento e depois desaparece gradualmente à medida que se move. Se você usar a transição de quadro para fazer isso, primeiro você precisa determinar 3 quadros-chave. O texto no primeiro quadro deve estar na extremidade direita com uma opacidade de 0% (ou ocultar o texto no segundo quadro); estar no centro com transparência de 100%. ;O texto no quadro 3 fica na extrema esquerda e a opacidade retorna para 0% (ou oculta a camada). Aproximadamente como mostrado abaixo.
Em seguida, faça a transição entre o quadro 12 e o quadro 23, respectivamente, adicionando cerca de 5 quadros cada. O tempo de atraso do quadro pode ser definido por você. Nesta animação, o texto aparece e desaparece simultaneamente com o movimento. A transparência muda ao longo da mudança.
Na segunda animação, o texto está parado quando aparece gradualmente na extremidade direita e começa a se mover depois de ficar totalmente visível. Depois de se mover para a extrema esquerda, ele desaparece enquanto está parado. Então, seus quadros-chave devem ter 4 quadros, aproximadamente como mostrado na imagem à esquerda abaixo. Basta definir a transição entre esses 4 quadros respectivamente.
Embora o número específico de quadros de transição possa ser definido arbitrariamente, do ponto de vista do projeto, a transição entre o quadro 12 e o quadro 34 deve ser menor, cerca de 3 a 4 quadros. Deveria haver relativamente mais transições entre os quadros 23, cerca de 6 a 7 quadros. Isso ocorre porque ao percorrer a mesma distância, quanto menor o número de quadros, mais rápido será o movimento por quadro, e quanto maior o número de quadros, mais lento será o movimento. Conforme mostrado na imagem abaixo, é a distância de movimento de cada quadro de 3 quadros, 4 quadros e 7 quadros. Teoricamente, quanto maior o número de frames, mais rica e detalhada será a animação.
Nossa animação exibe principalmente conteúdo de texto, para que os espectadores possam vê-lo claramente. Se você definir o número de quadros de fade-in e fade-out como muito grande e o número de quadros em movimento como muito pequeno, isso criará uma situação em que o texto desaparece com muita delicadeza, depois se move rapidamente e depois desaparece. muito delicadamente. Talvez o espectador ainda consiga compreender o conteúdo do texto, mas este método de apresentação é inadequado. Embora às vezes isso também possa se tornar uma técnica de expressão não convencional.
Agora criamos duas animações sobre o mesmo assunto, ambas com efeitos de fade e move, mas ambas apresentam deficiências expressivas. A desvantagem da primeira animação é que a transição de opacidade é muito longa. O texto só fica totalmente visível em um quadro durante toda a animação. Foi semitransparente antes e depois. Isso não enfatiza a importância do texto e pode dificultar a leitura do espectador.
Você pode pensar que esse problema não existe, pois o texto da primeira animação parece muito claro. Mas usamos 100% de opacidade como estado final de exibição. Desta forma, de acordo com a transição de 5 quadros, cada quadro tem um incremento de 20%. Ou seja, embora o primeiro quadro seja 0%, o segundo quadro chega a 20%, então basicamente não há problema na leitura. Se em outra situação a opacidade final não for 100%, mas apenas 30% ou menos, o incremento de opacidade em cada quadro torna-se muito pequeno, portanto, embora a opacidade final de 30% seja suficiente, é necessário para a leitura, mas o fade- em processo será difícil ver claramente e afetar a leitura. Você pode definir a opacidade final para 30%, 10%, etc. e tentar novamente.
Em contrapartida, a segunda animação evita esta deficiência. Ela faz o fade-in e o fade-out separadamente. Ela só começa a se mover depois que o fade-in é concluído (o texto atinge seu estado de aparência final). mantém sua forma original durante o movimento O estado final manifestado, seja 100% ou 30% ou qualquer outro. Porém, também tem outra desvantagem, ou seja, o texto fica parado no ponto inicial e final, o que destrói a continuidade do movimento.
Agora queremos combinar os dois para criar uma animação que tenha um efeito de fade-in e fade-out e também possa exibir melhor o texto. A ideia é manter o texto da primeira animação em movimento durante todo o processo, mas comprimir o fade-in e o fade-out em alguns quadros no início e no final, de modo a garantir que o texto mantenha sua aparência final durante a maior parte. do movimento. Conforme mostrado na imagem à esquerda abaixo, as setas bidirecionais representam os processos de fade-in e fade-out. A metade superior mostra a primeira animação. Pode-se ver que a soma de fade-in e fade-out é igual a toda. processo de animação. Abaixo é mostrada nossa ideia atual, com o fade in e o fade out ocupando metade ou menos de toda a sequência. Isso permite que o texto complete a maior parte de seu movimento em sua aparência final.
A configuração do quadro-chave é mostrada na imagem abaixo à direita. Basta definir a transição no momento de dois quadros adjacentes. Embora o texto não possa ser visto no quadro 1, você pode saber que ele está localizado na extremidade direita da tela. No quadro 2, todo o texto foi exibido e a posição mudou ligeiramente para a esquerda. Desta forma, a transição do quadro 12 completa toda a mudança de opacidade e completa ao mesmo tempo uma pequena parte do movimento. Depois disso, o texto se move uma certa distância (transição do quadro 23) e então começa a desaparecer enquanto se move próximo à extremidade esquerda (transição do quadro 34), que é o oposto do aparecimento gradual.
Gostaria de saber se você pensou em outro problema que será encontrado na produção desta animação, ou seja, como garantir que a distância de movimento do quadro 12 corresponda à distância do quadro 23. A correspondência aqui não significa igual, mas significa que a distância percorrida por cada quadro é a mesma. Suponha que a transição do quadro 12 seja de 3 quadros (ABC) e a transição do quadro 23 seja de 6 quadros (DEFGHI), ou seja. , 1ABC2DEFGHI3, um total de 12 quadros. Então a distância de movimento do texto em cada um desses 12 quadros deve ser igual para obter um melhor efeito de movimento. Mas as pessoas muitas vezes têm o efeito de ir rápido na frente e devagar atrás, ou ir devagar na frente e rápido atrás, porque não avaliam suficientemente a distância do movimento. Este problema é difícil de resolver, a menos que você use uma régua para calcular a distância com precisão, você só pode tentar várias vezes para encontrar o número mais apropriado de quadros de transição.
O que você precisa dominar nesta lição é como lidar com o fade-in e o fade-out quando combinados com o movimento. A melhor maneira é usar um número menor de quadros para completar o fade in e out enquanto continua a se mover, mantendo a distância de movimento de cada quadro semelhante. Esta operação é um pouco complicada, mas não se preocupe, em breve haverá uma solução.
anisample01.rar
Fornecemos os arquivos fonte para fazer a terceira animação aqui ( anisample01.rar ), não é que eu ache que todos não possam fazer isso, mas para garantir a unidade do ensino, precisamos usar essa animação para continuar aprendendo. Você também pode usar seu próprio trabalho. Não há lição de casa para esta aula, mas há uma questão de reflexão: como criar a animação conforme mostrado abaixo, mantendo inalteradas as configurações originais de 20 quadros de anisample01.psd.
Na próxima seção apresentamos as limitações da animação de quadros de transição .