Arquivo

Posts Tagged ‘TImge3D’

Utilizando TImage3D e TText3D – FireMonkey

Neste artigo aprenderemos a usar os componentes “TImage3D” e “TText3D” do Firemonkey.

Hoje vamos realizar efeitos de animação com os componentes TImage3D e TText3D da biblioteca “FireMonkey”, onde viabiliza aos desenvolvedores a rápida construção de aplicações em HD e 3D, com desempenho nativo, animações, efeitos de imagem, conectividade à banco de dados de primeira linha. Hoje, os desenvolvedores FireMonkey podem desenvolver aplicações com facilidade, compilando-as de modo nativo nas plataformas Windows 32/64 e iOS, e num futuro breve, para Linux e Android, o FireMonkey está apenas a versão 1.0, com muitas correções e atualizações por vir. Vamos ao nosso projeto: crie uma aplicação FireMonkey 3D Application, e prossiga incluindo os seguintes componentes: um TImage3D, um TText3D, um TLayer3D dentro do Layer3D inclua dois TTrackBar e dois TLabel conforme imagem abaixo :

Figura 1. Layout do Projeto.

 Ainda precisamos adicionar componentes não visuais em nosso projeto, estes são componentes necessários para o desenvolvimento da animação,  dentro do componente Image3D1 inclua 2 TFloatAnimation, como resultado teremos duas animações na imagem, além destas inclua também mais um TFloatAnimation dentro do componente Text3D1 conforme a estrutura do projeto, observada na imagem abaixo:

Figura 2. Estrutura do Projeto.

Lembrando que em um aplicativo 3D, é impossível usar diretamente componentes como botões TLabel, TTrackBar, combobox, grid, etc… No entanto, há uma maneira muito simples para lidar com isso, o próprio FireMonkey nos fornece o componente “TLayer3D”.

Alterando propriedades dos componentes:

Propriedades Image3D1

  • Bitmap.edit = escolha uma imagem

Propriedades FloatAnimation1

  • Duration = 5
  • Enable = True
  • Interpolation = itLinear
  • Loop = True
  • PropertyName = RotationAngle.X
  • StartValue = 0
  • StopValue = 360

Propriedades FloatAnimation2

  • Duration = 5
  • Enable = True
  • Interpolation = itQuintic
  • Loop = True
  • PropertyName = Position.X
  • StartValue = 0
  • StopValue = 66

Propriedades Text3D1

  • Text = Firemonkey
  • Font.Size = 2
  • Material.Emissive = escolha uma cor
  • as dimensões de altura , largura e profundidade fica a sua escolha alterando no próprio componente

Propriedades TFloatAnimation3

  • Duration = 11
  • Enable = True
  • Interpolation = itLinear
  • Loop = True
  • PropertyName = RotationAngle.Y
  • StartValue = 0
  • StopValue = 360

Propriedades Layer3D1

  • Projection = pjScreen

Propriedades TrackBar1

  • Max = 10
  • Min = -10

Propriedades TrackBar2

  • Max = 22
  • Min = 1

Após realizadas as alterações, vamos aos códigos nos eventos OnChange, dos componentes Trackbar, para termos noção através de um exemplo de controle dos componentes durante as animações.

Listagem 1: Alterando o evento OnChange do componente TrackBar1

procedure TForm1.TrackBar1Change(Sender: TObject);
begin
Image3D1.Position.Z := 0 - TrackBar1.Value;  //altera o tamanho Image3D1
end;

Listagem 2: Alterando o evento OnChange do componente TrackBar2


procedure TForm1.TrackBar2Change(Sender: TObject);
begin
FloatAnimation3.Stop;
FloatAnimation3.Duration := 22 - TrackBar2.Value;  //alterando a velocidade Text3D1
FloatAnimation3.Start;
end;

Este exemplo poderia ser realizado em projeto FireMonkey HD, da mesma maneira apresentado, seria necessário apenas incluir o componente TViewPort3D no projeto HD. Altere as propriedades dos componentes TFloatAnimation aqui configurados para ver as reações diversas da animação, tendo assim maiores opções para estudos e resultados. Espero que tenham gostado, segue o códigos fonte para facilitar o trabalho e pesquisa de vocês.

Muito obrigado. Fico por aqui, e espero por vocês na próxima! Grande abraço.

Código Fonte

Anúncios
Categorias:FireMonkey Tags:, ,
%d blogueiros gostam disto: