如何在TMS WEB Core中实现面板宽度的平滑展开与折叠？

根据你提供的TMS Web Core项目代码，以下几种方法可以实现面板的平滑过渡动画：

方法一：使用内置WebUI.Animate方法（推荐） #

这是最简单的实现方式，直接调用TMS封装的动画API，支持缓动效果，无需额外组件。

实现步骤： #

1. 确保单元中引用了WebUI单元。
2. 修改按钮点击事件代码，替换直接设置宽度的逻辑：

procedure TForm1.btnCollapseClick(Sender: TObject);
begin
  layPanel.Caption := 'Collapsed';
  // 参数：目标组件、动画属性、目标值、动画时长（毫秒）
  WebUI.Animate(layPanel, 'width', 115, 500);
end;

procedure TForm1.btnExpandClick(Sender: TObject);
begin
  layPanel.Caption := 'Expanded';
  WebUI.Animate(layPanel, 'width', 500, 500);
end;

优化：防止重复点击 #

可以在动画开始时禁用按钮，动画结束后恢复可用，避免重复触发：

procedure TForm1.btnCollapseClick(Sender: TObject);
begin
  btnCollapse.Enabled := False;
  btnExpand.Enabled := False;
  layPanel.Caption := 'Collapsed';
  
  WebUI.Animate(layPanel, 'width', 115, 500, procedure
    begin
      btnCollapse.Enabled := True;
      btnExpand.Enabled := True;
    end);
end;

procedure TForm1.btnExpandClick(Sender: TObject);
begin
  btnCollapse.Enabled := False;
  btnExpand.Enabled := False;
  layPanel.Caption := 'Expanded';
  
  WebUI.Animate(layPanel, 'width', 500, 500, procedure
    begin
      btnCollapse.Enabled := True;
      btnExpand.Enabled := True;
    end);
end;

方法二：使用TWebAnimation组件 #

如果你偏好可视化配置动画，可以使用TMS提供的TWebAnimation组件：

实现步骤： #

1. 在窗体上拖放一个TWebAnimation组件（位于TMS Web Core组件面板的Animation分类）。
2. 修改按钮点击事件代码：

procedure TForm1.btnCollapseClick(Sender: TObject);
begin
  btnCollapse.Enabled := False;
  btnExpand.Enabled := False;
  layPanel.Caption := 'Collapsed';

  // 配置动画参数
  WebAnimation1.Target := layPanel;
  WebAnimation1.PropertyName := 'width';
  WebAnimation1.StartValue := layPanel.Width; // 从当前宽度开始
  WebAnimation1.EndValue := 115;
  WebAnimation1.Duration := 500; // 动画时长500毫秒
  WebAnimation1.Start;
end;

procedure TForm1.btnExpandClick(Sender: TObject);
begin
  btnCollapse.Enabled := False;
  btnExpand.Enabled := False;
  layPanel.Caption := 'Expanded';

  WebAnimation1.Target := layPanel;
  WebAnimation1.PropertyName := 'width';
  WebAnimation1.StartValue := layPanel.Width;
  WebAnimation1.EndValue := 500;
  WebAnimation1.Duration := 500;
  WebAnimation1.Start;
end;

3. 给WebAnimation1的OnFinish事件添加代码，恢复按钮可用：

procedure TForm1.WebAnimation1Finish(Sender: TObject);
begin
  btnCollapse.Enabled := True;
  btnExpand.Enabled := True;
end;

方法三：手动使用TWebTimer实现（自定义动画逻辑） #

如果需要完全控制动画的每一步，可以用定时器逐帧修改面板宽度：

实现步骤： #

1. 在窗体上拖放一个TWebTimer组件，设置Interval为10（数值越小动画越平滑），默认Enabled设为False。
2. 在窗体类的private区域添加变量：

private
  FTargetWidth: Integer; // 目标宽度
  FWidthStep: Integer;   // 每帧宽度变化量

3. 修改按钮点击事件：

procedure TForm1.btnCollapseClick(Sender: TObject);
const
  AnimationDuration = 500; // 动画总时长（毫秒）
var
  TotalSteps: Integer;
begin
  layPanel.Caption := 'Collapsed';
  FTargetWidth := 115;
  TotalSteps := AnimationDuration div WebTimer1.Interval;
  // 计算每步减少的宽度
  FWidthStep := (layPanel.Width - FTargetWidth) div TotalSteps;
  if FWidthStep = 0 then FWidthStep := -1; // 避免当前宽度已等于目标值
  
  btnCollapse.Enabled := False;
  btnExpand.Enabled := False;
  WebTimer1.Enabled := True;
end;

procedure TForm1.btnExpandClick(Sender: TObject);
const
  AnimationDuration = 500;
var
  TotalSteps: Integer;
begin
  layPanel.Caption := 'Expanded';
  FTargetWidth := 500;
  TotalSteps := AnimationDuration div WebTimer1.Interval;
  FWidthStep := (FTargetWidth - layPanel.Width) div TotalSteps;
  if FWidthStep = 0 then FWidthStep := 1;
  
  btnCollapse.Enabled := False;
  btnExpand.Enabled := False;
  WebTimer1.Enabled := True;
end;

4. 实现TWebTimer的OnTimer事件：

procedure TForm1.WebTimer1Timer(Sender: TObject);
begin
  // 处理折叠逻辑
  if (layPanel.Width > FTargetWidth) and (FWidthStep < 0) then
  begin
    layPanel.Width := layPanel.Width + FWidthStep;
    if layPanel.Width <= FTargetWidth then
    begin
      layPanel.Width := FTargetWidth;
      WebTimer1.Enabled := False;
      btnCollapse.Enabled := True;
      btnExpand.Enabled := True;
    end;
  end
  // 处理展开逻辑
  else if (layPanel.Width < FTargetWidth) and (FWidthStep > 0) then
  begin
    layPanel.Width := layPanel.Width + FWidthStep;
    if layPanel.Width >= FTargetWidth then
    begin
      layPanel.Width := FTargetWidth;
      WebTimer1.Enabled := False;
      btnCollapse.Enabled := True;
      btnExpand.Enabled := True;
    end;
  end
  // 异常情况：当前宽度已等于目标值
  else
  begin
    WebTimer1.Enabled := False;
    btnCollapse.Enabled := True;
    btnExpand.Enabled := True;
  end;
end;

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