TTreeAnimate

Animation framework for creating dynamic effects on tree nodes and diagrams

Overview

The TTreeAnimate component provides a comprehensive animation framework for TeeTree. It enables smooth transitions and dynamic effects on tree nodes, including movement, color changes, size adjustments, and text effects.

Components

TTreeAnimate

Main animation controller component.

type
  TTreeAnimate = class(TTeeAnimate)
  published
    property Tree:TCustomTree;
  end;

TNodeAnimation

Base class for all node-based animations.

type
  TNodeAnimation = class(TTeeAnimation)
  public
    function Animate:TTreeAnimate;
    property Node:TTreeNodeShape;
    
    Procedure Preview; override;
  end;

Animation Types

Integer Animations

TFontSizeAnimation

Animates node font size.

type
  TFontSizeAnimation = class(TIntegerAnimation)
  published
    property StartValue:Integer;
    property EndValue:Integer;
    property Node;
  end;

TMovementAnimation

Animates node position.

type
  TMoveSizeDirection = (mdHorizontal, mdVertical);
  
  TMovementAnimation = class(TIntegerAnimation)
  published
    property Direction:TMoveSizeDirection;
    property StartValue:Integer;
    property EndValue:Integer;
    property Node;
  end;

TSizeAnimation

Animates node size (width or height).

type
  TSizeAnimation = class(TIntegerAnimation)
  published
    property Direction:TMoveSizeDirection;
    property StartValue:Integer;
    property EndValue:Integer;
  end;

TTransparencyAnimation

Animates node transparency (0-100).

type
  TTransparencyAnimation = class(TIntegerAnimation)
  published
    property StartValue:Integer;  // 0 = opaque
    property EndValue:Integer;    // 100 = transparent
    property Node;
  end;

TTextTranspAnimation

Animates text transparency.

type
  TTextTranspAnimation = class(TIntegerAnimation)
  published
    property StartValue:Integer;
    property EndValue:Integer;
    property Node;
  end;

Color Animations

TNodeColorAnimation

Animates node colors.

type
  TNodeColor = (
    ncColor,           // Node background color
    ncBorder,          // Border color
    ncFont,            // Font color
    ncGradientStart,   // Gradient start color
    ncGradientEnd,     // Gradient end color
    ncGradientMiddle   // Gradient middle color
  );
  
  TNodeColorAnimation = class(TColorAnimation)
  published
    property NodeColor:TNodeColor;
    property StartColor:TColor;
    property EndColor:TColor;
    property Node;
  end;

TTreeColorAnimation

Animates tree panel colors.

type
  TTreeColor = (
    tcColor,           // Tree background color
    tcGrid,            // Grid color
    tcGradientStart,   // Panel gradient start
    tcGradientEnd,     // Panel gradient end
    tcGradientMiddle   // Panel gradient middle
  );
  
  TTreeColorAnimation = class(TColorAnimation)
  published
    property TreeColor:TTreeColor;
    property StartColor:TColor;
    property EndColor:TColor;
  end;

TTextColorAnimation

Animates node text color.

type
  TTextColorAnimation = class(TColorAnimation)
  published
    property StartColor:TColor;
    property EndColor:TColor;
    property Node;
  end;

Text Animations

TAddTextAnimation

Animates text appearing character by character.

type
  TAddTextAnimation = class(TNodeAnimation)
  published
    property Node;
  end;

TMoveTextAnimation

Animates text scrolling within the node.

type
  TMoveTextAnimation = class(TNodeAnimation)
  published
    property Node;
  end;

TTextAngleAnimation

Animates text rotation angle.

type
  TTextAngleAnimation = class(TIntegerAnimation)
  published
    property StartValue:Integer;  // Start angle (0-360)
    property EndValue:Integer;    // End angle
    property Node;
  end;

TTextFlashAnimation

Animates text flashing effect by changing size.

