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

Question

我正在考虑将加载动画和进度弧放在单个对象中（例如加载记录时的 WhatsApp），所以我认为使用 TArc 和 TFloatAnimation 更好，因为我可以控制的 StartAngle 和 EndAngle中风。我正在尝试制作谷歌加载微调器逻辑，但我很困惑，看起来有一个具有“线性”插值属性的 FloatAnimation 控制一个角度和另一个看起来有指数或正弦插值的角度开始/结束非常快，我看不到它，有人已经尝试过重现它吗？谢谢。

图片来自网络：

Answer 1

要求：

• TArc
• TTimer

我发现你称它为微调器是错误的。它是谐波运动中的弹簧加上旋转效果。

这是你不知道的效果

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

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

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

你看到的动画是这样的

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

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;

你也可以制作像这样的动画

---

更新：经过一些同步（不要问我如何）

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

步骤：

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

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