如何使用 TArc 制作 Google 加载微调器？

Question

我正在考虑将加载动画和进度弧放在单个对象中（就像加载记录时的 WhatsApp），所以我认为最好使用 TArc 和 TFloatAnimation，因为我可以控制 StartAngle 和笔画的结束角度。我正在尝试制作 Google 加载微调器逻辑，但我很困惑，看起来有一个带有 "linear" 插值 属性 的 FloatAnimation 控制一个角度和另一个角度看起来有一个 start/end 非常快的指数或正弦插值，我看不到它，有人已经尝试过重现它吗？谢谢

图片来自网络：

Answer 1

制作这个的要求：

• TArc
• TTimer

我发现你称它为微调器是错误的。是spring谐波加旋转效果

不知道就是这个效果

您可以在 Wikipedia 中阅读它（警告它是用法语写的）

现在要解决此问题，您需要定义一个数组，该数组将保存压缩和拉伸 spring 所需的势能值。

PotentialEnergy: array[0..10] of Single;

你看到的动画是这个

spring 拉伸然后再次压缩。为了让它旋转，我们将定义一个旋转速度

RotationSpeed : Single;  

最后的动画看起来像这样

这是这个动画的最终实现：

var
  Form6: TForm6;
  Increment: Integer;
  PotentialEnergy: array[0..10] of Single;
  ReverseMotion : Boolean;
  RotationSpeed : Single;
implementation

{$R *.fmx}

procedure SetArray(var aData: array of Single; const aSource: array of Single);
var
  I: Integer;
begin
  for I := Low(aSource) to High(aSource) do
    begin
    aData[I] := aSource[I];
    end;
end;

procedure TForm6.Button1Click(Sender: TObject);
begin
  SetArray(PotentialEnergy, [5, 64, 48, 32, 24, 16, 14, 10, 8, 7]);
  Increment := -1;
  ReverseMotion := False;
  arc1.StartAngle := 0;
  arc1.EndAngle := 1;
  RotationSpeed := strtoint(edit1.text); // Degrees per 0.1 second
  timer1.Enabled := True;
end;

procedure TForm6.Timer1Timer(Sender: TObject);
begin
  if not ReverseMotion then
    begin
    Inc(Increment);
    arc1.EndAngle := arc1.EndAngle + PotentialEnergy[Increment];
    arc1.StartAngle := arc1.StartAngle + RotationSpeed;
    end
  else
    begin
    Inc(Increment);
    arc1.StartAngle := arc1.StartAngle + PotentialEnergy[Increment] + RotationSpeed;
    arc1.EndAngle := arc1.EndAngle - PotentialEnergy[Increment];
    end;

 if (Increment > 10)then
    begin
    ReverseMotion  := not ReverseMotion;
    Increment := -1;
    end;
end;

你也可以创建这样的动画

---

更新： 一些同步后（别问我怎么做到的）

我发现这可能是那个 google 动画的精确复制品

步骤：

• 将计时器设置为 30 毫秒。
• 将旋转速度设置为5。
• 设置TArc的高度和宽度为102。
• 为此[23, 40, 39, 31, 23, 18, 15, 13, 11, 9, 7, 6, 5, 4, 4]设置势能。

结果是这样的（右边的google动画）