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

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

来自web的图像：

---

要求：

我发现你称它为旋转器是错误的。这是一个弹簧在谐波运动中加上旋转效应

这就是你不知道的效果

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

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

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]

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

---

要求：

我发现你称它为旋转器是错误的。这是一个弹簧在谐波运动中加上旋转效应

这就是你不知道的效果

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

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

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]

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

---

---

我最近做了类似的事情，并将其封装在Firemonkey控件中。。。与此完全不同，这更像是一个进度指标（值/最大值），但它可以帮助您朝着正确的方向前进。@Jerry Dodge谢谢Jerry。到目前为止，我一直在玩两个FloatAnimation（StartAngle和EndAngle）属性，试图达到这个微调器。@MaurícioLima看到我的answer@JerryDodge这个怎么样我最近做了类似的事情，把它封装在Firemonkey控件中。。。与此完全不同，这更像是一个进度指标（值/最大值），但它可以帮助您朝着正确的方向前进。@Jerry Dodge谢谢Jerry。到目前为止，我一直在玩两个FloatAnimation（StartAngle和EndAngle）属性，试图达到这个微调器。@MaurícioLima看到我的answer@JerryDodge这个怎么样？太棒了！我有三天没意识到这一点。我只是有一个疑问，我将如何改变势能的值以适应16毫秒的TTimer？它看起来很快。@MaurícioLima你说的16毫秒TTimer是什么意思？使用16毫秒TTimer可以实现60 fps的动画，而不需要如此快的收角动画。我认为最好将数组值从10增加到20或更多，并构建一个图表，但我不知道如何计算值之和必须接近360，因此动画将非常真实。我制作了这个数组：

[3,7,15,26,37,48,36,31,25,21,16,14,11,9,8,7,6,5,4,3,3,2,2,1,1]并将
TTimer
行更改为：
if（增量>28），然后
并将速度设置为
8
。那是我能到达的最近的地方。谢谢你，纳斯雷丁！我很高兴您正在尝试修改此内容，以获得更适合您的内容。上面的结果是基于使用不允许共享软件对GIF进行的解剖。太棒了！我有三天没意识到这一点。我只是有一个疑问，我将如何改变势能的值以适应16毫秒的TTimer？它看起来很快。@MaurícioLima你说的16毫秒TTimer是什么意思？使用16毫秒TTimer可以实现60 fps的动画，而不需要如此快的收角动画。我认为最好将数组值从10增加到20或更多，并构建一个图表，但我不知道如何计算值之和必须接近360，因此动画将非常真实。我制作了这个数组：
[3,7,15,26,37,48,36,31,25,21,16,14,11,9,8,7,6,5,4,3,3,2,2,1,1]并将
TTimer
行更改为：
if（增量>28），然后
并将速度设置为
8
。