Delphi 10.2 FireMonkey中TMonochromeEffect与淡出动画冲突问题

问题描述 #

在Delphi 10.2的FireMonkey Windows应用中，按官方文档用TLayout容器承载图片并应用TMonochromeEffect特效，同时通过TFloatAnimation对Image的Opacity属性做淡出动画时，发现启用TMonochromeEffect后动画完全失效；禁用特效时动画正常工作。

应用操作流程：

• 点击Button1加载本地图片
• 点击Button2触发针对Image1.Opacity的淡出动画
• TMonochromeEffect附加在Layout1容器上

已找到两种临时解决方法：

• 给FloatAnimation1添加OnProcess事件，调用Layout1.Repaint
• 给FloatAnimation1添加OnProcess事件，调用Layout1.UpdateEffects

问题原因 #

FireMonkey处理容器特效时，容器会缓存特效处理后的渲染结果。当子控件（如Image1）的属性（Opacity）发生变化时，不会自动触发容器的特效重新计算与渲染机制。因为TMonochromeEffect是应用在Layout上，Image的Opacity变更属于子控件层级的属性变化，没有通知Layout更新特效缓存，导致动画过程中界面没有实时重绘，看起来动画失效。

最优解决方案 #

推荐使用**调用Layout1.UpdateEffects**的方案，相比Repaint，UpdateEffects仅重新计算并应用容器上的特效，不会强制整个控件区域重绘，性能开销更小，是更精准的处理方式。

修改后的代码示例 #

单元代码（Unit1.pas）

unit Unit1;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
  FMX.Controls.Presentation, FMX.StdCtrls, FMX.Objects, FMX.Ani, FMX.Effects,
  FMX.Filter.Effects, FMX.Layouts;

type
  TForm1 = class(TForm)
    Image1: TImage;
    Button1: TButton;
    Button2: TButton;
    FloatAnimation1: TFloatAnimation;
    MonochromeEffect1: TMonochromeEffect;
    Layout1: TLayout;
    Panel1: TPanel;
    procedure Button1Click(Sender: TObject);
    procedure Button2Click(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    procedure FloatAnimation1Process(Sender: TObject); // 新增事件声明
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.Button1Click(Sender: TObject);
begin
  Image1.Bitmap.LoadFromFile('D:\MyPicture.jpg');
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
  FloatAnimation1.Enabled := false;
  FloatAnimation1.StopValue := 0;
  FloatAnimation1.Enabled := true;
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  MonochromeEffect1.Enabled := true;
end;

// 新增OnProcess事件处理，触发特效更新
procedure TForm1.FloatAnimation1Process(Sender: TObject);
begin
  Layout1.UpdateEffects;
end;

end.

FMX布局代码

Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 480
  ClientWidth = 640
  FormFactor.Width = 320
  FormFactor.Height = 480
  FormFactor.Devices = [Desktop]
  OnCreate = FormCreate
  DesignerMasterStyle = 0
  object Layout1: TLayout
    Align = Client
    Size.Width = 640.000000000000000000
    Size.Height = 480.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 0
    object Image1: TImage
      MultiResBitmap = <
        item
        end>
      Align = Client
      Size.Width = 640.000000000000000000
      Size.Height = 480.000000000000000000
      Size.PlatformDefault = False
      object FloatAnimation1: TFloatAnimation
        Duration = 2.000000000000000000
        PropertyName = 'Opacity'
        StartValue = 0.000000000000000000
        StartFromCurrent = True
        StopValue = 0.000000000000000000
        OnProcess = FloatAnimation1Process // 绑定事件
      end
    end
    object MonochromeEffect1: TMonochromeEffect
      Enabled = False
    end
  end
  object Panel1: TPanel
    Position.X = 12.000000000000000000
    Position.Y = 12.000000000000000000
    Size.Width = 120.000000000000000000
    Size.Height = 69.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 1
    object Button1: TButton
      Position.X = 20.000000000000000000
      Position.Y = 8.000000000000000000
      TabOrder = 0
      Text = 'load image'
      OnClick = Button1Click
    end
    object Button2: TButton
      Position.X = 20.000000000000000000
      Position.Y = 32.000000000000000000
      TabOrder = 1
      Text = 'fade out'
      OnClick = Button2Click
    end
  end
end

内容的提问来源于stack exchange，提问作者user3384674