Animações

Introdução

O sistema de animação do Godot é extremamente poderoso e flexível.

Para começar, vamos usar a cena do tutorial anterior (: ref: doc_splash_screen). O objetivo é adicionar uma animação "fade-in" à imagem inicial. Aqui está uma cópia para o caso: robisplash.zip.

Adicionar um player de animação

Primeiro de tudo, adicione um nó: ref: AnimationPlayer <class_AnimationPlayer> à cena como um filho de "background" (o nó raiz):

../../_images/robisplash_anim_inspector.png

Quando um nó desse tipo é selecionado, o painel do editor de animação é exibido:

../../_images/robisplash_anim_editor.png

O painel do editor de animação permanece visível até ser ocultado manualmente.

Criando a animação

Chegou a hora de criar uma nova animação! Pressione o botão Animação e selecione Novo do menu. Nomeie a animação "intro" quando a caixa de diálogo aparecer.

../../_images/robisplash_anim_button.png ../../_images/robisplash_anim_new.png

Agora que temos uma animação, o editor de propriedades entra no modo "edição de animação". Neste modo, um ícone de chave aparece ao lado de todas as propriedades do editor de propriedades. No Godot, qualquer propriedade de um objeto pode ser animada:

../../_images/robisplash_anim_property_keys.png

Editando a animação

O logotipo aparecerá na parte superior da tela.

Com o painel do editor de animação aberto, selecione o nó "logo" e defina a propriedade "Rect / Position" para "(118, -400)" e pressione o botão ao lado da propriedade para adicionar um quadro chave:

../../_images/robisplash_anim_logo_inspector_key.png

Quando a caixa de diálogo aparecer, confirme se você está criando uma nova faixa.

O quadro-chave será adicionado ao editor do player de animação:

../../_images/robisplash_anim_editor_keyframe.png

Mova o cursor do editor para frente clicando aqui:

../../_images/robisplash_anim_editor_track_cursor.png

Mude a posição do logo para `` (118, 0) `` e adicione um quadro-chave novamente. Com dois quadros-chave de valores diferentes, a animação acontece.

../../_images/robisplash_anim_editor_keyframe_2.png

Pressing "Play selected animation from start" button on the animation panel (or Shift + D on keyboard) will make the logo descend.

../../_images/robisplash_anim_editor_play_start.png

Clique no botão "Autoplay on Load" para definir a animação para iniciar automaticamente quando a cena começar.

../../_images/robisplash_anim_editor_autoplay.png

E finalmente, ao executar a cena, a animação deve ficar assim:

../../_images/out.gif