火猴之图片立体翻转效果展示（firemonkey）

结果：

思路：

1、使用firemonkey之3d应用

2、layout3d+image3d+textlayer3d

3、使用floatanimation改变image3d的rotation的角度实现

4、运用floatanimation的finish事件来触发更换图片和文字

属性设置：

1、floatanimation的属性设置如下

object FloatAnimation2: TFloatAnimation
  Delay = 0.300000011920929000 //设置0.3使得灵敏度降低
  Duration = 0.200000002980232200
  OnFinish = FloatAnimation1Finish  //当完成翻转后触发该事件
  PropertyName = 'RotationAngle.Y'
  StartValue = 0.000000000000000000
  StopValue = 180.000000000000000000
  Trigger = 'IsMouseOver=true' //当鼠标移到照片之上触发
  TriggerInverse = 'IsMouseOver=false'//当鼠标移开照片之上触发
end

2、image3d的属性设置如下

object Image3D2: TImage3D
  Bitmap.PNG = {    }//设置初始png透明图片
  Image3D2.Name := 'Image3D2';
  Image3D2.Height := 5.926673889160156000;
  Image3D2.Position.X := 1.385273933410644000;
  Image3D2.Position.Y := 0.295055389404296900;
  Image3D2.Width := 6.140087127685546000;
end

3、TextLayer3D1的属性设置如下

object TextLayer3D1: TTextLayer3D
  Color = claBlack
  Font.Family = #24494#36719#38597#40657//隶书
  Font.Size = 24.000000000000000000
  Height = 3.833811759948730000
  Position.X = 3.106238365173340000
  Position.Y = 3.008861541748047000
  Resolution = 50
  Text = #20013#25991#26174#31034#23383#20307#20869#23481#20013#25991#26174#31034#23383#20307#20869#23481#20013#25991#26174#31034#23383#20307#20869#23481#20013#25991#26174#31034#23383#20307#20869#23481//中文：中文显示字体内容中文显示字体内容中文显示字体内容中文显示字体内容
  Width = 4.327615737915039000
end

 

代码：

var
  Form1: TForm1;
  iflag:Integer; //全局变量用来更换照片
implementation

{$R *.fmx}

procedure TForm1.FloatAnimation1Finish(Sender: TObject);
begin
 if iflag =0 then
  begin
    Self.Image3D2.Bitmap.LoadFromFile('D:\firemonkeysr\3dturnover\server-1_06.jpg');
    Self.FloatAnimation2.Enabled := False;
    self.TextLayer3D1.Visible:=False;
    iflag:=iflag+1;//每触发一次加
    Exit;
  end;

  if iflag <> 0 then//一共15张图片满了就清零
  begin
    Self.image3d2.Bitmap.LoadFromFile('D:\firemonkeysr\3dturnover\server-1-1_09.jpg');
    Self.FloatAnimation2.Enabled := False;
    Self.TextLayer3D1.Visible:=True;
    iflag:=0;
    Exit;
  end;
  

end;

end.

下载：

链接：https://pan.baidu.com/s/1GtCDw8lYJBhLsMvZ-k_EbA 
提取码：oa6o