火猴之ppt动画效果实现（firemonkey）

 看到一个ppt的动画效果，如下：

 

圆环放大效果：

一个circle+floatanimation，设置属性，使用floatanimation动画增加circle的width，并在动画组件的process时间中同步circle的height。

Circle1的属性设置：

  Circle1.Size.Width := 5.000000000000000000;
  Circle1.Size.Height := 5.000000000000000000;
  Circle1.Stroke.Color := xFF70A5B1;
  Circle1.Stroke.Thickness := 5.000000000000000000;

floatanimation1的属性设置：

object FloatAnimation1: TFloatAnimation
  Duration = 0.500000000000000000
  OnProcess = FloatAnimation1Process
  PropertyName = 'Width'
  StartValue = 1.000000000000000000
  StopValue = 30.000000000000000000
end

代码：

procedure TForm1.FloatAnimation1Process(Sender: TObject);
begin
  self.Circle1.Height := self.Circle1.Width;
end;

结果：

 

主线变色动画：

一个rectangle+floatanimation+GradientAnimation，设置属性，使用floatanimation动画增加rectangle的width。使用GradientAnimation动画rectangle的fill的颜色。

  GradientAnimation1.Name := 'GradientAnimation1';
  GradientAnimation1.Duration := 0.200000002980232200;
  GradientAnimation1.PropertyName := 'Fill.Gradient';

  with GradientAnimation1.StartValue.Points.Add do
  begin
    Color := xFFB62F2F;
    Offset := 0.000000000000000000;
  end;

  with GradientAnimation1.StartValue.Points.Add do
  begin
    Color := xFF3DB62F;
    Offset := 0.531055927276611300;
  end;

  with GradientAnimation1.StartValue.Points.Add do
  begin
    Color := xFFC60AB9;
    Offset := 1.000000000000000000;
  end;
  with GradientAnimation1.StartValue.Points.Add do
  begin
    Color := xFF7AC930;
    Offset := 0.000000000000000000;
  end;

  with GradientAnimation1.StartValue.Points.Add do
  begin
    Color := xFFE761F6;
    Offset := 1.000000000000000000;
  end;

结果：