火猴之呼吸灯（firemonkey）_opacity firemonkey-优快云博客

本文链接：https://blog.youkuaiyun.com/winniezhang/article/details/99072388

本文介绍了一种在手机上实现呼吸灯效果的方法，通过使用rectangle作为画布，3个circle代表红黄蓝灯，并利用floatanimation控制透明度，配合delay属性实现灯光的亮度变化和时差显示，增强了视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

手机上的呼吸灯设计还是蛮炫酷的，实现一下：

思路：

1、rectangle作为画布，使用其fill.color来改变背景，

2、3个circle分别作为红黄蓝的灯

3、使用shadoweffect来增加灯的立体感

4、使用floatanimation来控制circle的透明度，达到控制灯的亮度和明灭。

5、使用floatanimation的delay属性来使得3个灯分开显示，时差。

rectangle2的属性（相当于画布）

  Rectangle2.Name := 'Rectangle2';
  Rectangle2.Parent := Layout2;
  Rectangle2.Align := Client; //充满layout
  Rectangle2.Fill.Color := claAliceblue;//背景颜色在此

circle1、circle2、circle3的属性以及相关的阴影效果和动画效果

  object Circle1: TCircle //3个circle分别命名为circle1、circle2、circle3
    Align = FitLeft //3个circle分别是 FitLeft、Fit、FitRight
    Fill.Color = claRed //3个circle分别是clared、clagreen、clablue
    
    object FloatAnimation3: TFloatAnimation
      AutoReverse = True
      Delay = 1
      Duration = 3
      PropertyName = 'Opacity' //设置透明度
      StartValue = 0 //从完全透明
      StopValue = 1 //到不透明
    end
    object ShadowEffect1: TShadowEffect //增加立体感
 
    end
  end

代码：

procedure TForm1.Button1Click(Sender: TObject);

begin
     FloatAnimation3.Loop:=True;
     FloatAnimation4.Loop:=True;
     FloatAnimation5.Loop:=True;
     FloatAnimation3.Enabled:=True;
     FloatAnimation4.Enabled:=True;
     FloatAnimation5.Enabled:=True;
     exit;
end;