type
  TTextFlashAnimation = class(TNodeAnimation)
  published
    property SizePercent:Integer;  // Default: 100
    property Node;
  end;

Special Animations

TVisibleAnimation

Animates node visibility.

type
  TVisibleAnimation = class(TBooleanAnimation)
  published
    property NewValue:Boolean;
    property Node;
  end;

TNodeZoomAnimation

Animates node zoom effect.

type
  TNodeZoomAnimation = class(TNodeAnimation)
  published
    property ZoomPercent:Integer;  // Default: 100
    property Node;
  end;

Usage Examples

Basic Setup

var
  TreeAnimate1: TTreeAnimate;
begin
  TreeAnimate1 := TTreeAnimate.Create(Self);
  TreeAnimate1.Tree := Tree1;
  TreeAnimate1.Speed := 50;  // Animation speed
end;

Font Size Animation

var
  FontAnim: TFontSizeAnimation;
begin
  FontAnim := TFontSizeAnimation.Create(TreeAnimate1);
  FontAnim.Node := Tree1[0];
  FontAnim.StartValue := 10;
  FontAnim.EndValue := 24;
  FontAnim.Play;
end;

Movement Animation

var
  MoveAnim: TMovementAnimation;
begin
  MoveAnim := TMovementAnimation.Create(TreeAnimate1);
  MoveAnim.Node := Tree1[0];
  MoveAnim.Direction := mdHorizontal;
  MoveAnim.StartValue := Tree1[0].Left;
  MoveAnim.EndValue := Tree1.Width - Tree1[0].Width;
  MoveAnim.Play;
end;

Color Fade Animation

var
  ColorAnim: TNodeColorAnimation;
begin
  ColorAnim := TNodeColorAnimation.Create(TreeAnimate1);
  ColorAnim.Node := Tree1[0];
  ColorAnim.NodeColor := ncColor;
  ColorAnim.StartColor := clYellow;
  ColorAnim.EndColor := clRed;
  ColorAnim.Play;
end;

Transparency Animation

var
  TranspAnim: TTransparencyAnimation;
begin
  TranspAnim := TTransparencyAnimation.Create(TreeAnimate1);
  TranspAnim.Node := Tree1[0];
  TranspAnim.StartValue := 0;    // Fully opaque
  TranspAnim.EndValue := 100;     // Fully transparent
  TranspAnim.Play;
end;

Text Typing Effect

var
  TextAnim: TAddTextAnimation;
begin
  Tree1[0].SimpleText := 'Hello World!';
  
  TextAnim := TAddTextAnimation.Create(TreeAnimate1);
  TextAnim.Node := Tree1[0];
  TextAnim.Play;  // Text appears character by character
end;

Text Flash Effect

var
  FlashAnim: TTextFlashAnimation;
begin
  FlashAnim := TTextFlashAnimation.Create(TreeAnimate1);
  FlashAnim.Node := Tree1[0];
  FlashAnim.SizePercent := 150;  // Flash to 150% size
  FlashAnim.Play;
end;

Zoom Effect

var
  ZoomAnim: TNodeZoomAnimation;
begin
  ZoomAnim := TNodeZoomAnimation.Create(TreeAnimate1);
  ZoomAnim.Node := Tree1[0];
  ZoomAnim.ZoomPercent := 50;  // Zoom to 150% of original size
  ZoomAnim.Play;
end;

Text Rotation

var
  RotateAnim: TTextAngleAnimation;
begin
  RotateAnim := TTextAngleAnimation.Create(TreeAnimate1);
  RotateAnim.Node := Tree1[0];
  RotateAnim.StartValue := 0;
  RotateAnim.EndValue := 360;
  RotateAnim.Play;
end;

Visibility Toggle

var
  VisibleAnim: TVisibleAnimation;
begin
  VisibleAnim := TVisibleAnimation.Create(TreeAnimate1);
  VisibleAnim.Node := Tree1[0];
  VisibleAnim.NewValue := False;  // Hide node
  VisibleAnim.Play;
