Сердцебиение Cpu На Rad Studio (delphi) Firemonkey By Lomanu4

[Lomanu4]

В видео я не показал как перетаскивать за Circle сам лаунчер,все очень просто,в событие OnMouseDown добавляем код Self.StartWindowDrag и все.


У нас на форме должно быть - один Layout, а в нем три Circle и один Label.
Но что бы не расписывать какой компонент за каким кидать, и какие у них свойства в куче принтскринов, советую вам просто скопировать текст из сполейра, и вставить его в форму вашего приложения:

Спойлер: описание копонентов

object Layout1: TLayout
Align = Client
Height = 343.000000000000000000
Width = 369.000000000000000000
TabOrder = 3
object Circle3: TCircle
Align = Center
Fill.Kind = Gradient
Fill.Gradient.Points = <
item
Color = xA91DE0FF
Offset = 0.000000000000000000
end
item
Color = x5DFFFFFF
Offset = 0.090062111616134640
end>
Fill.Gradient.Style = Radial
Height = 130.000000000000000000
Stroke.Kind = None
Width = 130.000000000000000000
end
object Circle2: TCircle
Align = Center
Fill.Kind = None
Height = 120.000000000000000000
Stroke.Color = xC7AEAEAE
Width = 120.000000000000000000
end
object Circle1: TCircle
Align = Center
Fill.Color = xFF1DE0FF
Height = 110.000000000000000000
Stroke.Kind = None
Width = 110.000000000000000000
end
object Label1: TLabel
Align = Center
StyledSettings = [Style]
Height = 59.000000000000000000
TextSettings.Font.Family = 'Segoe UI Semilight'
TextSettings.Font.Size = 18.000000000000000000
TextSettings.FontColor = claWhite
TextSettings.HorzAlign = Center
TextSettings.WordWrap = False
Text = 'CPU'
Width = 86.000000000000000000
end
end

Здесь мы самому заднему Circle3 просто предали наибольший по отношению к другим размер, и задали ему заливку, только не линейную, а градиентную.
У второго Circle2, убираем заливку и оставляем только каемочку (Stroke) с серым цветом.
Ну а Circle1 просто заливаем нежной берюзой))

По верх всего этого Label с выравниванием текста по центру и горизонтальному и вертикальному.

Так, "картинку" мы собрали, теперь надо бы "оживить франкеншейна", для этого добавим Timer в наше приложение!
Ставим его сразу в Enabled - true, а Interval в 1050.

Добавляем переменные:

var
  Form1: TForm1;
  ST   : TTHread.TSystemTimes;
  fa1  : TFloatAnimation;
  fa2  : TFloatAnimation;

a1 и fa2 служат для создание и управлением анимации.
ST для получения загруженности процессора.
// что бы TFloatAnimation не подчеркивались у вас красным, добавте в uses модуль FMX.Ani

На событие создание формы вешаем код по созданию анимации и задании первичной настройки:

procedure TForm1.FormCreate(Sender: TObject);
begin
  fa1 := TFloatAnimation.Create(nil);
  fa1.Parent       := Circle3;
  fa1.Loop         := true;
  fa1.AutoReverse  := true;
  fa1.StartValue   := 130;
  fa1.PropertyName := 'Height';
  fa1.Delay        := 0.5;
  fa2 := TFloatAnimation.Create(nil);
  fa2.Parent       := Circle3;
  fa2.Loop         := true;
  fa2.AutoReverse  := true;
  fa2.StartValue   := 130;
  fa2.PropertyName := 'Width';
  fa2.Delay        := 0.5;
end;

Ну и конечно самому таймеру на событие OnTimer вешаем код:

procedure TForm1.Timer1Timer(Sender: TObject);
var
  x: integer;
  h,w,e: single;
begin
  x := TThread.GetCPUUsage(ST);
  h := 130 + round(x);
  w := 130 + round(x);
  e := x / 100 - 0.001;
  if x <= 15 then
  begin
    Circle3.Fill.Gradient.Points.Points[1].Offset := 0.10;
    Circle1.AnimateColor('Fill.Color',$FF1DE0FF, 0.5);
  end;
  if (x > 15) and ( x < 25) then
  begin
    Circle3.Fill.Gradient.Points.Points[1].Offset := e;
    Circle1.AnimateColor('Fill.Color',$A91DFF54, 0.5);
  end;
  if x > 25 then
  begin
    Circle3.Fill.Gradient.Points.Points[1].Offset := e;
    Circle1.AnimateColor('Fill.Color',$A9FF1D1D, 0.5);
  end;
  fa1.StopValue  := h;
  fa2.StopValue  := w;
  if fa1.Enabled = false then
  begin
    fa1.Enabled      := true;
    fa2.Enabled      := true;
  end;
  Label1.Text := 'CPU'+#13+#10+Format('%d%%',[X]);
end;

В данном коде сначала определяем насколько загружен проц. Чем сильнее он загружен, тем шире поле "пульсации". И что бы при расширение круга, градиентная заливка не оставалась на месте, а так же растягивалась на весь круг, мы и делаем вот это Circle3.Fill.Gradient.Points.Points[1].Offset.
Значение этой строки указывает на смещение (offset) точки окраса на градиентной лилии
А через Circle1.AnimateColor('Fill.Color',$A9FF1D1D, 0.5) и подобные ему, мы меняем цвет центрального круга. Когда работа процессора увеличивается мы меняем на другой цвет. Можете сами изменить и цвета, и добавить больше градаций. В моем случае их три.