Animação de Trajetórias com Flux Studio

Claudio Kirner - 2007

1 – Planejamento da Animação

Para animar uma trajetória, estamos admitindo que os usuários conheçam o seguinte:

- conceito de animação, envolvendo: posições, inclinações, tempos/velocidades, etc;

- trajetória planejada com as posições, inclinações, tempos e comportamento;

Como exemplo, suponhamos a seguinte trajetória (volta em um quarteirão): formato retangular, começando no ponto P0, passando por P1, P2, P3 e terminando em P4 que é igual a P1, conforme a Fig. 1, que mostra uma vista de cima do quarteirão (em azul). Além disso, vamos adotar o giro pontual, ou seja a seta chega ao ponto e gira em cima dele, para depois continuar sua translação.

O comportamento da animação da trajetória é o seguinte:

- o objeto, a cumprir a trajetória (seta amarela com ponta vermelha no ponto P0), começará no Ponto 0, Tempo=0 e irá ao ao Ponto 1, chegando no Tempo=0.23.

Permanecendo no Ponto 1, a seta deverá girar 90 graus para a esquerda, terminado o giro no Tempo=0.25. A partir daí, a seta irá para o Ponto 2, chegando no Tempo=0.48, quando começará o giro para baixo. No Ponto 3, a seta girará para baixo, por 2 segundos, terminando no Tempo=0.50. A seta então irá para o Ponto 3, e Ponto 4, seguindo a mesma sequência. Ao chegar no Ponto 4, no Tempo=0.98, a seta girará até o Tempo=1, quando ficará na posição incial.

Execute o programa: “anima-traj-girofixo.wrl” para ver a animação.

Vale a pena salientar que os Tempos indo de 0 a 1, significam tempos relativos, representando percentuais do tempo de animação. Se o tempo de animação for 1, os tempos relativos são iguais aos tempos de animação.

Vamos, em seguida, ver o processo dessa animação com Flux Studio. Se quiser ver o exemplo em ação, execute o programa FluxStudio, clicando aqui.

2 – Processo de Animação

Primeiramente, abra o Flux Studio e modele o quarteirão e o objeto a ser animado, colocando-o na posição inicial com a inclinação adequada. No nosso caso, o objeto é a seta amarela com a ponta vermelha, de acordo com a Fig. 2.

Crie um Grupo, usando “Create > Create Group” e clicando sobre o centro do objeto. Arraste as partes do objeto para o Grupo, de acordo com o Grafo de cena, mostrado na Fig. 3. O Box1 é o quarteirão (azul).

Agora, estamos prontos para fazer a animação da trajetória. Para ajudar na visualização, é recomendável colocar um ponto de vista mais confortável, usando “Create > Create Viewpoint”.

Para inserir a animação, clique em ”Animation > Create Animation” e, depois, na origem em uma das janelas de visualização. A operação de animação aparecerá no Grafo de Cena com o nome: “TimeSensor: TimeSensor1”, conforme a Fig. 4.

Para preparar a animação, podemos alterar seu nome, se quisermos, e devemos ajustar alguns parâmetros como o período da animação, se ela vai acontecer em loop e se vai ser autodisparada.

Em seguida, clique em “Add Node”, para identificar o objeto que vai ser animado – a seta incluída no Grupo 1, no nosso caso. Vai aparecer um símbolo que deve ser arrastado para o Grafo de Cena, clicando-se sobre o objeto a ser animado – Group1, conforme a Fig. 5.

Nessa situação, já é possível clicar-se no botão “Animation Timeline” ou em “Animation > Enable Animation Timeline”, fazendo aparecer o diagrama de tempo de animação, conforme a Fig. 6.

O diagrama apresenta o controle “Edit Key Frames” que permite montar os quadros de animação e associá-los com os tempos do diagrama. Há também o controle “Edit Key Fraction”, que permite editar (ajustar, inserir, deletar) pontos de tempo no diagrama. Os ícones de cópia e cola serão bastante úteis no processo. Os outros controles não serão vistos nesse momento.

A primeira coisa a ser feita é inserir os pontos de tempo no diagrama (T0 até T7, no caso da animação da seta em torno do quarteirão). Para isto, clica-se em “Edit Key Fraction” para poder ser feita a inserção dos pontos. Como há 4 pontos pré-definidos, basta escolher se vai inserir antes ou depois de um ponto, usando os botões “Insert Before” ou “Insert After”. Com isto um ponto é criado, bastanto clicar sobre ele com o mouse e arrastá-lo para a posição adequada – o valor correspondente é mostrado sobre o ponto. Repete-se o processo até que todos o pontos de tempo sejam cadastrados, conforme a Fig. 7.

Agora podemos começar a montar a animação propriamente dita. Clique em “Edit Key Frames” para montar os quadros, conforme a Fig. 8.

Com o curso no ponto “0”, verifique nas janelas de visualização se a posição incial do objeto (seta) está correta. Se não estiver ajuste-a adequadamente, conforme a Fig. 9.

Em seguida, vá para o segundo ponto, usando o cursor na parte de baixo do diagrama de animação, ou clicando nas setas das extremidades. Ajuste o objeto na posição e na inclinação desejada – apareçerá uma ligação da posição inicial até o novo posicionamento, conforme as Figuras 10 e 11. Clique no ícone “copia” para guardar esta posição como última, pois o objeto tende a voltar à origem, a cada movimento.

Vá para o próximo ponto de tempo e clique no ícone  “cola” para recuperar a última posição, pois costuma ser mais fácil ir dali para o próximo quadro. Leve o objeto à próxima posição, vendo a linha da trajetória acompanhá-lo. Nesse caso, ocorreu somente a inclinação da seta para a esquerda, conforme a Fig. 12.

Repita o processo até acabar.

Se quiser revisar a animação, clique no cursor de baixo e arraste-o de ponta a ponta para ver a animação completa, conforme a Fig. 13.

Para visualizar o resultado, clique em “Quick Preview (F5)” ou exporte a animação com arquivo VRML e o visualize no seu Browser. Não se esqueça de salvar sua animação. Veja o exemplo desta animação em anexo.

Agora, voce está pronto para editar a animação, ajustando a trajetória e os tempos, além de fazer novas animações de outrras trajetórias.

Exemplos de trajetórias são:

- veículos trafegando em ruas;

- aviões decolando, voando e pousando;

- balões flutuando;

- barcos navegando;

- peixes nadando;

- pedestres caminhando, correndo, saltando, etc.

- etc.