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

Question

我正在考虑在一个对象中添加加载动画和进度弧(比如加载记录时的WhatsApp),所以我认为最好使用TArc和TFloatAnimation,因为我可以控制笔画的StartAngle和EndAngle.我试图让谷歌加载微调器逻辑,但我很困惑,看起来有一个FloatAnimation具有控制其中一个角度的"线性"插值属性,另一个看起来具有指数或正弦插值的开始/结束非常快,我看不到它,有人已经尝试重现它吗？谢谢.

来自网络的图片:

Answer 1

要求这样做:

• TARC
• TTimer

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

如果您不知道,这就是效果

您可以在维基百科中阅读它(警告它是用法语写的)

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

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.
• 设置TArc102 的高度和宽度.
• 为此设定潜在的能量[23, 40, 39, 31, 23, 18, 15, 13, 11, 9, 7, 6, 5, 4, 4].

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