end;

Multiple Animations

var
  MoveAnim: TMovementAnimation;
  ColorAnim: TNodeColorAnimation;
begin
  // Movement
  MoveAnim := TMovementAnimation.Create(TreeAnimate1);
  MoveAnim.Node := Tree1[0];
  MoveAnim.Direction := mdHorizontal;
  MoveAnim.StartValue := 0;
  MoveAnim.EndValue := 200;
  
  // Color change
  ColorAnim := TNodeColorAnimation.Create(TreeAnimate1);
  ColorAnim.Node := Tree1[0];
  ColorAnim.NodeColor := ncColor;
  ColorAnim.StartColor := clYellow;
  ColorAnim.EndColor := clRed;
  
  // Play both simultaneously
  TreeAnimate1.Speed := 30;
  MoveAnim.Play;
  ColorAnim.Play;
end;

Tree Background Animation

var
  TreeColorAnim: TTreeColorAnimation;
begin
  TreeColorAnim := TTreeColorAnimation.Create(TreeAnimate1);
  TreeColorAnim.TreeColor := tcColor;
  TreeColorAnim.StartColor := clWhite;
  TreeColorAnim.EndColor := clSkyBlue;
  TreeColorAnim.Play;
end;

Size Animation

var
  SizeAnim: TSizeAnimation;
begin
  SizeAnim := TSizeAnimation.Create(TreeAnimate1);
  SizeAnim.Node := Tree1[0];
  SizeAnim.Direction := mdHorizontal;
  SizeAnim.StartValue := Tree1[0].Width;
  SizeAnim.EndValue := Tree1[0].Width * 2;
  SizeAnim.Play;
end;

Border Color Animation

var
  BorderAnim: TNodeColorAnimation;
begin
  Tree1[0].Border.Visible := True;
  Tree1[0].Border.Width := 3;
  
  BorderAnim := TNodeColorAnimation.Create(TreeAnimate1);
  BorderAnim.Node := Tree1[0];
  BorderAnim.NodeColor := ncBorder;
  BorderAnim.StartColor := clBlue;
  BorderAnim.EndColor := clRed;
  BorderAnim.Play;
end;

Gradient Animation

var
  GradAnim: TNodeColorAnimation;
begin
  Tree1[0].Gradient.Visible := True;
  
  GradAnim := TNodeColorAnimation.Create(TreeAnimate1);
  GradAnim.Node := Tree1[0];
  GradAnim.NodeColor := ncGradientEnd;
  GradAnim.StartColor := clWhite;
  GradAnim.EndColor := clNavy;
  GradAnim.Play;
end;

Animation Control

Play Animation

Animation.Play;

Stop Animation

Animation.Stop;

Preview Animation

Animation.Preview;  // Sets up sample values
Animation.Play;

Check if Enabled

if Animation.IsEnabled then
  Animation.Play;

Common Properties

All animations inherit from TTeeAnimation and support:

• Enabled - Enable/disable animation
• Speed - Animation speed (inherited from TTreeAnimate)
• OnStart - Event fired when animation starts
• OnStop - Event fired when animation stops
• OnAnimate - Event fired on each animation frame

Direction Constants

const
  MoveSizeDirection: Array[TMoveSizeDirection] of String = 
    ('Horizontal','Vertical');

Color Type Constants

const
  NodeColor: Array[TNodeColor] of String = 
    ('Color', 'Border', 'Font', 'GradientStart', 
     'GradientEnd', 'GradientMiddle');
     
  TreeColor: Array[TTreeColor] of String = 
    ('Color', 'Grid', 'GradientStart', 
     'GradientEnd', 'GradientMiddle');

Related Components

• TCustomTree - Tree component
• TTreeNodeShape - Node shapes

See Also

• Animation Guide
• Visual Effects