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

Question

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

图片来自网络:

Answer 1

制作要求:

• TArc
• TTimer

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

这就是不知道的效果

您可以在 Wikipedia 中阅读相关信息(警告它是用法语写的)

现在要解决这个问题，您需要定义一个数组来保存压缩和拉伸(stretch) Spring 所需的势能值。

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

你看到的动画是这个

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

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] 设置势能。

结果是这样的(右边的谷歌动画)