Animations and VCL Styles

[mmarquee]

I have been playing with you examples here, and am having issues with examples once they have VCL Styles added to them, is it possible that it could be my examples, or is there any examples available

[WladiD]

Hi,

I see no problems with VCL-Styles. I've tested the AnimatedAlign example with "Sky" Style. Mostly it works like expected, only the hover function on the panel didn't work well.

Can you post more details?

[mmarquee]

Yeah, what I did was take your slidingform demo example and try to make it work as a collapsible panel. Excuse the code as it is a proof of concept,, Below shows the form code and the dfm - apologies if it's too long, I can email / zip up the example.

What I am seeing is that the panel collapses nicely, but the expand flickers - very noticeably when the using a dark style (Windows10 Dark for example). I am using Delphi 10.1, but have 10.2 available in case it is a version thing with Delphi.

It might be my code obviously, so let me know if I have made issues for myself.

Thanks in advance.

interface

uses
    Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
    Dialogs, StdCtrls, ExtCtrls,
    AnyiQuack,
    AQPControlAnimations, Vcl.Grids, Vcl.Buttons, System.ImageList, Vcl.ImgList;

type
    TForm1 = class(TForm)
    Panel1: TPanel;
    Panel3: TPanel;
    Button2: TButton;
    StringGrid1: TStringGrid;
    Button5: TButton;
    Button6: TButton;
    Button7: TButton;
    Button1: TButton;
    Button3: TButton;
    Button4: TButton;
    Button8: TButton;
    Button9: TButton;
    Button10: TButton;
    procedure Button1Click(Sender: TObject);
    procedure FormCreate(Sender: TObject);
  private
    closed: Boolean;
    originalWidth : integer;
    end;

var
    Form1:TForm1;

implementation

{$R *.dfm}

procedure TForm1.Button1Click(Sender: TObject);
var
    NewLeft, NewWidth:Integer;
    NewColor:TColor;
    NewAlphaBlend:Byte;
begin

  if not closed then
  begin
    closed := true;
    NewWidth := originalWidth div 4;
    if Left <> 0 then
      begin
          NewLeft:=0;
        NewColor:=clBlack;
        NewAlphaBlend:=100;
    end
      else
    begin
        NewLeft:=Panel1.Width - NewWidth;
        NewColor:=clWhite;
        NewAlphaBlend:=100;
    end;

      with Take(Panel1)
          .FinishAnimations
        .Plugin<TAQPControlAnimations> do
      begin
          BoundsAnimation(NewLeft, 0, NewWidth, Panel1.Width,
              500, 0, TAQ.Ease(etBack, emInSnake));
        BackgroundColorAnimation(clBlack, 1000, 0, TAQ.Ease(etElastic));
        AlphaBlendAnimation(NewAlphaBlend, 2000, 0, TAQ.Ease(etElastic, emIn));
    end;
  end
  else
  begin
      closed := false;
    NewWidth := originalWidth;
    if Left <> 0 then
      begin
          NewLeft:=0;
        NewColor:=clBlack;
        NewAlphaBlend:=100;
    end
      else
    begin
        NewLeft:=Panel1.Width - NewWidth;
        NewColor:=clWhite;
        NewAlphaBlend:=100;
    end;

      with Take(Panel1)
          .FinishAnimations
        .Plugin<TAQPControlAnimations> do
      begin
          BoundsAnimation(NewLeft, 0, NewWidth, Panel1.Width,
              500, 0, TAQ.Ease(etBack, emInSnake));
        BackgroundColorAnimation(clBlack, 1000, 0, TAQ.Ease(etElastic));
        AlphaBlendAnimation(NewAlphaBlend, 2000, 0, TAQ.Ease(etElastic, emIn));
    end;
  end;

end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  closed := false;
  originalWidth := Panel1.Width;
end;

end.```

The DFM looks like this ...

```object Form1: TForm1
  Left = 0
  Top = 0
  AlphaBlend = True
  Caption = 'Click on the button...'
  ClientHeight = 438
  ClientWidth = 635
  Color = clBtnFace
  DoubleBuffered = True
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  OnCreate = FormCreate
  PixelsPerInch = 96
  TextHeight = 13
  object Panel1: TPanel
    Left = 0
    Top = 0
    Width = 241
    Height = 438
    Align = alLeft
    Alignment = taLeftJustify
    Anchors = [akLeft, akTop, akRight, akBottom]
    BevelOuter = bvNone
    ParentColor = True
    TabOrder = 0
    object Panel3: TPanel
      Left = 0
      Top = 0
      Width = 241
      Height = 41
      Align = alTop
      BevelOuter = bvNone
      TabOrder = 0
      DesignSize = (
        241
        41)
      object Button2: TButton
        Left = 194
        Top = 8
        Width = 35
        Height = 25
        Anchors = [akTop, akRight]
        Caption = 'X'
        TabOrder = 0
        OnClick = Button1Click
      end
    end
    object Button5: TButton
      Left = 0
      Top = 123
      Width = 241
      Height = 41
      Align = alTop
      Caption = 'Button1'
      ImageIndex = 2
      TabOrder = 1
    end
    object Button6: TButton
      Left = 0
      Top = 82
      Width = 241
      Height = 41
      Align = alTop
      Caption = 'Button1'
      ImageIndex = 0
      TabOrder = 2
    end
    object Button7: TButton
      Left = 0
      Top = 41
      Width = 241
      Height = 41
      Align = alTop
      Caption = 'Button1'
      ImageIndex = 1
      TabOrder = 3
    end
    object Button1: TButton
      Left = 0
      Top = 369
      Width = 241
      Height = 41
      Align = alTop
      Caption = 'Button1'
      ImageIndex = 0
      TabOrder = 4
    end
    object Button3: TButton
      Left = 0
      Top = 328
      Width = 241
      Height = 41
      Align = alTop
      Caption = 'Button1'
      ImageIndex = 7
      TabOrder = 5
    end
    object Button4: TButton
      Left = 0
      Top = 287
      Width = 241
      Height = 41
      Align = alTop
      Caption = 'Button1'
      ImageIndex = 6
      TabOrder = 6
    end
    object Button8: TButton
      Left = 0
      Top = 246
      Width = 241
      Height = 41
      Align = alTop
      Caption = 'Button1'
      ImageIndex = 5
      TabOrder = 7
    end
    object Button9: TButton
      Left = 0
      Top = 205
      Width = 241
      Height = 41
      Align = alTop
      Caption = 'Button1'
      ImageIndex = 4
      TabOrder = 8
    end
    object Button10: TButton
      Left = 0
      Top = 164
      Width = 241
      Height = 41
      Align = alTop
      Caption = 'Button1'
      ImageIndex = 3
      TabOrder = 9
    end
  end
  object StringGrid1: TStringGrid
    Left = 241
    Top = 0
    Width = 394
    Height = 438
    Align = alClient
    TabOrder = 1
    ColWidths = (
      64
      64
      64
      64
      64)
    RowHeights = (
      24
      24
      24
      24
      24)
  end
end```

[WladiD]

Hi mmarquee,

check out my last commit and add the new "ThirdPartyLibs\VCLFlickerReduce.pas" to your project. The flickering should be gone.

By the way I updated the AnimatedAlign example where the flickering is now almost gone.

Best regards

[mmarquee]

Super. I might actually have the old version from Sourceforge, rather than this one. I will try again with this code and let you know

[mmarquee]

Hey, that looks great now. Thanks a lot, that is just what I wanted.

[mmarquee]

Closing the issue, as my example now works as expected.